From 4c8fbb7893b3d208fadd97c632e716c5878d6b45 Mon Sep 17 00:00:00 2001 From: Spike Date: Sat, 16 Jul 2022 01:00:40 +0800 Subject: [PATCH 001/148] feat: translate label tooltip --- src/page/App/components/InspectPanel/label.tsx | 13 +++++++++++-- src/page/App/components/InspectPanel/style.ts | 8 ++++++++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/page/App/components/InspectPanel/label.tsx b/src/page/App/components/InspectPanel/label.tsx index 51ca1f0c11..6df6d9e565 100644 --- a/src/page/App/components/InspectPanel/label.tsx +++ b/src/page/App/components/InspectPanel/label.tsx @@ -1,14 +1,23 @@ import { FC } from "react" import { Tooltip } from "@illa-design/tooltip" -import { applyLabelTipsStyle } from "./style" +import { useTranslation, Trans } from "react-i18next" +import { applyLabelTipsStyle, labelTipsTextStyle } from "./style" import { PanelLabelProps } from "./interface" export const PanelLabel: FC = (props) => { const { labelDesc, labelName, isInList } = props + const { t } = useTranslation() + return ( + + {t(labelDesc)} + + + } trigger="hover" position="left" maxWidth="240px" diff --git a/src/page/App/components/InspectPanel/style.ts b/src/page/App/components/InspectPanel/style.ts index 013e363ca0..ab4c7362b3 100644 --- a/src/page/App/components/InspectPanel/style.ts +++ b/src/page/App/components/InspectPanel/style.ts @@ -42,6 +42,14 @@ export function applyLabelTipsStyle( ` } +export const labelTipsTextStyle = css` + & > strong { + padding: 0 4px; + border-raidus: 4px; + background: ${globalColor(`--${illaPrefix}-gray-03`)}; + } +` + export const panelHeaderWrapperStyle = css` display: flex; width: 100%; From f8f8302153bcdeef567ea0fc75253786b0e984a5 Mon Sep 17 00:00:00 2001 From: Spike Date: Sat, 16 Jul 2022 01:45:32 +0800 Subject: [PATCH 002/148] feat: add labelNameOption and labelDescOption to PanelLabel --- .../App/components/InspectPanel/interface.ts | 2 ++ src/page/App/components/InspectPanel/label.tsx | 6 +++--- src/page/App/components/InspectPanel/setter.tsx | 8 ++++++-- .../EventHandlerSetter/List/header.tsx | 17 +++++++++++++---- .../EventHandlerSetter/List/interface.ts | 5 ++++- .../PanelSetters/ListSetter/index.tsx | 9 ++++++++- .../PanelSetters/SelectSetter/dynamicSelect.tsx | 10 +++++++++- .../PanelSetters/SwitchSetter/dynamicSwitch.tsx | 9 ++++++++- 8 files changed, 53 insertions(+), 13 deletions(-) diff --git a/src/page/App/components/InspectPanel/interface.ts b/src/page/App/components/InspectPanel/interface.ts index a99af2ded5..591664108f 100644 --- a/src/page/App/components/InspectPanel/interface.ts +++ b/src/page/App/components/InspectPanel/interface.ts @@ -9,7 +9,9 @@ export interface PanelHeaderActionProps { export interface PanelLabelProps { labelName?: any + labelNameOption?: Record labelDesc?: string + labelDescOption?: Record isInList?: boolean } diff --git a/src/page/App/components/InspectPanel/label.tsx b/src/page/App/components/InspectPanel/label.tsx index 6df6d9e565..1f69378810 100644 --- a/src/page/App/components/InspectPanel/label.tsx +++ b/src/page/App/components/InspectPanel/label.tsx @@ -5,7 +5,7 @@ import { applyLabelTipsStyle, labelTipsTextStyle } from "./style" import { PanelLabelProps } from "./interface" export const PanelLabel: FC = (props) => { - const { labelDesc, labelName, isInList } = props + const { labelDesc, labelName, isInList, labelDescOption, labelNameOption } = props const { t } = useTranslation() @@ -14,7 +14,7 @@ export const PanelLabel: FC = (props) => { content={ - {t(labelDesc)} + {t(labelDesc, labelDescOption)} } @@ -23,7 +23,7 @@ export const PanelLabel: FC = (props) => { maxWidth="240px" disabled={!labelDesc} > - {labelName} + {t(labelName, labelNameOption)} ) } diff --git a/src/page/App/components/InspectPanel/setter.tsx b/src/page/App/components/InspectPanel/setter.tsx index 1cac9373d6..8ef860e6a9 100644 --- a/src/page/App/components/InspectPanel/setter.tsx +++ b/src/page/App/components/InspectPanel/setter.tsx @@ -14,7 +14,9 @@ export const Setter: FC = (props) => { isSetterSingleRow, isInList, labelName, + labelNameOption, labelDesc, + labelDescOption, useCustomLayout = false, shown, bindAttrName, @@ -51,12 +53,14 @@ export const Setter: FC = (props) => { const renderLabel = useMemo(() => { return !useCustomLayout && labelName ? ( ) : null - }, [useCustomLayout, labelName, labelDesc, isInList]) + }, [useCustomLayout, labelName, labelDesc, isInList, labelNameOption, labelDescOption]) const _finalAttrName = useMemo(() => { if (parentAttrName) { diff --git a/src/page/App/components/PanelSetters/EventHandlerSetter/List/header.tsx b/src/page/App/components/PanelSetters/EventHandlerSetter/List/header.tsx index 4717d1f195..c7475d012a 100644 --- a/src/page/App/components/PanelSetters/EventHandlerSetter/List/header.tsx +++ b/src/page/App/components/PanelSetters/EventHandlerSetter/List/header.tsx @@ -1,5 +1,4 @@ import { FC, useCallback } from "react" -import { useTranslation } from "react-i18next" import { AddIcon } from "@illa-design/icon" import { fontButtonStyle, @@ -12,8 +11,13 @@ import { PanelLabel } from "@/page/App/components/InspectPanel/label" export const EventHandlerSetterHeader: FC = ( props, ) => { - const { labelName, labelDesc, handleAddItemAsync } = props - const { t } = useTranslation() + const { + labelName, + labelDesc, + labelDescOption, + labelNameOption, + handleAddItemAsync, + } = props const handleClickNewButton = useCallback(() => { handleAddItemAsync() @@ -21,7 +25,12 @@ export const EventHandlerSetterHeader: FC = ( return (
- +
New diff --git a/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts b/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts index df17475297..698dc9dd6f 100644 --- a/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts +++ b/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts @@ -1,7 +1,10 @@ import { PanelLabelProps } from "@/page/App/components/InspectPanel/interface" export interface EventHandlerSetterHeaderProps - extends Pick { + extends Pick< + PanelLabelProps, + "labelName" | "labelDesc" | "labelNameOption" | "labelDescOption" + > { handleAddItemAsync: () => void } diff --git a/src/page/App/components/PanelSetters/ListSetter/index.tsx b/src/page/App/components/PanelSetters/ListSetter/index.tsx index 1a57afd279..1b313b5e62 100644 --- a/src/page/App/components/PanelSetters/ListSetter/index.tsx +++ b/src/page/App/components/PanelSetters/ListSetter/index.tsx @@ -16,7 +16,9 @@ import { useTranslation } from "react-i18next" export const ListSetter: FC = (props) => { const { labelName, + labelNameOption, labelDesc, + labelDescOption, childrenSetter, attrName, handleUpdateDsl, @@ -58,7 +60,12 @@ export const ListSetter: FC = (props) => { return (
- + {canReset && (
diff --git a/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx b/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx index d5636d177a..2fa14a5a8d 100644 --- a/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx +++ b/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx @@ -41,6 +41,9 @@ export const DynamicSelectSetter: FC = (props) => { handleUpdateDsl, panelConfig, labelName, + labelNameOption, + labelDesc, + labelDescOption, isSetterSingleRow, widgetDisplayName, expectedType, @@ -68,7 +71,12 @@ export const DynamicSelectSetter: FC = (props) => { return (
- + { diff --git a/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx b/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx index 26c4b5473a..217613cde4 100644 --- a/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx +++ b/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx @@ -18,7 +18,9 @@ export const DynamicSwitchSetter: FC = (props) => { const { attrName, labelName, + labelNameOption, labelDesc, + labelDescOption, panelConfig, handleUpdateDsl, value, @@ -34,7 +36,12 @@ export const DynamicSwitchSetter: FC = (props) => { return (
- +
Date: Sat, 16 Jul 2022 03:12:48 +0800 Subject: [PATCH 003/148] feat: update widget tootip --- src/i18n/locale/en-US.json | 20 +++++++++++++++++ src/i18n/locale/zh-CN.json | 22 ++++++++++++++++++- .../EventHandler/eventHandlerConfig.tsx | 8 +++---- .../ChartSetter/chartDataSetter.tsx | 3 --- .../SelectSetter/searchSelect.tsx | 2 +- .../BarProgressWidget/panelConfig.tsx | 4 ++++ .../ButtonWidget/panelConfig.tsx | 11 ++++++---- .../CheckboxGroupWidget/panelConfig.tsx | 7 ++++++ .../CircleProgressWidget/panelConfig.tsx | 4 ++++ .../DateRangeWidget/panelConfig.tsx | 14 +++++++++--- .../DateTimeWidget/panelConfig.tsx | 15 ++++++++++--- src/widgetLibrary/DateWidget/panelConfig.tsx | 12 ++++++++-- .../DividerWidget/panelConfig.tsx | 2 ++ .../EditableWidget/panelConfig.tsx | 10 +++++++++ src/widgetLibrary/ImageWidget/panelConfig.tsx | 3 +++ src/widgetLibrary/InputWidget/panelConfig.tsx | 9 ++++++++ .../NumberInputWidget/panelConfig.tsx | 12 +++++++++- .../RadioButtonWidget/panelConfig.tsx | 7 ++++++ .../RadioGroupWidget/panelConfig.tsx | 7 ++++++ src/widgetLibrary/RateWidget/panelConfig.tsx | 11 ++++++++-- .../SelectWidget/panelConfig.tsx | 10 +++++++++ .../SwitchWidget/panelConfig.tsx | 10 +++++++-- src/widgetLibrary/TextWidget/panelConfig.tsx | 7 +++--- .../TimelineWidget/panelConfig.tsx | 3 +++ 24 files changed, 184 insertions(+), 29 deletions(-) diff --git a/src/i18n/locale/en-US.json b/src/i18n/locale/en-US.json index 159627e0ec..99545549cb 100644 --- a/src/i18n/locale/en-US.json +++ b/src/i18n/locale/en-US.json @@ -544,6 +544,26 @@ "remove": "Remove dataset" } }, + "setter_tooltip": { + "text_value": "You can choose to enter value either in Markdown mode or Plain text mode. Only links in markdown mode can be recognized", + "tooltip": "User can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.", + "hidden": "Dynamically control whether the component is hidden. You can also change the hidden status through {{ name }}.hidden", + "read_only": "Control the status of whether the component is read only. A read only component can be selected and focused but cannont be modified.", + "disabled": "Control the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.", + "action": "Your actions to components trigger queries, control components, or call the data in your resources. Multiple async actions will be executed in parallel.", + "hide_validation_message": "You can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript.", + "custom_rule": "Create your validation logic here. The rules should be made in JavaScript and covered by {{}}.", + "required_field": "Valid only when the switch is on.", + "input_default_value": "The initial value of the input box. You can dynamically change the initial value of the input field by typing JavaScript in {{}}.", + "placeholder": "The value will be shown when the input field is empty.", + "switch_default_value": "Set the initial status of the switch. You can dynamically change the default value by JavaScript.", + "component_default_value": "The initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.", + "map_data_option": "Use either an array of values or an object of keys mapped to arrays. Each item in your data source is mapped to each option", + "date_format": "A valid date format string. See dayJS (https://day.js.org/docs/en/parse/string-format)", + "loading": "Whether the component should show a loading indicator.", + "progress_percentage": "The percentage value is between 0 and 100", + "timeline_direction": "Change the direction of the timeline." + }, "setter_default_value": { "solid": "Solid", "outline": "Outline" diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index 8e30701ce5..a36deaab0c 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -477,7 +477,7 @@ "end_placeholder": "结束日期占位符", "image_source": "图片来源", "alt_text": "替换文本", - "alt_text_desc": "An accessible description of the image for screen readers. This is also rendered as a fallback if the image fails to load.", + "alt_text_desc": "屏幕阅读器可访问的图像描述。如果无法加载图像，这也会作为备用方案进行渲染。", "img_height": "高度", "img_width": "宽度", "radius": "圆角", @@ -544,6 +544,26 @@ "remove": "Remove dataset" } }, + "setter_tooltip": { + "text_value": "您可以选择在 Markdown 模式或纯文本模式下输入值。只有在 Markdown 模式下可以输入链接。", + "tooltip": "用户可以在输入框输入提示内容，当鼠标放在组件上，展示提示信息，支持Markdown格式。", + "hidden": "动态控制组件是否为隐藏状态。您可以通过调用 {{ name }}.hidden 修改文本组件的隐藏状态", + "read_only": "控制组件是否为只读状态。只读组件的内容可以被选中和聚焦，但不能被修改。", + "disabled": "控制组件是否为禁用状态。当组件为禁用状态时，组件不能被修改。", + "action": "您对组件的操作会触发查询、控制组件或调用资源中的数据等操作。多个异步操作将并行执行。", + "hide_validation_message": "当验证输入有误时隐藏错误信息。您可以通过编写 JavaScript 对是否隐藏进行动态修改。", + "custom_rule": "在此处输入验证规则。 验证规则应该由 JavaScript 构成。", + "required_field": "在开关开启后对输入框执行验证。", + "input_default_value": "输入框的默认值。您可以使用模版语法在框中输入 JavaScript 语句动态改变输入框的默认值。", + "placeholder": "当输入中没有值时，展示的信息。", + "switch_default_value": "设置开关的初始状态。您可以通过 JavaScript 动态改变开关的初始状态。", + "component_default_value": "组件的默认值。您可以使用模版语法在框中输入 JavaScript 语句动态改变默认值。", + "map_data_option": "使用数值或由键值组成的对象映射成选项。数据源中的每个项都映射到每个选项", + "date_format": "一个符合规范的时间格式，请参考 dayJS（https://day.js.org/docs/en/parse/string-format）", + "loading": "控制组件是否为加载状态。", + "progress_percentage": "进度条的数值范围为 0-100", + "timeline_direction": "切换时间轴的方向" + }, "setter_default_value": { "solid": "Solid", "outline": "Outline" diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig.tsx index 938f8dacc9..f1db27d287 100644 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig.tsx +++ b/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig.tsx @@ -8,7 +8,7 @@ export const EVENT_HANDLER_CONFIG: PanelConfig[] = [ id: `${BASE_TYPE}-interaction-success-event-handler`, attrName: "successEvents", labelName: "Success", - labelDesc: "xxxxx", + // labelDesc: "xxxxx", setterType: "EVENT_HANDLER_SETTER", defaultValue: "success", useCustomLayout: true, @@ -169,7 +169,7 @@ export const EVENT_HANDLER_CONFIG: PanelConfig[] = [ { id: "enabled", labelName: "Only run when", - labelDesc: "xxxxx", + // labelDesc: "xxxxx", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, attrName: "enabled", @@ -180,7 +180,7 @@ export const EVENT_HANDLER_CONFIG: PanelConfig[] = [ id: `${BASE_TYPE}-interaction-failed-event-handler`, attrName: "failedEvents", labelName: "Failed", - labelDesc: "xxxxx", + // labelDesc: "xxxxx", setterType: "EVENT_HANDLER_SETTER", defaultValue: "failed", useCustomLayout: true, @@ -341,7 +341,7 @@ export const EVENT_HANDLER_CONFIG: PanelConfig[] = [ { id: "enabled", labelName: "Only run when", - labelDesc: "xxxxx", + // labelDesc: "xxxxx", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, attrName: "enabled", diff --git a/src/page/App/components/PanelSetters/ChartSetter/chartDataSetter.tsx b/src/page/App/components/PanelSetters/ChartSetter/chartDataSetter.tsx index c6c8f73414..e647c275ce 100644 --- a/src/page/App/components/PanelSetters/ChartSetter/chartDataSetter.tsx +++ b/src/page/App/components/PanelSetters/ChartSetter/chartDataSetter.tsx @@ -181,7 +181,6 @@ export const ChartDataSetter: FC = (props) => { attrName={TYPE} expectedType={VALIDATION_TYPES.STRING} labelName={t("editor.inspect.setter_label.chart_type")} - labelDesc="x xx" isSetterSingleRow={true} isInList={false} options={CHART_TYPE_OPTIONS} @@ -194,7 +193,6 @@ export const ChartDataSetter: FC = (props) => { attrName={X_AXIS_VALUES} expectedType={VALIDATION_TYPES.STRING} labelName={t("editor.inspect.setter_label.x_values")} - labelDesc="x xx" isSetterSingleRow={true} isInList={false} setterType="BASE_SELECT_SETTER" @@ -220,7 +218,6 @@ export const ChartDataSetter: FC = (props) => { attrName={GROUP_BY} expectedType={VALIDATION_TYPES.STRING} labelName={t("editor.inspect.setter_label.group_by")} - labelDesc="x xx" isSetterSingleRow={true} isInList={false} setterType="ALLOW_CLEAR_SELECT_SETTER" diff --git a/src/page/App/components/PanelSetters/SelectSetter/searchSelect.tsx b/src/page/App/components/PanelSetters/SelectSetter/searchSelect.tsx index 1bba70eeb5..cb17bc5055 100644 --- a/src/page/App/components/PanelSetters/SelectSetter/searchSelect.tsx +++ b/src/page/App/components/PanelSetters/SelectSetter/searchSelect.tsx @@ -12,7 +12,7 @@ export const SearchSelectSetter: FC = (props) => { showSearch={true} allowClear options={options} - size="small" + size="medium" value={value} onChange={(value) => { handleUpdateDsl(attrName, value) diff --git a/src/widgetLibrary/BarProgressWidget/panelConfig.tsx b/src/widgetLibrary/BarProgressWidget/panelConfig.tsx index 58da0d57e4..37128107b2 100644 --- a/src/widgetLibrary/BarProgressWidget/panelConfig.tsx +++ b/src/widgetLibrary/BarProgressWidget/panelConfig.tsx @@ -11,6 +11,7 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ { id: "bar-progress-basic-Value", labelName: "editor.inspect.setter_label.value", + labelDesc: "editor.inspect.setter_tooltip.progress_percentage", attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -83,6 +84,7 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ { id: "bar-progress-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -97,6 +99,8 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ id: "bar-progress-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "barProgressName" }, attrName: "hidden", useCustomLayout: true, expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/ButtonWidget/panelConfig.tsx b/src/widgetLibrary/ButtonWidget/panelConfig.tsx index a1b2fe1917..c63afde2a7 100644 --- a/src/widgetLibrary/ButtonWidget/panelConfig.tsx +++ b/src/widgetLibrary/ButtonWidget/panelConfig.tsx @@ -31,7 +31,6 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ id: "button-interaction-event-handler", attrName: "events", labelName: "editor.inspect.setter_label.event_handler", - labelDesc: "xxxxx", setterType: "EVENT_HANDLER_SETTER", useCustomLayout: true, childrenSetter: [ @@ -45,6 +44,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: "action", labelName: "editor.inspect.setter_label.action", + labelDesc: "editor.inspect.setter_tooltip.action", setterType: "EVENT_ACTION_SELECT_SETTER", attrName: "actionType", options: [ @@ -217,7 +217,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: "enabled", labelName: "Only run when", - labelDesc: "xxxxx", + // labelDesc: "xxxxx", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, attrName: "enabled", @@ -248,7 +248,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: "button-interaction-loading", labelName: "editor.inspect.setter_label.loading", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.loading", attrName: "loading", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -260,7 +260,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: "button-interaction-disabled", labelName: "editor.inspect.setter_label.disabled", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -276,6 +276,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: "button-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", @@ -314,6 +315,8 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ id: "button-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "buttonName" }, useCustomLayout: true, attrName: "hidden", expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx b/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx index 9f695bf774..b027852d07 100644 --- a/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx +++ b/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx @@ -100,6 +100,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-options-default-value`, labelName: "editor.inspect.setter_label.default_value", + labelDesc: "editor.inspect.setter_tooltip.component_default_value", attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -166,6 +167,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-validation-required`, labelName: "editor.inspect.setter_label.required_field", + labelDesc: "editor.inspect.setter_tooltip.required_field", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -174,6 +176,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-validation-hide-message`, labelName: "editor.inspect.setter_label.hide_validation_message", + labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -188,6 +191,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-interaction-disabled`, labelName: "editor.inspect.setter_label.disabled", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -202,6 +206,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-adornments-tooltip`, labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -215,6 +220,8 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-layout-hidden`, labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "checkboxGroupName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", placeholder: "false", diff --git a/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx b/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx index 336e1e76a1..d4b173c849 100644 --- a/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx +++ b/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx @@ -16,6 +16,7 @@ export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ { id: "circle-progress-basic-Value", labelName: "editor.inspect.setter_label.value", + labelDesc: "editor.inspect.setter_label.progress_percentage", attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -35,6 +36,7 @@ export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ { id: "circle-progress-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -49,6 +51,8 @@ export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ id: "circle-progress-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "circelProgressName" }, attrName: "hidden", useCustomLayout: true, expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/DateRangeWidget/panelConfig.tsx b/src/widgetLibrary/DateRangeWidget/panelConfig.tsx index 86e65ed0cf..6e8b9deacf 100644 --- a/src/widgetLibrary/DateRangeWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateRangeWidget/panelConfig.tsx @@ -24,12 +24,14 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-basic-Format", labelName: "editor.inspect.setter_label.format", + labelDesc: "editor.inspect.setter_tooltip.date_format", attrName: "dateFormat", setterType: "INPUT_SETTER", }, { id: "date-range-basic-start-placeholder", labelName: "editor.inspect.setter_label.start_placeholder", + labelDesc: "editor.inspect.setter_tooltip.placeholder", isSetterSingleRow: true, attrName: "startPlaceholder", setterType: "INPUT_SETTER", @@ -37,6 +39,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-range-basic-end-placeholder", labelName: "editor.inspect.setter_label.end_placeholder", + labelDesc: "editor.inspect.setter_tooltip.placeholder", isSetterSingleRow: true, attrName: "endPlaceholder", setterType: "INPUT_SETTER", @@ -118,7 +121,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-range-interaction-disabled", labelName: "editor.inspect.setter_label.disabled", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -126,7 +129,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-range-interaction-readonly", labelName: "editor.inspect.setter_label.read_only", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.read_only", attrName: "readonly", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -140,6 +143,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-range-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", }, @@ -154,7 +158,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-range-interaction-loading", labelName: "editor.inspect.setter_label.loading", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.loading", attrName: "loading", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -168,6 +172,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-range-validation-required", labelName: "editor.inspect.setter_label.required_field", + labelDesc: "editor.inspect.setter_tooltip.required_field", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -176,6 +181,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-range-validation-hide-message", labelName: "editor.inspect.setter_label.hide_validation_message", + labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -191,6 +197,8 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ id: "date-range-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "dateRangeName" }, attrName: "hidden", useCustomLayout: true, expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/DateTimeWidget/panelConfig.tsx b/src/widgetLibrary/DateTimeWidget/panelConfig.tsx index 63c81c6f5c..8ddf35ee9f 100644 --- a/src/widgetLibrary/DateTimeWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateTimeWidget/panelConfig.tsx @@ -12,6 +12,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ { id: "date_time-basic-DefaultValue", labelName: "editor.inspect.setter_label.default_value", + labelDesc: "editor.inspect.setter_tooltip.default_value", attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -19,6 +20,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ { id: "date_time-basic-date-format", labelName: "editor.inspect.setter_label.format", + labelDesc: "editor.inspect.setter_tooltip.date_format", attrName: "dateFormat", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -26,6 +28,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ { id: "date_time-basic-placeholder", labelName: "editor.inspect.setter_label.placeholder", + labelDesc: "editor.inspect.setter_tooltip.placeholder", attrName: "placeholder", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -121,7 +124,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ { id: "date_time-interaction-loading", labelName: "editor.inspect.setter_label.loading", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.loading", attrName: "loading", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -129,7 +132,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ { id: "date_time-interaction-disabled", labelName: "editor.inspect.setter_label.disabled", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -137,7 +140,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ { id: "date_time-interaction-readonly", labelName: "editor.inspect.setter_label.read_only", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.read_only", attrName: "readonly", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -159,6 +162,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ { id: "date_time-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -172,6 +176,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ { id: "date-time-validation-required", labelName: "editor.inspect.setter_label.required_field", + labelDesc: "editor.inspect.setter_tooltip.required_field", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -180,6 +185,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ { id: "date-time-validation-custom", labelName: "editor.inspect.setter_label.custom_rule", + labelDesc: "editor.inspect.setter_tooltip.custom_rule", setterType: "INPUT_SETTER", attrName: "customRule", expectedType: VALIDATION_TYPES.STRING, @@ -187,6 +193,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ { id: "date-time-validation-hide-message", labelName: "editor.inspect.setter_label.hide_validation_message", + labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -202,6 +209,8 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ id: "date_time-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "dateTimeName" }, attrName: "hidden", useCustomLayout: true, expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/DateWidget/panelConfig.tsx b/src/widgetLibrary/DateWidget/panelConfig.tsx index 74953dd413..f4cb31ee96 100644 --- a/src/widgetLibrary/DateWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateWidget/panelConfig.tsx @@ -12,6 +12,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-basic-DefaultValue", labelName: "editor.inspect.setter_label.default_value", + labelDesc: "editor.inspect.setter_tooltip.component_default_value", attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -19,6 +20,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-basic-Format", labelName: "editor.inspect.setter_label.format", + labelDesc: "editor.inspect.setter_tooltip.date_format", attrName: "dateFormat", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -26,6 +28,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-basic-placeholder", labelName: "editor.inspect.setter_label.placeholder", + labelDesc: "editor.inspect.setter_tooltip.placeholder", attrName: "placeholder", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -107,7 +110,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-interaction-disabled", labelName: "editor.inspect.setter_label.disabled", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -115,7 +118,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-interaction-readonly", labelName: "editor.inspect.setter_label.read_only", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.read_only", attrName: "readOnly", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -129,6 +132,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -158,6 +162,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ { id: "input-validation-required", labelName: "editor.inspect.setter_label.required_field", + labelDesc: "editor.inspect.setter_tooltip.required_field", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -166,6 +171,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ { id: "input-validation-hide-message", labelName: "editor.inspect.setter_label.hide_validation_message", + labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -181,6 +187,8 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ id: "date-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "dateName" }, attrName: "hidden", useCustomLayout: true, expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/DividerWidget/panelConfig.tsx b/src/widgetLibrary/DividerWidget/panelConfig.tsx index c7997e4182..2c8edd1e14 100644 --- a/src/widgetLibrary/DividerWidget/panelConfig.tsx +++ b/src/widgetLibrary/DividerWidget/panelConfig.tsx @@ -49,6 +49,8 @@ export const DIVIDER_PANEL_CONFIG: PanelConfig[] = [ id: "divider-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "dividerName" }, attrName: "hidden", useCustomLayout: true, expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/EditableWidget/panelConfig.tsx b/src/widgetLibrary/EditableWidget/panelConfig.tsx index 612e35eea6..3786089cc4 100644 --- a/src/widgetLibrary/EditableWidget/panelConfig.tsx +++ b/src/widgetLibrary/EditableWidget/panelConfig.tsx @@ -12,6 +12,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "editable-text-basic-defaultValue", labelName: "editor.inspect.setter_label.default_value", + labelDesc: "editor.inspect.setter_tooltip.default_value", attrName: "value", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", @@ -19,6 +20,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "editable-text-basic-placeholder", labelName: "editor.inspect.setter_label.placeholder", + labelDesc: "editor.inspect.setter_tooltip.placeholder", attrName: "placeholder", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", @@ -85,6 +87,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "editable-text-interaction-disabled", labelName: "editor.inspect.setter_label.disabled", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -93,6 +96,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "editable-text-interaction-readonly", labelName: "editor.inspect.setter_label.read_only", + labelDesc: "editor.inspect.setter_tooltip.read_only", attrName: "readOnly", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -137,6 +141,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "editable-text-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -150,6 +155,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "editable-text-validation-required", labelName: "editor.inspect.setter_label.required_field", + labelDesc: "editor.inspect.setter_tooltip.required_field", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -188,6 +194,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "editable-text-validation-custom", labelName: "editor.inspect.setter_label.custom_rule", + labelDesc: "editor.inspect.setter_tooltip.custom_rule", setterType: "INPUT_SETTER", attrName: "customRule", expectedType: VALIDATION_TYPES.STRING, @@ -195,6 +202,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "editable-text-validation-hide-message", labelName: "editor.inspect.setter_label.hide_validation_message", + labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -209,6 +217,8 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "editable-text-layout-hidden", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "editableTextName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", placeholder: "false", diff --git a/src/widgetLibrary/ImageWidget/panelConfig.tsx b/src/widgetLibrary/ImageWidget/panelConfig.tsx index 1cb5ec9098..6201c28264 100644 --- a/src/widgetLibrary/ImageWidget/panelConfig.tsx +++ b/src/widgetLibrary/ImageWidget/panelConfig.tsx @@ -45,6 +45,7 @@ export const IMAGE_PANEL_CONFIG: PanelConfig[] = [ { id: "image-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", @@ -72,6 +73,8 @@ export const IMAGE_PANEL_CONFIG: PanelConfig[] = [ { id: "image-layout-hidden", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "imageName" }, attrName: "hidden", expectedType: VALIDATION_TYPES.BOOLEAN, setterType: "DYNAMIC_SWITCH_SETTER", diff --git a/src/widgetLibrary/InputWidget/panelConfig.tsx b/src/widgetLibrary/InputWidget/panelConfig.tsx index 062dd61eb3..85d6ded728 100644 --- a/src/widgetLibrary/InputWidget/panelConfig.tsx +++ b/src/widgetLibrary/InputWidget/panelConfig.tsx @@ -12,6 +12,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: "input-basic-defaultValue", labelName: "editor.inspect.setter_label.default_value", + labelDesc: "editor.inspect.setter_tooltip.input_default_value", attrName: "value", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", @@ -19,6 +20,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: "input-basic-placeholder", labelName: "editor.inspect.setter_label.placeholder", + labelDesc: "editor.inspect.setter_tooltip.placeholder", attrName: "placeholder", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", @@ -85,6 +87,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: "input-interaction-disabled", labelName: "editor.inspect.setter_label.disabled", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -93,6 +96,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: "input-interaction-readonly", labelName: "editor.inspect.setter_label.read_only", + labelDesc: "editor.inspect.setter_tooltip.read_only", attrName: "readOnly", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -137,6 +141,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: "input-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -150,6 +155,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: "input-validation-required", labelName: "editor.inspect.setter_label.required_field", + labelDesc: "editor.inspect.setter_tooltip.required_field", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -188,6 +194,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: "input-validation-custom", labelName: "editor.inspect.setter_label.custom_rule", + labelDesc: "editor.inspect.setter_tooltip.custom_rule", setterType: "INPUT_SETTER", attrName: "customRule", expectedType: VALIDATION_TYPES.STRING, @@ -195,6 +202,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: "input-validation-hide-message", labelName: "editor.inspect.setter_label.hide_validation_message", + labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -209,6 +217,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: "input-layout-hidden", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", placeholder: "false", diff --git a/src/widgetLibrary/NumberInputWidget/panelConfig.tsx b/src/widgetLibrary/NumberInputWidget/panelConfig.tsx index 6edb90963b..cf74e125da 100644 --- a/src/widgetLibrary/NumberInputWidget/panelConfig.tsx +++ b/src/widgetLibrary/NumberInputWidget/panelConfig.tsx @@ -14,6 +14,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-basic-default-value`, labelName: "editor.inspect.setter_label.default_value", + labelDesc: "editor.inspect.setter_tooltip.input_default_value", attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -21,6 +22,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-basic-placeholder`, labelName: "editor.inspect.setter_label.placeholder", + labelDesc: "editor.inspect.setter_tooltip.placeholder", attrName: "placeholder", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -28,7 +30,6 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-basic-decimal-place`, labelName: "editor.inspect.setter_label.decimal_place", - labelDesc: "xxxx", attrName: "precision", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -117,6 +118,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-interaction-disabled`, labelName: "editor.inspect.setter_label.disabled", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -125,6 +127,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-interaction-readonly`, labelName: "editor.inspect.setter_label.read_only", + labelDesc: "editor.inspect.setter_tooltip.read_only", attrName: "readOnly", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -139,6 +142,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-adornments-tooltip`, labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -146,6 +150,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-adornments-loading`, labelName: "editor.inspect.setter_label.loading", + labelDesc: "editor.inspect.setter_tooltip.loading", attrName: "loading", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -173,6 +178,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-validation-required`, labelName: "editor.inspect.setter_label.required_field", + labelDesc: "editor.inspect.setter_tooltip.required_field", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -181,6 +187,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-validation-custom`, labelName: "editor.inspect.setter_label.custom_rule", + labelDesc: "editor.inspect.setter_tooltip.custom_rule", setterType: "INPUT_SETTER", attrName: "customRule", expectedType: VALIDATION_TYPES.STRING, @@ -188,6 +195,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-validation-hide-message`, labelName: "editor.inspect.setter_label.hide_validation_message", + labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -202,6 +210,8 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-layout-hidden`, labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "numberInputName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", placeholder: "false", diff --git a/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx b/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx index 89601fe163..0d627f77d1 100644 --- a/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx +++ b/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx @@ -100,6 +100,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-options-default-value`, labelName: "editor.inspect.setter_label.default_value", + labelDesc: "editor.inspect.setter_tooltip.component_default_value", attrName: "value", setterType: "INPUT_SETTER", }, @@ -165,6 +166,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-validation-required`, labelName: "editor.inspect.setter_label.required_field", + labelDesc: "editor.inspect.setter_tooltip.required_field", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -173,6 +175,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-validation-hide-message`, labelName: "editor.inspect.setter_label.hide_validation_message", + labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -187,6 +190,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-interaction-disabled`, labelName: "editor.inspect.setter_label.disabled", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -201,6 +205,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-adornments-tooltip`, labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -214,6 +219,8 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-layout-hidden`, labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "radioButtonName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", useCustomLayout: true, diff --git a/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx b/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx index 945cc5eb86..a9896d130c 100644 --- a/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx +++ b/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx @@ -104,6 +104,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: "radioGroup-basic-defaultValue", labelName: "editor.inspect.setter_label.default_value", + labelDesc: "editor.inspect.setter_tooltip.component_default_value", attrName: "value", setterType: "INPUT_SETTER", }, @@ -169,6 +170,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: "radioGroup-validation-required", labelName: "editor.inspect.setter_label.required_field", + labelDesc: "editor.inspect.setter_tooltip.required_field", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -177,6 +179,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: "radioGroup-validation-hide-message", labelName: "editor.inspect.setter_label.hide_validation_message", + labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -191,6 +194,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: "radioGroup-interaction-disabled", labelName: "editor.inspect.setter_label.disabled", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -205,6 +209,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: "radioGroup-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -218,6 +223,8 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: "radioGroup-layout-hidden", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "radioGroupName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", placeholder: "false", diff --git a/src/widgetLibrary/RateWidget/panelConfig.tsx b/src/widgetLibrary/RateWidget/panelConfig.tsx index 7650769bf5..4c430ac14e 100644 --- a/src/widgetLibrary/RateWidget/panelConfig.tsx +++ b/src/widgetLibrary/RateWidget/panelConfig.tsx @@ -12,6 +12,7 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ { id: "rate-basic-DefaultValue", labelName: "editor.inspect.setter_label.default_value", + labelDesc: "editor.inspect.setter_tooltip.component_default_value", attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -114,7 +115,7 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ { id: "rate-interaction-disabled", labelName: "editor.inspect.setter_label.disabled", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -122,7 +123,7 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ { id: "rate-interaction-readonly", labelName: "editor.inspect.setter_label.read_only", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.read_only", attrName: "readonly", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -136,6 +137,7 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ { id: "rate-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -149,6 +151,7 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ { id: "rate-validation-required", labelName: "editor.inspect.setter_label.required_field", + labelDesc: "editor.inspect.setter_tooltip.required_field", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -157,6 +160,7 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ { id: "rate-validation-custom", labelName: "editor.inspect.setter_label.custom_rule", + labelDesc: "editor.inspect.setter_tooltip.custom_rule", setterType: "INPUT_SETTER", attrName: "customRule", expectedType: VALIDATION_TYPES.STRING, @@ -164,6 +168,7 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ { id: "rate-validation-hide-message", labelName: "editor.inspect.setter_label.hide_validation_message", + labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -179,6 +184,8 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ id: "rate-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "rateName" }, useCustomLayout: true, attrName: "hidden", expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/SelectWidget/panelConfig.tsx b/src/widgetLibrary/SelectWidget/panelConfig.tsx index 1358520aa4..11b17a1cb0 100644 --- a/src/widgetLibrary/SelectWidget/panelConfig.tsx +++ b/src/widgetLibrary/SelectWidget/panelConfig.tsx @@ -67,6 +67,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ { id: "select-option-mapped", labelName: "editor.inspect.setter_label.mapped_option", + labelDesc: "editor.inspect.setter_tooltip.map_data_option", useCustomLayout: true, attrName: "mappedOption", setterType: "OPTION_MAPPED_SETTER", @@ -99,12 +100,14 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ { id: "select-basic-defaultValue", labelName: "editor.inspect.setter_label.default_value", + labelDesc: "editor.inspect.setter_tooltip.component_default_value", attrName: "value", setterType: "INPUT_SETTER", }, { id: "select-basic-placeholder", labelName: "editor.inspect.setter_label.placeholder", + labelDesc: "editor.inspect.setter_tooltip.placeholder", attrName: "placeholder", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -171,6 +174,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ { id: "select-validation-required", labelName: "editor.inspect.setter_label.required_field", + labelDesc: "editor.inspect.setter_tooltip.required_field", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -179,6 +183,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ { id: "select-validation-hide-message", labelName: "editor.inspect.setter_label.hide_validation_message", + labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -193,6 +198,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ { id: "select-interaction-disabled", labelName: "editor.inspect.setter_label.disabled", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -201,6 +207,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ { id: "select-interaction-readonly", labelName: "editor.inspect.setter_label.read_only", + labelDesc: "editor.inspect.setter_tooltip.read_only", attrName: "readOnly", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -237,6 +244,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ { id: "select-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -250,6 +258,8 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ { id: "select-layout-hidden", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "selectName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", useCustomLayout: true, diff --git a/src/widgetLibrary/SwitchWidget/panelConfig.tsx b/src/widgetLibrary/SwitchWidget/panelConfig.tsx index 6478edbfa5..a53bf55195 100644 --- a/src/widgetLibrary/SwitchWidget/panelConfig.tsx +++ b/src/widgetLibrary/SwitchWidget/panelConfig.tsx @@ -12,6 +12,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ { id: "switch-basic-defaultValue", labelName: "editor.inspect.setter_label.default_value", + labelDesc: "editor.inspect.setter_tooltip.switch_default_value", attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -73,7 +74,6 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ id: "switch-interaction-event-handler", attrName: "events", labelName: "editor.inspect.setter_label.event_handler", - labelDesc: "xxxxx", setterType: "EVENT_HANDLER_SETTER", useCustomLayout: true, childrenSetter: [ @@ -87,6 +87,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ { id: "action", labelName: "editor.inspect.setter_label.action", + labelDesc: "editor.inspect.setter_tooltip.action", setterType: "EVENT_ACTION_SELECT_SETTER", attrName: "actionType", options: [ @@ -235,7 +236,6 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ { id: "enabled", labelName: "Only run when", - labelDesc: "xxxxx", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, attrName: "enabled", @@ -245,6 +245,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ { id: "switch-interaction-disabled", labelName: "editor.inspect.setter_label.disabled", + labelDesc: "editor.inspect.setter_tooltip.disabled", attrName: "disabled", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -259,6 +260,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ { id: "switch-adornments-tooltip", labelName: "editor.inspect.setter_label.tooltip", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -272,6 +274,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ { id: "switch-validation-required", labelName: "editor.inspect.setter_label.required_field", + labelDesc: "editor.inspect.setter_tooltip.required_field", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -280,6 +283,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ { id: "switch-validation-hide-message", labelName: "editor.inspect.setter_label.hide_validation_message", + labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -294,6 +298,8 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ { id: "switch-layout-hidden", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "switchName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", placeholder: "false", diff --git a/src/widgetLibrary/TextWidget/panelConfig.tsx b/src/widgetLibrary/TextWidget/panelConfig.tsx index 388305a559..b26381f45c 100644 --- a/src/widgetLibrary/TextWidget/panelConfig.tsx +++ b/src/widgetLibrary/TextWidget/panelConfig.tsx @@ -18,6 +18,7 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "text-basic-inputModal", labelName: "editor.inspect.setter_label.value", + labelDesc: "editor.inspect.setter_tooltip.text_value", attrName: "disableMarkdown", setterType: "RADIO_GROUP_SETTER", options: [ @@ -41,7 +42,7 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "text-adornments-startAdornment", labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.tooltip", attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -56,7 +57,6 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ id: "text-layout-col", labelName: "editor.inspect.setter_label.horizontal_alignment", attrName: "horizontalAlign", - labelDesc: "xxxxxxx", setterType: "RADIO_GROUP_SETTER", isSetterSingleRow: true, options: [ @@ -78,7 +78,6 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ id: "text-layout-row", labelName: "editor.inspect.setter_label.vertical_alignment", setterType: "RADIO_GROUP_SETTER", - labelDesc: "xxxxxxx", attrName: "verticalAlign", isSetterSingleRow: true, options: [ @@ -99,6 +98,8 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "text-layout-hidden", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "textName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", useCustomLayout: true, diff --git a/src/widgetLibrary/TimelineWidget/panelConfig.tsx b/src/widgetLibrary/TimelineWidget/panelConfig.tsx index 0001c2651c..4f2f60f9bc 100644 --- a/src/widgetLibrary/TimelineWidget/panelConfig.tsx +++ b/src/widgetLibrary/TimelineWidget/panelConfig.tsx @@ -19,6 +19,7 @@ export const TIMELINE_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-direction`, labelName: "editor.inspect.setter_label.direction", + labelDesc: "editor.inspect.setter_tooltip.timeline_direction", setterType: "RADIO_GROUP_SETTER", attrName: "direction", options: [ @@ -45,6 +46,8 @@ export const TIMELINE_PANEL_CONFIG: PanelConfig[] = [ { id: "text-layout-hidden", labelName: "editor.inspect.setter_label.hidden", + labelDesc: "editor.inspect.setter_tooltip.hidden", + labelDescOption: { name: "timelineName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", useCustomLayout: true, From 6f97220a6b89b728fcd766b5165b81349035e961 Mon Sep 17 00:00:00 2001 From: smallSohoSolo Date: Sun, 17 Jul 2022 16:38:30 +0800 Subject: [PATCH 004/148] fix: sb login feature --- src/App.tsx | 6 ++-- src/api/AxiosInterceptor.tsx | 5 ++- src/api/ws/index.ts | 2 ++ src/authInit.tsx | 48 -------------------------- src/middleware/settingsInfoRequest.tsx | 36 +++++++++++++++++++ yarn.lock | 12 +++++++ 6 files changed, 57 insertions(+), 52 deletions(-) delete mode 100644 src/authInit.tsx create mode 100644 src/middleware/settingsInfoRequest.tsx diff --git a/src/App.tsx b/src/App.tsx index c757dfd64a..cb76494354 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -26,7 +26,7 @@ import { HTML5Backend } from "react-dnd-html5-backend" import { GlobalDataProvider } from "@/page/App/context/globalDataProvider" import { DndProvider } from "react-dnd" -import AuthInit from "./authInit" +import SettingsInfoRequest from "./middleware/settingsInfoRequest" import { useSelector } from "react-redux" import { getCurrentConfigLanguage, @@ -48,7 +48,7 @@ function App() { - + @@ -83,7 +83,7 @@ function App() { } /> - + diff --git a/src/api/AxiosInterceptor.tsx b/src/api/AxiosInterceptor.tsx index 1d8795bd0d..40bcc827b0 100644 --- a/src/api/AxiosInterceptor.tsx +++ b/src/api/AxiosInterceptor.tsx @@ -2,6 +2,7 @@ import { FC, useLayoutEffect } from "react" import { AxiosResponse } from "axios" import { useNavigate, useLocation } from "react-router-dom" import { Api } from "./base" +import { removeLocalStorage } from "@/utils/storage" export const AxiosInterceptor: FC<{ children: JSX.Element }> = ({ children, @@ -15,9 +16,11 @@ export const AxiosInterceptor: FC<{ children: JSX.Element }> = ({ const errInterceptor = (error: any) => { if (error.response.status === 401) { + removeLocalStorage("token") navigate("/user/login", { replace: true, state: { from: location } }) + } else if (error.response.status >= 500) { + navigate(`/500`) } - return Promise.reject(error) } diff --git a/src/api/ws/index.ts b/src/api/ws/index.ts index a832b243d7..393e3d1f23 100644 --- a/src/api/ws/index.ts +++ b/src/api/ws/index.ts @@ -68,12 +68,14 @@ export class Connection { switch (type) { case "dashboard": config = { + baseURL: "http://10.242.213.21:8080/api/v1", url: `/room/${instanceId}/dashboard`, method: "get", } break case "app": config = { + baseURL: "http://10.242.213.21:8080/api/v1", url: `/room/${instanceId}/app/${roomId}`, method: "get", } diff --git a/src/authInit.tsx b/src/authInit.tsx deleted file mode 100644 index c3f4085920..0000000000 --- a/src/authInit.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { ReactNode, useEffect, useState } from "react" -import { useSelector, useDispatch } from "react-redux" -import { useNavigate } from "react-router-dom" -import { getLocalStorage } from "@/utils/storage" -import { getCurrentUser } from "@/redux/currentUser/currentUserSelector" -import { Api } from "@/api/base" -import { CurrentUser } from "@/redux/currentUser/currentUserState" -import { currentUserActions } from "@/redux/currentUser/currentUserSlice" - -const AuthInit = ({ children }: { children: ReactNode }) => { - const dispatch = useDispatch() - const navigate = useNavigate() - - const token = getLocalStorage("token") - const currentUserId = useSelector(getCurrentUser)?.userId - - const [showNextPage, setShowNextPage] = useState( - !!currentUserId && currentUserId > 0, - ) - - useEffect(() => { - if (!token) { - navigate(`/user/login`) - setShowNextPage(true) - return - } - if (!currentUserId) { - Api.request( - { - url: "/users", - method: "GET", - }, - (response) => { - dispatch( - currentUserActions.updateCurrentUserReducer({ - ...response.data, - nickname: response.data.nickname, - }), - ) - setShowNextPage(true) - }, - ) - } - }, []) - return <>{showNextPage ? children : null} -} - -export default AuthInit diff --git a/src/middleware/settingsInfoRequest.tsx b/src/middleware/settingsInfoRequest.tsx new file mode 100644 index 0000000000..d6f50a3387 --- /dev/null +++ b/src/middleware/settingsInfoRequest.tsx @@ -0,0 +1,36 @@ +import { FC, Fragment, useEffect } from "react" +import { useDispatch } from "react-redux" +import { getLocalStorage } from "@/utils/storage" +import { Api } from "@/api/base" +import { CurrentUser } from "@/redux/currentUser/currentUserState" +import { currentUserActions } from "@/redux/currentUser/currentUserSlice" + +const SettingsInfoRequest: FC = (props) => { + const dispatch = useDispatch() + + // user info + useEffect(() => { + const token = getLocalStorage("token") + if (token === "" || token === undefined || token === null) { + return + } + Api.request( + { + url: "/users", + method: "GET", + }, + (response) => { + dispatch( + currentUserActions.updateCurrentUserReducer({ + ...response.data, + nickname: response.data.nickname, + }), + ) + }, + (response) => {}, + ) + }, []) + return {props.children} +} + +export default SettingsInfoRequest diff --git a/yarn.lock b/yarn.lock index ee43106a46..295384dfeb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1669,6 +1669,18 @@ resolved "https://registry.npmmirror.com/@fontsource/fira-code/-/fira-code-4.5.10.tgz#e1060a60d08cba1669e1ff2025350aaab7c0e6bc" integrity sha512-CF6cBJZcpuW+qxtr7JZt3kPwEHj0xWYgsRr7q3tGhkIqEmxdJ6Omvw61LEFQuRXeAwOnXBGZr42qTrO+vCzvAQ== +"@illa-design/system@0.0.11": + version "0.0.11" + resolved "https://registry.yarnpkg.com/@illa-design/system/-/system-0.0.11.tgz#38bdafe9c1418f95ecfd16cb469a0578a9d6b927" + integrity sha512-FPb/Pa+E8wJzXv2QRhJ03gm3UCSgCJySJqMcGW38Dv4qF44a5uGC6oKYRDgmGA07nVJhXqA+UDEpBJaKluJeag== + dependencies: + dayjs "^1.10.7" + number-precision "^1.5.2" + react-fast-compare "^3.2.0" + react-focus-lock "^2.8.1" + react-remove-scroll "^2.5.4" + react-use "^17.3.1" + "@istanbuljs/load-nyc-config@^1.0.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced" From 6099caadf4bc07e398484fb22052f91b99a9d8cb Mon Sep 17 00:00:00 2001 From: smallSohoSolo Date: Sun, 17 Jul 2022 16:40:46 +0800 Subject: [PATCH 005/148] feat: add 40x to error response page --- src/api/AxiosInterceptor.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/api/AxiosInterceptor.tsx b/src/api/AxiosInterceptor.tsx index 40bcc827b0..b8d0365435 100644 --- a/src/api/AxiosInterceptor.tsx +++ b/src/api/AxiosInterceptor.tsx @@ -1,6 +1,6 @@ import { FC, useLayoutEffect } from "react" import { AxiosResponse } from "axios" -import { useNavigate, useLocation } from "react-router-dom" +import { useLocation, useNavigate } from "react-router-dom" import { Api } from "./base" import { removeLocalStorage } from "@/utils/storage" @@ -18,6 +18,8 @@ export const AxiosInterceptor: FC<{ children: JSX.Element }> = ({ if (error.response.status === 401) { removeLocalStorage("token") navigate("/user/login", { replace: true, state: { from: location } }) + } else if (error.response.status === 403) { + navigate(`/403`) } else if (error.response.status >= 500) { navigate(`/500`) } From 5674869bc06553f54f46a1bcae5e8b4c4d4a4741 Mon Sep 17 00:00:00 2001 From: smallSohoSolo Date: Sun, 17 Jul 2022 16:42:19 +0800 Subject: [PATCH 006/148] feat: remove error effect --- src/api/AxiosInterceptor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/AxiosInterceptor.tsx b/src/api/AxiosInterceptor.tsx index b8d0365435..bca6336fd5 100644 --- a/src/api/AxiosInterceptor.tsx +++ b/src/api/AxiosInterceptor.tsx @@ -32,7 +32,7 @@ export const AxiosInterceptor: FC<{ children: JSX.Element }> = ({ ) return () => Api.removeResponseInterceptor(interceptor) - }, [location, navigate]) + }, []) return children } From c9f8faed49ee25cce2f2318f9f0d94b8c67a0ee1 Mon Sep 17 00:00:00 2001 From: smallSohoSolo Date: Sun, 17 Jul 2022 19:49:03 +0800 Subject: [PATCH 007/148] chore: change ws connection --- package.json | 3 +- src/api/ws/index.ts | 48 ++++++++++++++--------------- src/middleware/redux/redux-async.ts | 41 ++++++++++++------------ src/page/App/index.tsx | 15 ++++----- src/page/Dashboard/index.tsx | 1 - yarn.lock | 17 ---------- 6 files changed, 54 insertions(+), 71 deletions(-) diff --git a/package.json b/package.json index 382dd9ce97..f410d6777b 100644 --- a/package.json +++ b/package.json @@ -55,8 +55,7 @@ "tern": "^0.24.3", "toposort": "^2.0.2", "use-bus": "^2.5.1", - "uuid": "^8.3.2", - "ws": "^8.7.0" + "uuid": "^8.3.2" }, "devDependencies": { "@changesets/changelog-github": "^0.4.2", diff --git a/src/api/ws/index.ts b/src/api/ws/index.ts index 393e3d1f23..07b8f5d5ea 100644 --- a/src/api/ws/index.ts +++ b/src/api/ws/index.ts @@ -1,4 +1,3 @@ -import WebSocket from "ws" import { Broadcast, Callback, @@ -29,27 +28,35 @@ export function getPayload( } function generateWs(wsUrl: string): WebSocket { - let ws = new WebSocket(wsUrl) - ws.on("close", () => { + const ws = new WebSocket(wsUrl) + ws.onclose = () => { Connection.roomMap.delete(wsUrl) - }) - ws.on( - "message", - (webSocket: WebSocket, data: WebSocket.RawData, isBinary: boolean) => { - let callback: Callback = JSON.parse(data.toString()) - if (callback.errorCode === 0) { + } + ws.onmessage = (event) => { + let callback: Callback = JSON.parse(event.data) + if (callback.errorCode === 0) { + if (callback.broadcast != null) { let broadcast = callback.broadcast let type = broadcast.type let payload = broadcast.payload try { store.dispatch({ type, - payload: JSON.parse(payload), + payload, }) } catch (ignore) {} } - }, - ) + } + } + ws.onopen = () => { + ws.send( + getPayload(Signal.SIGNAL_ENTER, Target.TARGET_NOTHING, false, null, [ + { + authToken: getLocalStorage("token"), + }, + ]), + ) + } return ws } @@ -61,23 +68,22 @@ export class Connection { roomId: string, loading: (loading: boolean) => void, errorState: (errorState: boolean) => void, - getRoom: (room: Room) => void, ) { let instanceId = import.meta.env.VITE_INSTANCE_ID let config: AxiosRequestConfig switch (type) { case "dashboard": config = { - baseURL: "http://10.242.213.21:8080/api/v1", + baseURL: "http://10.37.48.163:8080/api/v1", url: `/room/${instanceId}/dashboard`, - method: "get", + method: "GET", } break case "app": config = { - baseURL: "http://10.242.213.21:8080/api/v1", + baseURL: "http://10.37.48.163:8080/api/v1", url: `/room/${instanceId}/app/${roomId}`, - method: "get", + method: "GET", } break default: @@ -89,14 +95,6 @@ export class Connection { (response) => { let ws = generateWs(response.data.wsURL) this.roomMap.set(type + roomId, ws) - getRoom(response.data) - ws.send( - getPayload(Signal.SIGNAL_ENTER, Target.TARGET_NOTHING, false, null, [ - { - authToken: getLocalStorage("token"), - }, - ]), - ) }, (error) => {}, () => {}, diff --git a/src/middleware/redux/redux-async.ts b/src/middleware/redux/redux-async.ts index 7da2add662..73d9ec47d3 100644 --- a/src/middleware/redux/redux-async.ts +++ b/src/middleware/redux/redux-async.ts @@ -23,20 +23,23 @@ import { export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { const { type, payload } = action - const resp = next(action) const typeList = type.split("/") - if (typeList[typeList.length] === "remote") { - return - } const reduxType = typeList[0] const reduxAction = typeList[1] + if (typeList[typeList.length - 1] === "remote") { + return next({ + ...action, + type: `${reduxType}/${reduxAction}`, + }) + } + const resp = next(action) switch (reduxType) { case "components": switch (reduxAction) { case "addComponentReducer": Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_CREATE_STATE, @@ -54,7 +57,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { const singleComponentPayload: ComponentDropPayload = payload Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( singleComponentPayload.isMove @@ -76,7 +79,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { if (dragNode != null) { Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_UPDATE_STATE, @@ -95,7 +98,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { const copyPayload: ComponentCopyPayload = payload Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_CREATE_STATE, @@ -118,7 +121,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { if (finalNode != null) { Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_UPDATE_STATE, @@ -142,7 +145,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { if (resizeNode != null) { Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_UPDATE_STATE, @@ -161,7 +164,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { const deletePayload: DeleteComponentNodePayload = payload Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_DELETE_STATE, @@ -182,7 +185,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { case "setDependenciesReducer": Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_UPDATE_STATE, @@ -203,7 +206,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { case "addOrUpdateDragShadowReducer": Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_CREATE_OR_UPDATE, @@ -220,7 +223,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { case "removeDragShadowReducer": Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_DELETE_STATE, @@ -241,7 +244,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { case "addOrUpdateDottedLineSquareReducer": Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_CREATE_OR_UPDATE, @@ -258,7 +261,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { case "removeDottedLineSquareReducer": Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_DELETE_STATE, @@ -279,7 +282,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { case "addDisplayNameReducer": Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_CREATE_OR_UPDATE, @@ -296,7 +299,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { case "removeDisplayNameReducer": Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_DELETE_STATE, @@ -313,7 +316,7 @@ export const reduxAsync: Redux.Middleware = (store) => (next) => (action) => { case "removeDisplayNameMultiReducer": Connection.getRoom( "app", - store.getState().currentApp.appInfo.id ?? "", + store.getState().currentApp.appInfo.appId ?? "", )?.send( getPayload( Signal.SIGNAL_DELETE_STATE, diff --git a/src/page/App/index.tsx b/src/page/App/index.tsx index 8e0c6e9b0b..5c695a24b4 100644 --- a/src/page/App/index.tsx +++ b/src/page/App/index.tsx @@ -61,13 +61,14 @@ export const Editor: FC = () => { const currentUser = useSelector(getCurrentUser) useEffect(() => { - Connection.enterRoom( - "app", - appId ?? "", - (loading) => {}, - (errorState) => {}, - (room) => {}, - ) + if (currentUser != null && currentUser.userId != 0) { + Connection.enterRoom( + "app", + appId ?? "", + (loading) => {}, + (errorState) => {}, + ) + } return () => { Connection.leaveRoom("app", appId ?? "") } diff --git a/src/page/Dashboard/index.tsx b/src/page/Dashboard/index.tsx index aef102c360..9c93709b3c 100644 --- a/src/page/Dashboard/index.tsx +++ b/src/page/Dashboard/index.tsx @@ -97,7 +97,6 @@ export const IllaApp: FC = () => { "", (loading) => {}, (errorState) => {}, - (room) => {}, ) return () => { Connection.leaveRoom("dashboard", "") diff --git a/yarn.lock b/yarn.lock index 295384dfeb..1ac065e23a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1669,18 +1669,6 @@ resolved "https://registry.npmmirror.com/@fontsource/fira-code/-/fira-code-4.5.10.tgz#e1060a60d08cba1669e1ff2025350aaab7c0e6bc" integrity sha512-CF6cBJZcpuW+qxtr7JZt3kPwEHj0xWYgsRr7q3tGhkIqEmxdJ6Omvw61LEFQuRXeAwOnXBGZr42qTrO+vCzvAQ== -"@illa-design/system@0.0.11": - version "0.0.11" - resolved "https://registry.yarnpkg.com/@illa-design/system/-/system-0.0.11.tgz#38bdafe9c1418f95ecfd16cb469a0578a9d6b927" - integrity sha512-FPb/Pa+E8wJzXv2QRhJ03gm3UCSgCJySJqMcGW38Dv4qF44a5uGC6oKYRDgmGA07nVJhXqA+UDEpBJaKluJeag== - dependencies: - dayjs "^1.10.7" - number-precision "^1.5.2" - react-fast-compare "^3.2.0" - react-focus-lock "^2.8.1" - react-remove-scroll "^2.5.4" - react-use "^17.3.1" - "@istanbuljs/load-nyc-config@^1.0.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced" @@ -10164,11 +10152,6 @@ ws@^7.4.6: resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.7.tgz#9e0ac77ee50af70d58326ecff7e85eb3fa375e67" integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A== -ws@^8.7.0: - version "8.7.0" - resolved "https://registry.yarnpkg.com/ws/-/ws-8.7.0.tgz#eaf9d874b433aa00c0e0d8752532444875db3957" - integrity sha512-c2gsP0PRwcLFzUiA8Mkr37/MI7ilIlHQxaEAtd0uNMbVMoy8puJyafRlm0bV9MbGSabUPeLrRRaqIBcFcA2Pqg== - xml-name-validator@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a" From 368162b034d45c9bcf83872dafae684f872543a4 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 18 Jul 2022 00:37:05 +0800 Subject: [PATCH 008/148] feat: base guard router --- package.json | 13 +- src/App.tsx | 70 ++--------- src/api/base.ts | 45 +++++-- src/{authInit.tsx => auth/index.tsx} | 41 +++--- src/i18n/config.ts | 11 +- .../App/components/InspectPanel/header.tsx | 4 +- .../App/components/InspectPanel/interface.ts | 1 - src/page/User/Login/index.tsx | 7 +- src/redux/currentUser/currentUserReducer.ts | 4 +- src/redux/currentUser/currentUserSlice.ts | 12 +- src/redux/currentUser/currentUserState.ts | 2 +- src/router/index.tsx | 27 ++++ src/router/interface.ts | 12 ++ src/router/routerConfig.tsx | 118 ++++++++++++++++++ yarn.lock | 7 ++ 15 files changed, 251 insertions(+), 123 deletions(-) rename src/{authInit.tsx => auth/index.tsx} (55%) create mode 100644 src/router/index.tsx create mode 100644 src/router/interface.ts create mode 100644 src/router/routerConfig.tsx diff --git a/package.json b/package.json index 382dd9ce97..bd1ea858cd 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "codemirror": "^5.65.5", "framer-motion": "^6.3.0", "i18next": "^21.6.16", + "i18next-browser-languagedetector": "^6.1.4", "immer": "^9.0.14", "jshint": "^2.13.4", "lodash": "^4.17.21", @@ -86,11 +87,16 @@ "@uiw/react-color-saturation": "^1.0.10", "@uiw/react-color-swatch": "^1.0.10", "@vitejs/plugin-react": "^1.3.2", + "chart.js": "^3.7.1", + "chartjs-adapter-moment": "^1.0.0", + "chartjs-plugin-datalabels": "^2.0.0", "cypress": "^9.5.1", "husky": "^7.0.4", "jest": "^27.4.1", "jest-environment-jsdom": "^27.4.1", + "moment": "^2.29.3", "prettier": "^2.5.1", + "react-chartjs-2": "^4.1.0", "sinon": "^13.0.1", "ts-jest": "^27.1.5", "turbo": "^1.1.1", @@ -98,12 +104,7 @@ "vite": "^2.9.9", "vite-plugin-chunk-split": "^0.2.2", "vite-plugin-istanbul": "^2.7.3", - "vite-plugin-svgr": "^2.1.0", - "chart.js": "^3.7.1", - "chartjs-adapter-moment": "^1.0.0", - "chartjs-plugin-datalabels": "^2.0.0", - "react-chartjs-2": "^4.1.0", - "moment": "^2.29.3" + "vite-plugin-svgr": "^2.1.0" }, "workspaces": [ "src/*", diff --git a/src/App.tsx b/src/App.tsx index c757dfd64a..97e611f6eb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,32 +1,11 @@ import { css, Global } from "@emotion/react" -import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom" +import { BrowserRouter } from "react-router-dom" import { globalStyle } from "./style" -import { DashboardApps } from "@/page/Dashboard/DashboardApps" -import { DashboardResources } from "@/page/Dashboard/DashboardResources" -import { IllaApp } from "@/page/Dashboard" -import { Editor } from "@/page/App" -import { UserLogin } from "@/page/User" -import { Register } from "@/page/User/Register" -import { Login } from "@/page/User/Login" -import { ResetPassword } from "@/page/User/ResetPassword" -import { Setting } from "@/page/Setting" -import { Page404 } from "@/page/status/404" -import { Page403 } from "@/page/status/403" -import { Page500 } from "@/page/status/500" -import { SettingAccount } from "@/page/Setting/SettingAccount" -import { SettingPassword } from "@/page/Setting/SettingPassword" -import { SettingOthers } from "@/page/Setting/SettingOthers" import { ConfigProvider } from "@illa-design/config-provider" -import "@/i18n/config" import "@/api/base" -import { AxiosInterceptor } from "@/api/AxiosInterceptor" - -import { Deploy } from "@/page/Deploy" import { HTML5Backend } from "react-dnd-html5-backend" import { GlobalDataProvider } from "@/page/App/context/globalDataProvider" import { DndProvider } from "react-dnd" - -import AuthInit from "./authInit" import { useSelector } from "react-redux" import { getCurrentConfigLanguage, @@ -34,57 +13,26 @@ import { } from "@/redux/currentUser/currentUserSelector" import i18n from "./i18n/config" import { useEffect } from "react" +import { ILLARoute } from "@/router" function App() { const configLanguage = useSelector(getCurrentConfigLanguage) const currentUserLanguage = useSelector(getCurrentTranslateLanguage) useEffect(() => { - i18n.changeLanguage(currentUserLanguage).then() + if (!!currentUserLanguage) { + i18n.changeLanguage(currentUserLanguage).then() + } }, [currentUserLanguage]) return ( - - - - - - }> - } /> - } /> - } /> - - }> - } /> - } /> - } /> - } /> - - } /> - } - /> - }> - } /> - } /> - } /> - } /> - - } - /> - } /> - } /> - } /> - - - - + + + + diff --git a/src/api/base.ts b/src/api/base.ts index 5e20a8028e..8add0d24ad 100644 --- a/src/api/base.ts +++ b/src/api/base.ts @@ -1,5 +1,5 @@ import Axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios" -import { getLocalStorage } from "@/utils/storage" +import { clearLocalStorage, getLocalStorage } from "@/utils/storage" export interface Success { status: string // always ok @@ -18,16 +18,41 @@ const axios = Axios.create({ }, }) -axios.interceptors.request.use((config) => { - const token = getLocalStorage("token") - if (token) { - config.headers = { - ...(config.headers ?? {}), - Authorization: token, +axios.interceptors.request.use( + (config) => { + const token = getLocalStorage("token") + if (token) { + config.headers = { + ...(config.headers ?? {}), + Authorization: token, + } } - } - return config -}) + return config + }, + (err) => { + return Promise.reject(err) + }, +) + +axios.interceptors.response.use( + (response) => response, + (error) => { + const { response } = error as AxiosError + if (response) { + const { status } = response + if (status === 401) { + clearLocalStorage() + const { pathname } = location + location.href = "/user/login?from=" + pathname + } else if (status === 403) { + location.href = "/403" + } else if (status >= 500) { + location.href = "/500" + } + } + return Promise.reject(error) + }, +) export class Api { static request( diff --git a/src/authInit.tsx b/src/auth/index.tsx similarity index 55% rename from src/authInit.tsx rename to src/auth/index.tsx index c3f4085920..f13b14fd8d 100644 --- a/src/authInit.tsx +++ b/src/auth/index.tsx @@ -1,48 +1,51 @@ -import { ReactNode, useEffect, useState } from "react" -import { useSelector, useDispatch } from "react-redux" -import { useNavigate } from "react-router-dom" +import { useEffect, FC, ReactNode } from "react" import { getLocalStorage } from "@/utils/storage" +import { useNavigate } from "react-router-dom" +import { useDispatch, useSelector } from "react-redux" import { getCurrentUser } from "@/redux/currentUser/currentUserSelector" import { Api } from "@/api/base" import { CurrentUser } from "@/redux/currentUser/currentUserState" import { currentUserActions } from "@/redux/currentUser/currentUserSlice" -const AuthInit = ({ children }: { children: ReactNode }) => { - const dispatch = useDispatch() - const navigate = useNavigate() +interface CheckIsLoginWrapperProps { + children: ReactNode +} +export const CheckIsLogin: FC = (props) => { + const { children } = props + const navigate = useNavigate() const token = getLocalStorage("token") - const currentUserId = useSelector(getCurrentUser)?.userId - - const [showNextPage, setShowNextPage] = useState( - !!currentUserId && currentUserId > 0, - ) + const currentUserId = useSelector(getCurrentUser).userId + const dispatch = useDispatch() useEffect(() => { if (!token) { - navigate(`/user/login`) - setShowNextPage(true) + navigate("/user/login", { state: { from: location } }) return } - if (!currentUserId) { + if (currentUserId === 0 || currentUserId == undefined) { Api.request( { url: "/users", method: "GET", }, (response) => { + // TIPS: can check user role dispatch( currentUserActions.updateCurrentUserReducer({ ...response.data, nickname: response.data.nickname, }), ) - setShowNextPage(true) + }, + () => {}, + () => { + // TODO:need message + navigate("/user/login", { state: { from: location } }) }, ) } - }, []) - return <>{showNextPage ? children : null} -} + }, [token, currentUserId]) -export default AuthInit + return <>{children} +} diff --git a/src/i18n/config.ts b/src/i18n/config.ts index fc7d487426..d98651af46 100644 --- a/src/i18n/config.ts +++ b/src/i18n/config.ts @@ -2,24 +2,21 @@ import i18n from "i18next" import zhCN from "./locale/zh-CN.json" import enUS from "./locale/en-US.json" import { initReactI18next } from "react-i18next" +import LanguageDetector from "i18next-browser-languagedetector" export const resources = { en: { - translation: { - ...enUS, - }, + translation: enUS, }, zh: { - translation: { - ...zhCN, - }, + translation: zhCN, }, } as const i18n + .use(LanguageDetector) .use(initReactI18next) .init({ - lng: "en", fallbackLng: "en", debug: false, interpolation: { diff --git a/src/page/App/components/InspectPanel/header.tsx b/src/page/App/components/InspectPanel/header.tsx index 14fc0cbcdf..06d93c5b4b 100644 --- a/src/page/App/components/InspectPanel/header.tsx +++ b/src/page/App/components/InspectPanel/header.tsx @@ -7,8 +7,7 @@ import { panelHeaderIconWrapperStyle, panelHeaderWrapperStyle } from "./style" import { ActionMenu } from "./actionMenu" export const PanelHeader: FC = (props) => { - const { widgetDisplayName, widgetParentDisplayName, widgetType } = - useContext(SelectedPanelContext) + const { widgetDisplayName, widgetType } = useContext(SelectedPanelContext) return (
@@ -23,7 +22,6 @@ export const PanelHeader: FC = (props) => { trigger="click" dropList={ diff --git a/src/page/App/components/InspectPanel/interface.ts b/src/page/App/components/InspectPanel/interface.ts index a99af2ded5..602b800562 100644 --- a/src/page/App/components/InspectPanel/interface.ts +++ b/src/page/App/components/InspectPanel/interface.ts @@ -2,7 +2,6 @@ import { SetterType } from "@/page/App/components/PanelSetters" import { VALIDATION_TYPES } from "@/utils/validationFactory" export interface PanelHeaderActionProps { - widgetParentDisplayName: string widgetDisplayName: string componentType: string } diff --git a/src/page/User/Login/index.tsx b/src/page/User/Login/index.tsx index 93e8ff38c0..420c4952f8 100644 --- a/src/page/User/Login/index.tsx +++ b/src/page/User/Login/index.tsx @@ -24,8 +24,9 @@ import { forgotPwdContainerStyle, } from "@/page/User/style" import { TextLink } from "@/page/User/components/TextLink" -import { LocationState, LoginFields, LoginResult } from "./interface" +import { LocationState, LoginFields } from "./interface" import { setLocalStorage } from "@/utils/storage" +import { CurrentUser } from "@/redux/currentUser/currentUserState" export const Login: FC = () => { const [submitLoading, setSubmitLoading] = useState(false) @@ -42,7 +43,7 @@ export const Login: FC = () => { mode: "onSubmit", }) const onSubmit: SubmitHandler = (data) => { - Api.request( + Api.request( { method: "POST", url: "/auth/signin", data }, (res) => { const token = res.headers["illa-token"] @@ -52,7 +53,7 @@ export const Login: FC = () => { currentUserActions.updateCurrentUserReducer({ userId: res.data.userId, nickname: res.data.nickname, - language: res.data.language === "zh-CN" ? "简体中文" : "English", + language: res.data.language || "en-US", userAvatar: "", email: res.data.email, }), diff --git a/src/redux/currentUser/currentUserReducer.ts b/src/redux/currentUser/currentUserReducer.ts index 4e74db8ab1..993d4eeedf 100644 --- a/src/redux/currentUser/currentUserReducer.ts +++ b/src/redux/currentUser/currentUserReducer.ts @@ -2,8 +2,8 @@ import { CaseReducer, PayloadAction } from "@reduxjs/toolkit" import { CurrentUser } from "@/redux/currentUser/currentUserState" export const updateCurrentUserReducer: CaseReducer< - CurrentUser | null, - PayloadAction + CurrentUser, + PayloadAction > = (state, action) => { state = action.payload return state diff --git a/src/redux/currentUser/currentUserSlice.ts b/src/redux/currentUser/currentUserSlice.ts index bd1e8b1f10..3338202e04 100644 --- a/src/redux/currentUser/currentUserSlice.ts +++ b/src/redux/currentUser/currentUserSlice.ts @@ -1,16 +1,8 @@ import { createSlice } from "@reduxjs/toolkit" import { updateCurrentUserReducer } from "@/redux/currentUser/currentUserReducer" -import { - CurrentUser, - CurrentUserInitialState, -} from "@/redux/currentUser/currentUserState" -import { SliceCaseReducers } from "@reduxjs/toolkit/src/createSlice" +import { CurrentUserInitialState } from "@/redux/currentUser/currentUserState" -const currentUserSlice = createSlice< - CurrentUser | null, - SliceCaseReducers, - "currentUser" ->({ +const currentUserSlice = createSlice({ name: "currentUser", initialState: CurrentUserInitialState, reducers: { diff --git a/src/redux/currentUser/currentUserState.ts b/src/redux/currentUser/currentUserState.ts index a5081b06d5..a9b8cc9a04 100644 --- a/src/redux/currentUser/currentUserState.ts +++ b/src/redux/currentUser/currentUserState.ts @@ -10,6 +10,6 @@ export const CurrentUserInitialState: CurrentUser = { userId: 0, nickname: "", userAvatar: "", - language: "English", + language: "", email: "", } diff --git a/src/router/index.tsx b/src/router/index.tsx new file mode 100644 index 0000000000..dbeae020b7 --- /dev/null +++ b/src/router/index.tsx @@ -0,0 +1,27 @@ +import { useRoutes } from "react-router-dom" +import { routerConfig } from "@/router/routerConfig" +import { RoutesObjectPro } from "@/router/interface" +import { CheckIsLogin } from "@/auth" + +const wrappedRouter = (routesConfig: RoutesObjectPro[]) => { + return routesConfig.map((routeItem: RoutesObjectPro) => { + const { element, children, needLogin, ...otherRouteProps } = routeItem + const newRouteItem: RoutesObjectPro = { + ...otherRouteProps, + } + if (needLogin) { + newRouteItem.element = {element} + } else { + newRouteItem.element = element + } + if (Array.isArray(children) && children.length) { + newRouteItem.children = wrappedRouter(children) + } + + return newRouteItem + }) +} + +export const ILLARoute = () => { + return useRoutes(wrappedRouter(routerConfig)) +} diff --git a/src/router/interface.ts b/src/router/interface.ts new file mode 100644 index 0000000000..a92052f456 --- /dev/null +++ b/src/router/interface.ts @@ -0,0 +1,12 @@ +import { RouteObject } from "react-router-dom" + +export interface RoutesObjectPro extends RouteObject { + /** + * @description need login, if use check role,can replace this + */ + needLogin?: boolean + /** + * @description child route + */ + children?: RoutesObjectPro[] +} diff --git a/src/router/routerConfig.tsx b/src/router/routerConfig.tsx new file mode 100644 index 0000000000..664b676296 --- /dev/null +++ b/src/router/routerConfig.tsx @@ -0,0 +1,118 @@ +import { Navigate } from "react-router-dom" +import { IllaApp } from "@/page/Dashboard" +import { DashboardApps } from "@/page/Dashboard/DashboardApps" +import { DashboardResources } from "@/page/Dashboard/DashboardResources" +import { UserLogin } from "@/page/User" +import { Login } from "@/page/User/Login" +import { Register } from "@/page/User/Register" +import { ResetPassword } from "@/page/User/ResetPassword" +import { Editor } from "@/page/App" +import { Setting } from "@/page/Setting" +import { SettingAccount } from "@/page/Setting/SettingAccount" +import { SettingPassword } from "@/page/Setting/SettingPassword" +import { SettingOthers } from "@/page/Setting/SettingOthers" +import { Deploy } from "@/page/Deploy" +import { Page403 } from "@/page/status/403" +import { Page500 } from "@/page/status/500" +import { Page404 } from "@/page/status/404" +import { RoutesObjectPro } from "@/router/interface" + +export const routerConfig: RoutesObjectPro[] = [ + { + index: true, + element: , + }, + { + path: "/dashboard", + element: , + needLogin: true, + children: [ + { + index: true, + element: , + needLogin: true, + }, + { + path: "/dashboard/apps", + element: , + needLogin: true, + }, + { + path: "/dashboard/resources", + element: , + needLogin: true, + }, + ], + }, + { + path: "/user", + element: , + children: [ + { + index: true, + element: , + }, + { + path: "/user/login", + element: , + }, + { + path: "/user/register", + element: , + }, + { + path: "/user/forgotPassword", + element: , + }, + ], + }, + { + path: "/app/:appId/version/:versionId", + element: , + needLogin: true, + }, + { + path: "/setting", + element: , + needLogin: true, + children: [ + { + index: true, + element: , + needLogin: true, + }, + { + path: "/setting/account", + element: , + needLogin: true, + }, + { + path: "/setting/password", + element: , + needLogin: true, + }, + { + path: "/setting/others", + element: , + needLogin: true, + }, + ], + }, + { + path: "/deploy/app/:appId/version/:versionId", + element: , + needLogin: true, + }, + { + path: "/403", + element: , + }, + { + path: "/500", + element: , + }, + { + path: "/*", + element: , + }, +] diff --git a/yarn.lock b/yarn.lock index ee43106a46..e8b7ce1612 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5696,6 +5696,13 @@ hyphenate-style-name@^1.0.2: resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== +i18next-browser-languagedetector@^6.1.4: + version "6.1.4" + resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.4.tgz#7b087c5edb6f6acd38ef54ede2160ab9cde0108f" + integrity sha512-wukWnFeU7rKIWT66VU5i8I+3Zc4wReGcuDK2+kuFhtoxBRGWGdvYI9UQmqNL/yQH1KogWwh+xGEaIPH8V/i2Zg== + dependencies: + "@babel/runtime" "^7.14.6" + i18next@^21.6.16: version "21.8.4" resolved "https://registry.yarnpkg.com/i18next/-/i18next-21.8.4.tgz#646e23065752036b38d9fda8898c18139b9e8ebe" From 5edd13eace0ae777736cf86b110cb233ae464c14 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 18 Jul 2022 00:37:23 +0800 Subject: [PATCH 009/148] fix: remove AxiosInterceptor --- src/api/AxiosInterceptor.tsx | 35 ----------------------------------- 1 file changed, 35 deletions(-) delete mode 100644 src/api/AxiosInterceptor.tsx diff --git a/src/api/AxiosInterceptor.tsx b/src/api/AxiosInterceptor.tsx deleted file mode 100644 index 1d8795bd0d..0000000000 --- a/src/api/AxiosInterceptor.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { FC, useLayoutEffect } from "react" -import { AxiosResponse } from "axios" -import { useNavigate, useLocation } from "react-router-dom" -import { Api } from "./base" - -export const AxiosInterceptor: FC<{ children: JSX.Element }> = ({ - children, -}) => { - const location = useLocation() - const navigate = useNavigate() - useLayoutEffect(() => { - const resInterceptor = (response: AxiosResponse) => { - return response - } - - const errInterceptor = (error: any) => { - if (error.response.status === 401) { - navigate("/user/login", { replace: true, state: { from: location } }) - } - - return Promise.reject(error) - } - - const interceptor = Api.addResponseInterceptor( - resInterceptor, - errInterceptor, - ) - - return () => Api.removeResponseInterceptor(interceptor) - }, [location, navigate]) - - return children -} - -AxiosInterceptor.displayName = "AxiosInterceptor" From 1fcd44058784b6f3fbe8c8aec7a91cb23b516ed6 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 18 Jul 2022 01:02:44 +0800 Subject: [PATCH 010/148] feat: add request pool --- package.json | 2 ++ src/api/base.ts | 40 +++++++++++++++------------ src/api/helpers/axiosPendingPool.tsx | 41 ++++++++++++++++++++++++++++ src/auth/index.tsx | 4 ++- yarn.lock | 12 ++++++++ 5 files changed, 80 insertions(+), 19 deletions(-) create mode 100644 src/api/helpers/axiosPendingPool.tsx diff --git a/package.json b/package.json index bd1ea858cd..8749aa29fb 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "immer": "^9.0.14", "jshint": "^2.13.4", "lodash": "^4.17.21", + "qs": "^6.11.0", "react": "^17.0.2", "react-custom-scrollbars": "^4.2.1", "react-dnd": "^16.0.1", @@ -74,6 +75,7 @@ "@testing-library/user-event": "^13.5.0", "@types/codemirror": "^5.60.5", "@types/jest": "^27.4.1", + "@types/qs": "^6.9.7", "@types/react": "^17.0.2", "@types/react-custom-scrollbars": "^4.0.10", "@types/react-dom": "^17.0.2", diff --git a/src/api/base.ts b/src/api/base.ts index 8add0d24ad..2d741a1de9 100644 --- a/src/api/base.ts +++ b/src/api/base.ts @@ -1,5 +1,10 @@ import Axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios" import { clearLocalStorage, getLocalStorage } from "@/utils/storage" +import { + addRequestPendingPool, + removeRequestPendingPool, +} from "@/api/helpers/axiosPendingPool" +import { Message } from "@illa-design/message" export interface Success { status: string // always ok @@ -9,9 +14,10 @@ export interface ApiError { errorCode: string errorMessage: string } - +// TODO: @aruseito use OOP to create request const axios = Axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, + timeout: 10000, headers: { "Content-Encoding": "gzip", "Content-Type": "application/json", @@ -20,6 +26,7 @@ const axios = Axios.create({ axios.interceptors.request.use( (config) => { + addRequestPendingPool(config) const token = getLocalStorage("token") if (token) { config.headers = { @@ -35,15 +42,25 @@ axios.interceptors.request.use( ) axios.interceptors.response.use( - (response) => response, - (error) => { - const { response } = error as AxiosError + (response) => { + const { config } = response + removeRequestPendingPool(config) + return response + }, + (error: AxiosError) => { + if (!window.navigator.onLine) { + // TODO: @aruseito handle offline,need message + Message.warning("xxxxxxxx") + return + } + const { response } = error if (response) { const { status } = response + // TODO: @aruseito maybe need custom error status,because of we'll have plugin to request other's api if (status === 401) { clearLocalStorage() const { pathname } = location - location.href = "/user/login?from=" + pathname + location.href = "/user/login?from=" + pathname || "/" } else if (status === 403) { location.href = "/403" } else if (status >= 500) { @@ -83,17 +100,4 @@ export class Api { } }) } - - static addResponseInterceptor( - resInterceptor?: ( - value: AxiosResponse, - ) => RespData | Promise, - errInterceptor?: (error: any) => any, - ) { - return axios.interceptors.response.use(resInterceptor, errInterceptor) - } - - static removeResponseInterceptor(interceptor: number) { - axios.interceptors.response.eject(interceptor) - } } diff --git a/src/api/helpers/axiosPendingPool.tsx b/src/api/helpers/axiosPendingPool.tsx new file mode 100644 index 0000000000..31f9f8c2c5 --- /dev/null +++ b/src/api/helpers/axiosPendingPool.tsx @@ -0,0 +1,41 @@ +import axios, { AxiosRequestConfig, Canceler } from "axios" +import qs from "qs" +import { isFunction } from "@/utils/typeHelper" + +let pendingPollMap = new Map() + +export const generateUniqueKey = (config: AxiosRequestConfig) => + [ + config.method, + config.url, + qs.stringify(config.params), + qs.stringify(config.data), + ].join("/") + +export const clearRequestPendingPool = () => { + pendingPollMap.forEach((cancel) => { + cancel && isFunction(cancel) && cancel() + }) + pendingPollMap.clear() +} + +export const removeRequestPendingPool = (config: AxiosRequestConfig) => { + const key = generateUniqueKey(config) + if (pendingPollMap.has(key)) { + const cancel = pendingPollMap.get(key) + cancel && cancel() + pendingPollMap.delete(key) + } +} + +export const addRequestPendingPool = (config: AxiosRequestConfig) => { + removeRequestPendingPool(config) + const key = generateUniqueKey(config) + config.cancelToken = + config.cancelToken || + new axios.CancelToken((cancel) => { + if (!pendingPollMap.has(key)) { + pendingPollMap.set(key, cancel) + } + }) +} diff --git a/src/auth/index.tsx b/src/auth/index.tsx index f13b14fd8d..3ad465e050 100644 --- a/src/auth/index.tsx +++ b/src/auth/index.tsx @@ -6,6 +6,7 @@ import { getCurrentUser } from "@/redux/currentUser/currentUserSelector" import { Api } from "@/api/base" import { CurrentUser } from "@/redux/currentUser/currentUserState" import { currentUserActions } from "@/redux/currentUser/currentUserSlice" +import { clearRequestPendingPool } from "@/api/helpers/axiosPendingPool" interface CheckIsLoginWrapperProps { children: ReactNode @@ -20,6 +21,7 @@ export const CheckIsLogin: FC = (props) => { useEffect(() => { if (!token) { + clearRequestPendingPool() navigate("/user/login", { state: { from: location } }) return } @@ -40,7 +42,7 @@ export const CheckIsLogin: FC = (props) => { }, () => {}, () => { - // TODO:need message + clearRequestPendingPool() navigate("/user/login", { state: { from: location } }) }, ) diff --git a/yarn.lock b/yarn.lock index e8b7ce1612..03452ba152 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2370,6 +2370,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== +"@types/qs@^6.9.7": + version "6.9.7" + resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" + integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== + "@types/react-custom-scrollbars@^4.0.10": version "4.0.10" resolved "https://registry.yarnpkg.com/@types/react-custom-scrollbars/-/react-custom-scrollbars-4.0.10.tgz#f31289df0da95cdb0dfa2a6bdccda7bc909690e6" @@ -7942,6 +7947,13 @@ q@^1.5.1: resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= +qs@^6.11.0: + version "6.11.0" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a" + integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q== + dependencies: + side-channel "^1.0.4" + qs@~6.5.2: version "6.5.3" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad" From 0280e0ed79b7dd97f3c40160ba84c607f35b7011 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 18 Jul 2022 01:11:57 +0800 Subject: [PATCH 011/148] fix: types error --- src/api/helpers/axiosPendingPool.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/helpers/axiosPendingPool.tsx b/src/api/helpers/axiosPendingPool.tsx index 31f9f8c2c5..51ff92c42e 100644 --- a/src/api/helpers/axiosPendingPool.tsx +++ b/src/api/helpers/axiosPendingPool.tsx @@ -14,7 +14,7 @@ export const generateUniqueKey = (config: AxiosRequestConfig) => export const clearRequestPendingPool = () => { pendingPollMap.forEach((cancel) => { - cancel && isFunction(cancel) && cancel() + cancel?.() }) pendingPollMap.clear() } @@ -23,7 +23,7 @@ export const removeRequestPendingPool = (config: AxiosRequestConfig) => { const key = generateUniqueKey(config) if (pendingPollMap.has(key)) { const cancel = pendingPollMap.get(key) - cancel && cancel() + cancel?.() pendingPollMap.delete(key) } } From 0e323b18db49a9c3611bd23c01423926d1589cbe Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 18 Jul 2022 01:23:43 +0800 Subject: [PATCH 012/148] chore: add TODO --- src/router/routerConfig.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/router/routerConfig.tsx b/src/router/routerConfig.tsx index 664b676296..b9bb5822ba 100644 --- a/src/router/routerConfig.tsx +++ b/src/router/routerConfig.tsx @@ -17,6 +17,7 @@ import { Page500 } from "@/page/status/500" import { Page404 } from "@/page/status/404" import { RoutesObjectPro } from "@/router/interface" +// TODO: may be need lazy load, use Suspense Component And Lazy function ,see: https://reacttraining.com/react-router/web/guides/code-splitting export const routerConfig: RoutesObjectPro[] = [ { index: true, From 8167458bde978ed47175181519da769d16ca6131 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 18 Jul 2022 10:26:42 +0800 Subject: [PATCH 013/148] fix: remove onLine message --- src/api/base.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/api/base.ts b/src/api/base.ts index 2d741a1de9..22ddfea140 100644 --- a/src/api/base.ts +++ b/src/api/base.ts @@ -48,11 +48,6 @@ axios.interceptors.response.use( return response }, (error: AxiosError) => { - if (!window.navigator.onLine) { - // TODO: @aruseito handle offline,need message - Message.warning("xxxxxxxx") - return - } const { response } = error if (response) { const { status } = response From c4ce985360448a5f79c13bdb2d1a03373486b750 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 18 Jul 2022 13:48:29 +0800 Subject: [PATCH 014/148] fix: use abortController --- src/api/AxiosInterceptor.tsx | 0 src/api/base.ts | 1 - src/api/helpers/axiosPendingPool.tsx | 17 +++++++---------- 3 files changed, 7 insertions(+), 11 deletions(-) delete mode 100644 src/api/AxiosInterceptor.tsx diff --git a/src/api/AxiosInterceptor.tsx b/src/api/AxiosInterceptor.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/api/base.ts b/src/api/base.ts index 22ddfea140..b65cc73fcd 100644 --- a/src/api/base.ts +++ b/src/api/base.ts @@ -4,7 +4,6 @@ import { addRequestPendingPool, removeRequestPendingPool, } from "@/api/helpers/axiosPendingPool" -import { Message } from "@illa-design/message" export interface Success { status: string // always ok diff --git a/src/api/helpers/axiosPendingPool.tsx b/src/api/helpers/axiosPendingPool.tsx index 51ff92c42e..3474a3c419 100644 --- a/src/api/helpers/axiosPendingPool.tsx +++ b/src/api/helpers/axiosPendingPool.tsx @@ -1,8 +1,7 @@ -import axios, { AxiosRequestConfig, Canceler } from "axios" +import { AxiosRequestConfig } from "axios" import qs from "qs" -import { isFunction } from "@/utils/typeHelper" -let pendingPollMap = new Map() +let pendingPollMap = new Map void>() export const generateUniqueKey = (config: AxiosRequestConfig) => [ @@ -31,11 +30,9 @@ export const removeRequestPendingPool = (config: AxiosRequestConfig) => { export const addRequestPendingPool = (config: AxiosRequestConfig) => { removeRequestPendingPool(config) const key = generateUniqueKey(config) - config.cancelToken = - config.cancelToken || - new axios.CancelToken((cancel) => { - if (!pendingPollMap.has(key)) { - pendingPollMap.set(key, cancel) - } - }) + const controller = new AbortController() + config.signal = controller.signal + if (!pendingPollMap.has(key)) { + pendingPollMap.set(key, controller.abort.bind(controller)) + } } From 68bbe8d942acad1865a1a7b7ee1575ac5d0e1438 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Mon, 18 Jul 2022 14:45:08 +0800 Subject: [PATCH 015/148] feat: update type trans --- .../App/components/PanelSetters/InputSetter/baseInput.tsx | 4 ++-- src/utils/validationFactory/index.ts | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/page/App/components/PanelSetters/InputSetter/baseInput.tsx b/src/page/App/components/PanelSetters/InputSetter/baseInput.tsx index 3fb44b1981..704f359f6c 100644 --- a/src/page/App/components/PanelSetters/InputSetter/baseInput.tsx +++ b/src/page/App/components/PanelSetters/InputSetter/baseInput.tsx @@ -2,6 +2,7 @@ import { FC, useMemo } from "react" import { BaseInputSetterProps } from "./interface" import { applyInputSetterWrapperStyle } from "./style" import { CodeEditor } from "@/components/CodeEditor" +import { VALIDATION_TYPES_TRANS } from "@/utils/validationFactory" function getPath(attrName?: string, widgetDisplayName?: string) { if (attrName && widgetDisplayName) { @@ -40,8 +41,7 @@ export const BaseInput: FC = (props) => { handleUpdateDsl(attrName, value) }} mode={"TEXT_JS"} - // @ts-ignore todo: weichen - expectedType={expectedType} + expectedType={VALIDATION_TYPES_TRANS[expectedType]} path={getPath(attrName, widgetDisplayName)} />
diff --git a/src/utils/validationFactory/index.ts b/src/utils/validationFactory/index.ts index 42c5b60648..0fc620c555 100644 --- a/src/utils/validationFactory/index.ts +++ b/src/utils/validationFactory/index.ts @@ -8,6 +8,14 @@ export enum VALIDATION_TYPES { OBJECT = "OBJECT", } +export enum VALIDATION_TYPES_TRANS { + STRING = "String", + NUMBER = "Number", + BOOLEAN = "Boolean", + ARRAY = "Array", + OBJECT = "Object", +} + export interface ValidationResponse { isValid: boolean safeValue: any From dc911df7479603930a7445b088771d8a2e12e6a5 Mon Sep 17 00:00:00 2001 From: Spike Date: Mon, 18 Jul 2022 14:45:06 +0800 Subject: [PATCH 016/148] feat: update widget tooltip --- src/page/App/components/InspectPanel/setter.tsx | 9 ++++++++- .../PanelSetters/EventHandlerSetter/List/interface.ts | 4 ++-- src/widgetLibrary/ButtonWidget/panelConfig.tsx | 2 +- src/widgetLibrary/DateWidget/panelConfig.tsx | 2 +- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/page/App/components/InspectPanel/setter.tsx b/src/page/App/components/InspectPanel/setter.tsx index 8ef860e6a9..e9b3b52d49 100644 --- a/src/page/App/components/InspectPanel/setter.tsx +++ b/src/page/App/components/InspectPanel/setter.tsx @@ -60,7 +60,14 @@ export const Setter: FC = (props) => { isInList={isInList} /> ) : null - }, [useCustomLayout, labelName, labelDesc, isInList, labelNameOption, labelDescOption]) + }, [ + useCustomLayout, + labelName, + labelDesc, + isInList, + labelNameOption, + labelDescOption, + ]) const _finalAttrName = useMemo(() => { if (parentAttrName) { diff --git a/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts b/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts index 698dc9dd6f..d35c6704ab 100644 --- a/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts +++ b/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts @@ -2,8 +2,8 @@ import { PanelLabelProps } from "@/page/App/components/InspectPanel/interface" export interface EventHandlerSetterHeaderProps extends Pick< - PanelLabelProps, - "labelName" | "labelDesc" | "labelNameOption" | "labelDescOption" + PanelLabelProps, + "labelName" | "labelDesc" | "labelNameOption" | "labelDescOption" > { handleAddItemAsync: () => void } diff --git a/src/widgetLibrary/ButtonWidget/panelConfig.tsx b/src/widgetLibrary/ButtonWidget/panelConfig.tsx index c63afde2a7..c208764cae 100644 --- a/src/widgetLibrary/ButtonWidget/panelConfig.tsx +++ b/src/widgetLibrary/ButtonWidget/panelConfig.tsx @@ -239,7 +239,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: "button-interaction-formId", labelName: "editor.inspect.setter_label.submit_form", - labelDesc: "xxxxx", + // labelDesc: "xxxxx", attrName: "formId", setterType: "INPUT_SETTER", bindAttrName: "submit", diff --git a/src/widgetLibrary/DateWidget/panelConfig.tsx b/src/widgetLibrary/DateWidget/panelConfig.tsx index f4cb31ee96..634726f2f2 100644 --- a/src/widgetLibrary/DateWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateWidget/panelConfig.tsx @@ -148,7 +148,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-interaction-loading", labelName: "editor.inspect.setter_label.loading", - labelDesc: "xxxxx", + labelDesc: "editor.inspect.setter_tooltip.loading", attrName: "loading", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, From 9277461838f3efc33abf004c2063e7642c23c92a Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Mon, 18 Jul 2022 15:11:01 +0800 Subject: [PATCH 017/148] feat: update error --- src/components/CodeEditor/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CodeEditor/index.tsx b/src/components/CodeEditor/index.tsx index dd431c12de..16f052a710 100644 --- a/src/components/CodeEditor/index.tsx +++ b/src/components/CodeEditor/index.tsx @@ -121,7 +121,7 @@ export const CodeEditor: FC = (props) => { }) } if (lintError?.errorLine && editor) { - lineMarker(editor, lintError.errorLine) + lineMarker(editor, lintError.errorLine - 1) } } else { setError(false) From 8b819c96f67c3f820125f4e30946d9108fbf65ea Mon Sep 17 00:00:00 2001 From: Spike Date: Mon, 18 Jul 2022 15:12:16 +0800 Subject: [PATCH 018/148] feat: add `transComponents` props to translate link --- src/page/App/components/InspectPanel/interface.ts | 1 + src/page/App/components/InspectPanel/label.tsx | 15 ++++++++++++--- src/page/App/components/InspectPanel/setter.tsx | 3 +++ .../EventHandlerSetter/List/header.tsx | 2 ++ .../EventHandlerSetter/List/interface.ts | 6 +++++- .../components/PanelSetters/ListSetter/index.tsx | 2 ++ .../PanelSetters/SelectSetter/dynamicSelect.tsx | 2 ++ .../PanelSetters/SwitchSetter/dynamicSwitch.tsx | 2 ++ 8 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/page/App/components/InspectPanel/interface.ts b/src/page/App/components/InspectPanel/interface.ts index 591664108f..0ba83b7f39 100644 --- a/src/page/App/components/InspectPanel/interface.ts +++ b/src/page/App/components/InspectPanel/interface.ts @@ -12,6 +12,7 @@ export interface PanelLabelProps { labelNameOption?: Record labelDesc?: string labelDescOption?: Record + transComponents?: Record isInList?: boolean } diff --git a/src/page/App/components/InspectPanel/label.tsx b/src/page/App/components/InspectPanel/label.tsx index 1f69378810..f454f89d8f 100644 --- a/src/page/App/components/InspectPanel/label.tsx +++ b/src/page/App/components/InspectPanel/label.tsx @@ -5,7 +5,14 @@ import { applyLabelTipsStyle, labelTipsTextStyle } from "./style" import { PanelLabelProps } from "./interface" export const PanelLabel: FC = (props) => { - const { labelDesc, labelName, isInList, labelDescOption, labelNameOption } = props + const { + labelDesc, + labelName, + isInList, + labelDescOption, + labelNameOption, + transComponents, + } = props const { t } = useTranslation() @@ -13,7 +20,7 @@ export const PanelLabel: FC = (props) => { - + {t(labelDesc, labelDescOption)} @@ -23,7 +30,9 @@ export const PanelLabel: FC = (props) => { maxWidth="240px" disabled={!labelDesc} > - {t(labelName, labelNameOption)} + + {t(labelName, labelNameOption)} + ) } diff --git a/src/page/App/components/InspectPanel/setter.tsx b/src/page/App/components/InspectPanel/setter.tsx index e9b3b52d49..e8682380d9 100644 --- a/src/page/App/components/InspectPanel/setter.tsx +++ b/src/page/App/components/InspectPanel/setter.tsx @@ -17,6 +17,7 @@ export const Setter: FC = (props) => { labelNameOption, labelDesc, labelDescOption, + transComponents, useCustomLayout = false, shown, bindAttrName, @@ -57,6 +58,7 @@ export const Setter: FC = (props) => { labelDesc={labelDesc} labelNameOption={labelNameOption} labelDescOption={labelDescOption} + transComponents={transComponents} isInList={isInList} /> ) : null @@ -67,6 +69,7 @@ export const Setter: FC = (props) => { isInList, labelNameOption, labelDescOption, + transComponents, ]) const _finalAttrName = useMemo(() => { diff --git a/src/page/App/components/PanelSetters/EventHandlerSetter/List/header.tsx b/src/page/App/components/PanelSetters/EventHandlerSetter/List/header.tsx index c7475d012a..bc7b39c961 100644 --- a/src/page/App/components/PanelSetters/EventHandlerSetter/List/header.tsx +++ b/src/page/App/components/PanelSetters/EventHandlerSetter/List/header.tsx @@ -16,6 +16,7 @@ export const EventHandlerSetterHeader: FC = ( labelDesc, labelDescOption, labelNameOption, + transComponents, handleAddItemAsync, } = props @@ -30,6 +31,7 @@ export const EventHandlerSetterHeader: FC = ( labelDesc={labelDesc} labelNameOption={labelNameOption} labelDescOption={labelDescOption} + transComponents={transComponents} />
diff --git a/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts b/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts index d35c6704ab..b0359bd361 100644 --- a/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts +++ b/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts @@ -3,7 +3,11 @@ import { PanelLabelProps } from "@/page/App/components/InspectPanel/interface" export interface EventHandlerSetterHeaderProps extends Pick< PanelLabelProps, - "labelName" | "labelDesc" | "labelNameOption" | "labelDescOption" + | "labelName" + | "labelDesc" + | "labelNameOption" + | "labelDescOption" + | "transComponents" > { handleAddItemAsync: () => void } diff --git a/src/page/App/components/PanelSetters/ListSetter/index.tsx b/src/page/App/components/PanelSetters/ListSetter/index.tsx index 1b313b5e62..b7fbead77c 100644 --- a/src/page/App/components/PanelSetters/ListSetter/index.tsx +++ b/src/page/App/components/PanelSetters/ListSetter/index.tsx @@ -19,6 +19,7 @@ export const ListSetter: FC = (props) => { labelNameOption, labelDesc, labelDescOption, + transComponents, childrenSetter, attrName, handleUpdateDsl, @@ -65,6 +66,7 @@ export const ListSetter: FC = (props) => { labelDesc={labelDesc} labelDescOption={labelDescOption} labelNameOption={labelNameOption} + transComponents={transComponents} /> {canReset && (
diff --git a/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx b/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx index 2fa14a5a8d..5a2dc16001 100644 --- a/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx +++ b/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx @@ -44,6 +44,7 @@ export const DynamicSelectSetter: FC = (props) => { labelNameOption, labelDesc, labelDescOption, + transComponents, isSetterSingleRow, widgetDisplayName, expectedType, @@ -76,6 +77,7 @@ export const DynamicSelectSetter: FC = (props) => { labelDesc={labelDesc} labelNameOption={labelNameOption} labelDescOption={labelDescOption} + transComponents={transComponents} /> = (props) => { labelNameOption, labelDesc, labelDescOption, + transComponents, panelConfig, handleUpdateDsl, value, @@ -41,6 +42,7 @@ export const DynamicSwitchSetter: FC = (props) => { labelDesc={labelDesc} labelNameOption={labelNameOption} labelDescOption={labelDescOption} + transComponents={transComponents} />
Date: Mon, 18 Jul 2022 15:17:01 +0800 Subject: [PATCH 019/148] feat: translate link --- src/i18n/locale/en-US.json | 2 +- src/i18n/locale/zh-CN.json | 2 +- src/widgetLibrary/DateRangeWidget/panelConfig.tsx | 3 +++ src/widgetLibrary/DateTimeWidget/panelConfig.tsx | 3 +++ src/widgetLibrary/DateWidget/panelConfig.tsx | 3 +++ 5 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/i18n/locale/en-US.json b/src/i18n/locale/en-US.json index 99545549cb..7f69931db0 100644 --- a/src/i18n/locale/en-US.json +++ b/src/i18n/locale/en-US.json @@ -559,7 +559,7 @@ "switch_default_value": "Set the initial status of the switch. You can dynamically change the default value by JavaScript.", "component_default_value": "The initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.", "map_data_option": "Use either an array of values or an object of keys mapped to arrays. Each item in your data source is mapped to each option", - "date_format": "A valid date format string. See dayJS (https://day.js.org/docs/en/parse/string-format)", + "date_format": "A valid date format string. See dayJS", "loading": "Whether the component should show a loading indicator.", "progress_percentage": "The percentage value is between 0 and 100", "timeline_direction": "Change the direction of the timeline." diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index a36deaab0c..244922d960 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -559,7 +559,7 @@ "switch_default_value": "设置开关的初始状态。您可以通过 JavaScript 动态改变开关的初始状态。", "component_default_value": "组件的默认值。您可以使用模版语法在框中输入 JavaScript 语句动态改变默认值。", "map_data_option": "使用数值或由键值组成的对象映射成选项。数据源中的每个项都映射到每个选项", - "date_format": "一个符合规范的时间格式，请参考 dayJS（https://day.js.org/docs/en/parse/string-format）", + "date_format": "一个符合规范的时间格式，请参考 dayJS", "loading": "控制组件是否为加载状态。", "progress_percentage": "进度条的数值范围为 0-100", "timeline_direction": "切换时间轴的方向" diff --git a/src/widgetLibrary/DateRangeWidget/panelConfig.tsx b/src/widgetLibrary/DateRangeWidget/panelConfig.tsx index 6e8b9deacf..951c698963 100644 --- a/src/widgetLibrary/DateRangeWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateRangeWidget/panelConfig.tsx @@ -25,6 +25,9 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ id: "date-basic-Format", labelName: "editor.inspect.setter_label.format", labelDesc: "editor.inspect.setter_tooltip.date_format", + transComponents: { + DayJS: , + }, attrName: "dateFormat", setterType: "INPUT_SETTER", }, diff --git a/src/widgetLibrary/DateTimeWidget/panelConfig.tsx b/src/widgetLibrary/DateTimeWidget/panelConfig.tsx index 8ddf35ee9f..181338f611 100644 --- a/src/widgetLibrary/DateTimeWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateTimeWidget/panelConfig.tsx @@ -21,6 +21,9 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ id: "date_time-basic-date-format", labelName: "editor.inspect.setter_label.format", labelDesc: "editor.inspect.setter_tooltip.date_format", + transComponents: { + DayJS: , + }, attrName: "dateFormat", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, diff --git a/src/widgetLibrary/DateWidget/panelConfig.tsx b/src/widgetLibrary/DateWidget/panelConfig.tsx index 634726f2f2..6ffa57eadf 100644 --- a/src/widgetLibrary/DateWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateWidget/panelConfig.tsx @@ -21,6 +21,9 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ id: "date-basic-Format", labelName: "editor.inspect.setter_label.format", labelDesc: "editor.inspect.setter_tooltip.date_format", + transComponents: { + DayJS: , + }, attrName: "dateFormat", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, From b4270df3bdcd8fb2d9877e772a0cd0babae2712a Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Mon, 18 Jul 2022 16:57:09 +0800 Subject: [PATCH 020/148] style: update tooltip --- .../CodeEditor/TernSever/HintTooltip/index.tsx | 10 +++++++--- .../CodeEditor/TernSever/HintTooltip/styles.ts | 3 +++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/CodeEditor/TernSever/HintTooltip/index.tsx b/src/components/CodeEditor/TernSever/HintTooltip/index.tsx index 5ddb2890cc..faa65f91d9 100644 --- a/src/components/CodeEditor/TernSever/HintTooltip/index.tsx +++ b/src/components/CodeEditor/TernSever/HintTooltip/index.tsx @@ -37,9 +37,13 @@ const formatObjOrArr = (type: string, data: any) => { } return ( + {type === "Array" ? `[${format}]` : `Object {${format}}`} +
+ } + withoutPadding + colorScheme={"white"} position="right" openDelay={10} closeDelay={10} diff --git a/src/components/CodeEditor/TernSever/HintTooltip/styles.ts b/src/components/CodeEditor/TernSever/HintTooltip/styles.ts index 1ba1366381..7869e66132 100644 --- a/src/components/CodeEditor/TernSever/HintTooltip/styles.ts +++ b/src/components/CodeEditor/TernSever/HintTooltip/styles.ts @@ -35,6 +35,9 @@ export const evaluationContentStyle = css` export const evaluationTriggerStyle = css` white-space: pre; + padding: 12px 16px; + background: #DCCFF9; + border-radius: 4px; ` export const docIconStyle = css` From 6ad463aa620920258eb65f0c4946179a1f33a969 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Mon, 18 Jul 2022 18:36:26 +0800 Subject: [PATCH 021/148] feat: update --- .../TernSever/HintTooltip/index.tsx | 36 +++++++++++-------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/src/components/CodeEditor/TernSever/HintTooltip/index.tsx b/src/components/CodeEditor/TernSever/HintTooltip/index.tsx index faa65f91d9..3c390ae004 100644 --- a/src/components/CodeEditor/TernSever/HintTooltip/index.tsx +++ b/src/components/CodeEditor/TernSever/HintTooltip/index.tsx @@ -19,7 +19,7 @@ import { import { TypeQueryResult } from "tern/lib/tern" import { transTypeFromTern } from "@/components/CodeEditor/TernSever" -const formatObjOrArr = (type: string, data: any) => { +const formatEvaluate = (data: any) => { let format = "" for (const key in data) { let current = data[key] @@ -35,11 +35,22 @@ const formatObjOrArr = (type: string, data: any) => { if (format) { format = `\n${format}` } + return format +} + +const Evaluate: FC<{ type: string; data?: any }> = (props) => { + const { type, data } = props + return ( - {type === "Array" ? `[${format}]` : `Object {${format}}`} + {type === "Array" + ? `[${formatEvaluate(data)}]` + : `Object {${formatEvaluate(data)}}`}
} withoutPadding @@ -53,22 +64,11 @@ const formatObjOrArr = (type: string, data: any) => { closeOnNoElementsInside hideOnInnerInVisible={false} > - {type === "Array" ? "[ ... ]" : "{ ... }"} + {type === "Array" ? "[ ... ]" : "{ ... }"} ) } -const formatEvaluate = (type: string, data?: any) => { - switch (type) { - case "String": - return `"${data}"` - case "Array": - case "Object": - return formatObjOrArr(type, data) - } - return data?.toString() -} - const handleTernCompletions = (data: TypeQueryResult): TransQuery => { const result: TransQuery = data ?? {} if (data.doc?.slice(0, 1) === "{") { @@ -110,7 +110,13 @@ export const HintTooltip: FC = (props) => { {data?.path?.length ? (
Evaluates to
- {formatEvaluate(data.type, data.data)} + {data.type === "Array" || data.type === "Object" ? ( + + ) : data.type === "String" ? ( + {`"${data.data}"`} + ) : ( + {data.data?.toString()} + )}
) : null}
From 5f4b7d81cec76fcc9ae49264a4ac12a30a9540fe Mon Sep 17 00:00:00 2001 From: AruSeito Date: Wed, 20 Jul 2022 17:53:36 +0800 Subject: [PATCH 022/148] feat: new setting --- src/api/base.ts | 2 +- src/i18n/locale/en-US.json | 8 +- src/i18n/locale/zh-CN.json | 6 +- src/page/App/components/PageNavBar/index.tsx | 2 +- .../Components/SettingCommonForm/index.tsx | 112 ------ .../Components/SettingCommonForm/interface.ts | 29 -- .../Components/SettingCommonForm/styles.ts | 45 --- src/page/Setting/SettingAccount/index.tsx | 203 +++++------ src/page/Setting/SettingAccount/style.ts | 10 + src/page/Setting/SettingOthers/index.tsx | 128 ++++--- src/page/Setting/SettingOthers/interface.ts | 1 - src/page/Setting/SettingPassword/index.tsx | 332 ++++++++++-------- .../components/LabelAndSetter/index.tsx | 30 ++ .../components/LabelAndSetter/interface.ts | 7 + .../components/LabelAndSetter/style.ts | 29 ++ src/page/Setting/components/Layout/index.tsx | 14 + src/page/Setting/components/Layout/style.ts | 16 + src/page/Setting/components/interface.ts | 4 + src/page/Setting/components/label.tsx | 19 + src/page/Setting/components/style.ts | 14 + src/page/Setting/index.tsx | 111 +----- src/page/Setting/navBar.tsx | 36 ++ src/page/Setting/tabPanel.tsx | 94 +++++ src/router/routerConfig.tsx | 2 +- 24 files changed, 643 insertions(+), 611 deletions(-) delete mode 100644 src/page/Setting/Components/SettingCommonForm/index.tsx delete mode 100644 src/page/Setting/Components/SettingCommonForm/interface.ts delete mode 100644 src/page/Setting/Components/SettingCommonForm/styles.ts create mode 100644 src/page/Setting/SettingAccount/style.ts delete mode 100644 src/page/Setting/SettingOthers/interface.ts create mode 100644 src/page/Setting/components/LabelAndSetter/index.tsx create mode 100644 src/page/Setting/components/LabelAndSetter/interface.ts create mode 100644 src/page/Setting/components/LabelAndSetter/style.ts create mode 100644 src/page/Setting/components/Layout/index.tsx create mode 100644 src/page/Setting/components/Layout/style.ts create mode 100644 src/page/Setting/components/interface.ts create mode 100644 src/page/Setting/components/label.tsx create mode 100644 src/page/Setting/components/style.ts create mode 100644 src/page/Setting/navBar.tsx create mode 100644 src/page/Setting/tabPanel.tsx diff --git a/src/api/base.ts b/src/api/base.ts index b65cc73fcd..c895f44db0 100644 --- a/src/api/base.ts +++ b/src/api/base.ts @@ -10,7 +10,7 @@ export interface Success { } export interface ApiError { - errorCode: string + errorCode: string | number errorMessage: string } // TODO: @aruseito use OOP to create request diff --git a/src/i18n/locale/en-US.json b/src/i18n/locale/en-US.json index 7f69931db0..dd0f8866e2 100644 --- a/src/i18n/locale/en-US.json +++ b/src/i18n/locale/en-US.json @@ -721,10 +721,12 @@ "title": "PASSWORD", "current_password": "Old password", "new_password": "New password", - "confirm_password": "Confirm password", + "confirm_password": "Confirmation password", "empty_password": "Please enter your password", - "error_format_password": "Password must be 6～15 characters", - "error_match_password": "Passwords do not match", + "error_format_password": "Password must be 6～20 characters", + "error_match_password": "Your password and confirmation password do not match", + "error_password_has_empty": "Password cannot include spaces", + "error_validate_password": "Your password can only contain numbers, letters and punctuations", "submit_button": "Submit" }, "other": { diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index 244922d960..105b09c81e 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -724,8 +724,10 @@ "new_password": "新密码", "confirm_password": "确认新密码", "empty_password": "密码不能为空", - "error_format_password": "密码须为6～15个字符", - "error_match_password": "密码不匹配", + "error_format_password": "密码须为6～20个字符", + "error_match_password": "新密码不一致，请重试 ", + "error_password_has_empty": "密码不能包含空格", + "error_validate_password": "密码只能包含数字、字母、标点符号", "submit_button": "提交" }, "other": { diff --git a/src/page/App/components/PageNavBar/index.tsx b/src/page/App/components/PageNavBar/index.tsx index 7a641de07d..de35806c34 100644 --- a/src/page/App/components/PageNavBar/index.tsx +++ b/src/page/App/components/PageNavBar/index.tsx @@ -101,7 +101,7 @@ export const PageNavBar: FC = (props) => { { - navigate("/") + window.location.href = "/" }} css={logoCursorStyle} /> diff --git a/src/page/Setting/Components/SettingCommonForm/index.tsx b/src/page/Setting/Components/SettingCommonForm/index.tsx deleted file mode 100644 index 2691cabd01..0000000000 --- a/src/page/Setting/Components/SettingCommonForm/index.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { FC, Fragment } from "react" -import { Input, Password } from "@illa-design/input" -import { Select } from "@illa-design/select" -import { Button } from "@illa-design/button" -import { WarningCircleIcon } from "@illa-design/icon" -import { - SettingCommonFormProps, - paramDataType, - contentItemType, -} from "./interface" -import { - settingBodyStyle, - settingItemStyle, - itemTitleStyle, - itemSubtitleStyle, - saveButtonStyle, - errorLineStyle, - errorTextStyle, -} from "./styles" - -export const SettingCommonForm: FC = (props) => { - const { paramData, onSubmit } = props - - return ( -
- {paramData.map((item: paramDataType, idx: number) => { - return ( -
- {item.title &&

{item.title}

} - {item.subTitle && ( - {item.subTitle} - )} - {item.content.map( - (contentItem: contentItemType, contentIdx: number) => { - return ( - - {contentItem.type === "input" && ( - <> - - {contentItem.showError && ( -
- - - {contentItem.errorMsg} - -
- )} - - )} - {contentItem.type === "input-password" && ( - <> - - {contentItem.showError && ( -
- - - {contentItem.errorMsg} - -
- )} - - )} - {contentItem.type === "select" && ( - + - Api.request( - { - url: "/users/nickname", - method: "PATCH", - data: { - nickname: usernameValue, - }, - }, - (response) => { - dispatch( - currentUserActions.updateCurrentUserReducer({ - ...response.data, - nickname: response.data.nickname, - }), - ) - setUsernameValue("") - Message.success("success!") - }, - (failure) => { - Message.error(t("setting.account.save_fail")) - }, - (crash) => { - Message.error(t("network_error")) - }, - (loading) => { - setButtonLoading(loading) - }, - ) - } + + + - return +
+ +
+ + ) } SettingAccount.displayName = "SettingAccount" diff --git a/src/page/Setting/SettingAccount/style.ts b/src/page/Setting/SettingAccount/style.ts new file mode 100644 index 0000000000..eedb9f6304 --- /dev/null +++ b/src/page/Setting/SettingAccount/style.ts @@ -0,0 +1,10 @@ +import { css } from "@emotion/react" + +export const fullWidth = css` + width: 100%; +` + +export const publicButtonWrapperStyle = css` + margin-top: 40px; + ${fullWidth}; +` diff --git a/src/page/Setting/SettingOthers/index.tsx b/src/page/Setting/SettingOthers/index.tsx index e88abe0042..e49059dcd7 100644 --- a/src/page/Setting/SettingOthers/index.tsx +++ b/src/page/Setting/SettingOthers/index.tsx @@ -1,75 +1,46 @@ -import { FC, useEffect, useMemo, useState } from "react" -import { useSelector, useDispatch } from "react-redux" +import { FC, useCallback, useEffect, useState } from "react" import { useTranslation } from "react-i18next" +import { publicButtonWrapperStyle } from "@/page/Setting/SettingAccount/style" +import { Button } from "@illa-design/button" +import { LabelAndSetter } from "@/page/Setting/components/LabelAndSetter" +import { Select } from "@illa-design/select" +import { useSelector } from "react-redux" import { getCurrentUser } from "@/redux/currentUser/currentUserSelector" import { Api } from "@/api/base" -import { currentUserActions } from "@/redux/currentUser/currentUserSlice" -import { Message } from "@illa-design/message" import { CurrentUser } from "@/redux/currentUser/currentUserState" -import { SettingCommonForm } from "../Components/SettingCommonForm" +import i18n from "@/i18n/config" + +const options = [ + { + label: "English", + value: "en-US", + }, + { + label: "简体中文", + value: "zh-CN", + }, +] export const SettingOthers: FC = () => { const { t } = useTranslation() - const dispatch = useDispatch() - const userInfo = useSelector(getCurrentUser) + const userLanguage = useSelector(getCurrentUser).language || "en-US" - const [buttonLoading, setButtonLoading] = useState(false) - const [languageValue, setLanguageValue] = useState("") - const [dataList, setDataList] = useState([]) - const [refresh, setRefresh] = useState(0) + const [languageValue, setLanguageValue] = useState(userLanguage) - useMemo(() => { - if (!userInfo?.userId) { - return - } - if (!languageValue) { - setLanguageValue(userInfo?.language as string) - } - }, [userInfo]) + const [isLoading, setIsLoading] = useState(false) + // TODO: @aruseito hack method,wait Router defender perfect useEffect(() => { - if (languageValue) { - setDataList([ - { - title: t("setting.other.language"), - content: [ - { - type: "select", - selectOptions: [ - { - label: "English", - value: "en-US", - }, - { - label: "简体中文", - value: "zh-CN", - }, - ], - defaultSelectValue: languageValue, - onChange: (value: string) => { - setLanguageValue(value) - }, - }, - ], - }, - { - content: [ - { - type: "button", - value: t("setting.other.save"), - loading: buttonLoading, - }, - ], - }, - ]) - } - }, [languageValue, refresh]) + setLanguageValue(userLanguage || "en-US") + }, [userLanguage]) - const handleSubmit = () => { - if (languageValue === userInfo?.language) { - return - } + const handleChangeLanguage = (value: string) => { + setLanguageValue(value) + } + const isButtonDisabled = languageValue === userLanguage + + const handleClickSubmit = useCallback(() => { Api.request( { url: "/users/language", @@ -79,22 +50,43 @@ export const SettingOthers: FC = () => { }, }, (response) => { - dispatch(currentUserActions.updateCurrentUserReducer(response.data)) - Message.success(t("edit_success")) - setRefresh(refresh + 1) + i18n.changeLanguage(languageValue).then(() => { + window.location.reload() + }) }, (failure) => {}, (crash) => {}, (loading) => { - setButtonLoading(loading) + setIsLoading(loading) }, ) - } + }, [languageValue]) + + return ( + <> + + { diff --git a/src/page/App/components/PanelSetters/SelectSetter/eventTargetWidgetSelect.tsx b/src/page/App/components/PanelSetters/SelectSetter/eventTargetWidgetSelect.tsx index ef6076e189..e3e2bd7b6f 100644 --- a/src/page/App/components/PanelSetters/SelectSetter/eventTargetWidgetSelect.tsx +++ b/src/page/App/components/PanelSetters/SelectSetter/eventTargetWidgetSelect.tsx @@ -1,6 +1,5 @@ import { FC, useEffect, useMemo } from "react" import { useSelector } from "react-redux" -import { get } from "lodash" import { Select } from "@illa-design/select" import { BaseSelectSetterProps } from "./interface" import { applyBaseSelectWrapperStyle } from "@/page/App/components/PanelSetters/SelectSetter/style" diff --git a/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx b/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx index cc7e114a8d..21a7c9ef16 100644 --- a/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx +++ b/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx @@ -13,6 +13,7 @@ import { } from "./style" import { BaseInput } from "../InputSetter/baseInput" import { useTranslation } from "react-i18next" +import { VALIDATION_TYPES } from "@/utils/validationFactory" export const DynamicSwitchSetter: FC = (props) => { const { @@ -27,6 +28,7 @@ export const DynamicSwitchSetter: FC = (props) => { value, widgetDisplayName, expectedType, + widgetOrAction, } = props const { t } = useTranslation() @@ -78,7 +80,8 @@ export const DynamicSwitchSetter: FC = (props) => { expectedType={expectedType} isSetterSingleRow widgetDisplayName={widgetDisplayName} - widgetType={""} + widgetType={VALIDATION_TYPES.BOOLEAN} + widgetOrAction={widgetOrAction} />
)} diff --git a/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/utils.tsx b/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/utils.tsx index 3711b1cd42..72953ccf60 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/utils.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/utils.tsx @@ -1,5 +1,5 @@ import { ComponentSessionProps } from "./interface" -import i18n from "@/i18n/config" +import { sessionTypeMapSessionNameKey } from "@/widgetLibrary/componentListBuilder" export function getMatchComponent( value?: string, options?: ComponentSessionProps[], @@ -14,13 +14,11 @@ export function getMatchComponent( const newSessionList: ComponentSessionProps[] = [] const removeCommonlyOptions = options?.filter((option) => { - return ( - i18n.t(option.title) !== i18n.t("editor.widget_picker.sessions.commonly") - ) + return option.title !== sessionTypeMapSessionNameKey.COMMON }) removeCommonlyOptions?.forEach((session) => { const res = session.widgetCardInfos.filter((widgetCardInfo) => - i18n.t(widgetCardInfo.widgetName).toLocaleLowerCase().match(reg), + widgetCardInfo.widgetName.toLocaleLowerCase().match(reg), ) if (res.length > 0) { newSessionList.push({ ...session, widgetCardInfos: res }) diff --git a/src/widgetLibrary/BarProgressWidget/panelConfig.tsx b/src/widgetLibrary/BarProgressWidget/panelConfig.tsx index 37128107b2..30d9264045 100644 --- a/src/widgetLibrary/BarProgressWidget/panelConfig.tsx +++ b/src/widgetLibrary/BarProgressWidget/panelConfig.tsx @@ -2,16 +2,17 @@ import { HorizontalEndIcon, HorizontalStartIcon } from "@illa-design/icon" import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ { id: "bar-progress-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "bar-progress-basic-Value", - labelName: "editor.inspect.setter_label.value", - labelDesc: "editor.inspect.setter_tooltip.progress_percentage", + labelName: i18n.t("editor.inspect.setter_label.value"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.progress_percentage"), attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -20,25 +21,25 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "bar-progress-label", - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: "bar-progress-label-label", - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "bar-progress-label-caption", - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "bar-progress-label-position", - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -48,7 +49,7 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "bar-progress-label-alignment", - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -64,7 +65,7 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "bar-progress-label-labelWidth", - labelName: "editor.inspect.setter_label.label_width", + labelName: i18n.t("editor.inspect.setter_label.label_width"), attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -73,18 +74,18 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "bar-progress-adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "bar-progress-adornments-showText", - labelName: "editor.inspect.setter_label.hide_value_label", + labelName: i18n.t("editor.inspect.setter_label.hide_value_label"), attrName: "showText", setterType: "SWITCH_SETTER", }, { id: "bar-progress-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -93,13 +94,13 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "bar-progress-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "bar-progress-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "barProgressName" }, attrName: "hidden", useCustomLayout: true, @@ -109,18 +110,18 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "bar-progress-style", - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "bar-progress-style-list", setterType: "LIST_SETTER", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: "bar-progress-color", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), setterType: "COLOR_PICKER_SETTER", attrName: "color", defaultValue: "blue", @@ -128,7 +129,7 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "bar-progress-trailColor", - labelName: "editor.inspect.setter_label.trail_color", + labelName: i18n.t("editor.inspect.setter_label.trail_color"), setterType: "COLOR_PICKER_SETTER", attrName: "trailColor", defaultValue: "gray", @@ -136,7 +137,7 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "bar-progress-strokeWidth", - labelName: "editor.inspect.setter_label.stroke_width", + labelName: i18n.t("editor.inspect.setter_label.stroke_width"), setterType: "INPUT_SETTER", attrName: "strokeWidth", defaultValue: "4px", diff --git a/src/widgetLibrary/BarProgressWidget/widgetConfig.tsx b/src/widgetLibrary/BarProgressWidget/widgetConfig.tsx index e84e2f858b..0a874c981e 100644 --- a/src/widgetLibrary/BarProgressWidget/widgetConfig.tsx +++ b/src/widgetLibrary/BarProgressWidget/widgetConfig.tsx @@ -1,10 +1,11 @@ import { LineProgressWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" export const BAR_PROGRESS_WIDGET_CONFIG: WidgetConfig = { type: "BAR_PROGRESS_WIDGET", displayName: "barProgress", - widgetName: "widget.bar_progress.name", + widgetName: i18n.t("widget.bar_progress.name"), icon: , sessionType: "PRESENTATION", w: 16, diff --git a/src/widgetLibrary/ButtonWidget/panelConfig.tsx b/src/widgetLibrary/ButtonWidget/panelConfig.tsx index c208764cae..ac133d7fc2 100644 --- a/src/widgetLibrary/ButtonWidget/panelConfig.tsx +++ b/src/widgetLibrary/ButtonWidget/panelConfig.tsx @@ -6,17 +6,17 @@ import { HorizontalStartIcon, } from "@illa-design/react" import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" - import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: "button-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "button-basic-Text", - labelName: "editor.inspect.setter_label.text", + labelName: i18n.t("editor.inspect.setter_label.text"), attrName: "text", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -25,54 +25,54 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "button-interaction", - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ { id: "button-interaction-event-handler", attrName: "events", - labelName: "editor.inspect.setter_label.event_handler", + labelName: i18n.t("editor.inspect.setter_label.event_handler"), setterType: "EVENT_HANDLER_SETTER", useCustomLayout: true, childrenSetter: [ { id: "event", - labelName: "editor.inspect.setter_label.event", + labelName: i18n.t("editor.inspect.setter_label.event"), setterType: "BASE_SELECT_SETTER", attrName: "eventType", options: [{ label: "Click", value: "onClick" }], }, { id: "action", - labelName: "editor.inspect.setter_label.action", - labelDesc: "editor.inspect.setter_tooltip.action", + labelName: i18n.t("editor.inspect.setter_label.action"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.action"), setterType: "EVENT_ACTION_SELECT_SETTER", attrName: "actionType", options: [ { - label: "editor.inspect.setter_label.trigger_query", + label: i18n.t("editor.inspect.setter_label.trigger_query"), value: "datasource", }, { - label: "editor.inspect.setter_label.control_component", + label: i18n.t("editor.inspect.setter_label.control_component"), value: "widget", }, { - label: "editor.inspect.setter_label.run_script", + label: i18n.t("editor.inspect.setter_label.run_script"), value: "script", }, { - label: "editor.inspect.setter_label.go_to_url", + label: i18n.t("editor.inspect.setter_label.go_to_url"), value: "openUrl", }, { - label: "editor.inspect.setter_label.show_notification", + label: i18n.t("editor.inspect.setter_label.show_notification"), value: "showNotification", }, ], }, { id: "query", - labelName: "Query", + labelName: i18n.t("Query"), setterType: "EVENT_TARGET_ACTION_SELECT_SETTER", attrName: "queryID", bindAttrName: "actionType", @@ -80,12 +80,11 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "actionMethod", - labelName: "Action Method", + labelName: i18n.t("Action Method"), setterType: "BASE_SELECT_SETTER", attrName: "widgetMethod", bindAttrName: "queryID", shown: (type) => type === "datasource", - // TODO: value should as same as action run method name that mounted on `globalData` options: [{ label: "run", value: "executeAction" }], }, { @@ -98,7 +97,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "Method", - labelName: "Method", + labelName: i18n.t("Method"), setterType: "EVENT_WIDGET_METHOD_SELECT_SETTER", attrName: "widgetMethod", bindAttrName: "widgetID", @@ -106,7 +105,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "Value", - labelName: "Value", + labelName: i18n.t("Value"), setterType: "INPUT_SETTER", attrName: "widgetTargetValue", bindAttrName: "widgetMethod", @@ -114,7 +113,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "startValue", - labelName: "startValue", + labelName: i18n.t("startValue"), setterType: "INPUT_SETTER", attrName: "widgetTargetValue", bindAttrName: "widgetMethod", @@ -122,7 +121,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "endValue", - labelName: "endValue", + labelName: i18n.t("endValue"), setterType: "INPUT_SETTER", attrName: "widgetTargetValue", bindAttrName: "widgetMethod", @@ -130,7 +129,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "imageUrl", - labelName: "Value", + labelName: i18n.t("Value"), setterType: "INPUT_SETTER", attrName: "widgetTargetValue", bindAttrName: "widgetMethod", @@ -138,7 +137,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "disabled", - labelName: "editor.inspect.setter_label.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, attrName: "disabled", @@ -156,7 +155,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "URL", - labelName: "URL", + labelName: i18n.t("URL"), setterType: "INPUT_SETTER", attrName: "url", bindAttrName: "actionType", @@ -165,7 +164,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "newTab", - labelName: "New Tab", + labelName: i18n.t("New Tab"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, attrName: "newTab", @@ -175,7 +174,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "title", - labelName: "Title", + labelName: i18n.t("Title"), setterType: "INPUT_SETTER", attrName: "title", bindAttrName: "actionType", @@ -184,7 +183,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "description", - labelName: "Description", + labelName: i18n.t("Description"), setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, attrName: "description", @@ -193,7 +192,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "notification-type", - labelName: "Type", + labelName: i18n.t("Type"), setterType: "BASE_SELECT_SETTER", attrName: "notificationType", bindAttrName: "actionType", @@ -207,7 +206,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "duration", - labelName: "Duration", + labelName: i18n.t("Duration"), setterType: "INPUT_SETTER", attrName: "duration", bindAttrName: "actionType", @@ -216,8 +215,8 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "enabled", - labelName: "Only run when", - // labelDesc: "xxxxx", + labelName: i18n.t("Only run when"), + // labelDesc: i18n.t("xxxxx"), setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, attrName: "enabled", @@ -227,8 +226,8 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ // TODO: wait form container // { // id: "button-interaction-type", - // labelName: "editor.inspect.setter_label.type", - // labelDesc: "xxxxx", + // labelName: i18n.t("editor.inspect.setter_label.type"), + // labelDesc: i18n.t("xxxxx"), // attrName: "submit", // setterType: "RADIO_GROUP_SETTER", // options: [ @@ -238,8 +237,8 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ // }, { id: "button-interaction-formId", - labelName: "editor.inspect.setter_label.submit_form", - // labelDesc: "xxxxx", + labelName: i18n.t("editor.inspect.setter_label.submit_form"), + // labelDesc: i18n.t("xxxxx"), attrName: "formId", setterType: "INPUT_SETTER", bindAttrName: "submit", @@ -247,8 +246,8 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "button-interaction-loading", - labelName: "editor.inspect.setter_label.loading", - labelDesc: "editor.inspect.setter_tooltip.loading", + labelName: i18n.t("editor.inspect.setter_label.loading"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.loading"), attrName: "loading", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -259,8 +258,8 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "button-interaction-disabled", - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -271,12 +270,12 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "button-adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "button-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", @@ -285,12 +284,12 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "button-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "button-layout-alignment", setterType: "RADIO_GROUP_SETTER", - labelName: "editor.inspect.setter_label.align", + labelName: i18n.t("editor.inspect.setter_label.align"), attrName: "alignment", options: [ { @@ -314,8 +313,8 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: "button-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "buttonName" }, useCustomLayout: true, attrName: "hidden", @@ -325,20 +324,20 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "button-style", - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "button-style-variant", setterType: "RADIO_GROUP_SETTER", - labelName: "editor.inspect.setter_label.variant", + labelName: i18n.t("editor.inspect.setter_label.variant"), attrName: "variant", options: [ { - label: "editor.inspect.setter_default_value.solid", + label: i18n.t("editor.inspect.setter_default_value.solid"), value: "fill", }, { - label: "editor.inspect.setter_default_value.outline", + label: i18n.t("editor.inspect.setter_default_value.outline"), value: "outline", }, ], @@ -346,13 +345,13 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: "button-style-list", setterType: "LIST_SETTER", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: "button-style-bg", - labelName: "editor.inspect.setter_label.theme_color", + labelName: i18n.t("editor.inspect.setter_label.theme_color"), setterType: "COLOR_PICKER_SETTER", attrName: "colorScheme", defaultValue: "#134ae0", diff --git a/src/widgetLibrary/ButtonWidget/widgetConfig.tsx b/src/widgetLibrary/ButtonWidget/widgetConfig.tsx index 657a95cbb1..d0eecf4f16 100644 --- a/src/widgetLibrary/ButtonWidget/widgetConfig.tsx +++ b/src/widgetLibrary/ButtonWidget/widgetConfig.tsx @@ -5,7 +5,7 @@ import i18n from "@/i18n/config" export const BUTTON_WIDGET_CONFIG: WidgetConfig = { type: "BUTTON_WIDGET", displayName: "button", - widgetName: "widget.button.name", + widgetName: i18n.t("widget.button.name"), icon: , sessionType: "PRESENTATION", w: 12, diff --git a/src/widgetLibrary/Chart/panelConfig.tsx b/src/widgetLibrary/Chart/panelConfig.tsx index e318f2c480..ee87c63862 100644 --- a/src/widgetLibrary/Chart/panelConfig.tsx +++ b/src/widgetLibrary/Chart/panelConfig.tsx @@ -1,4 +1,4 @@ -import { COLOR_SCHEME, XAXISTYPE } from "./interface" +import { XAXISTYPE } from "./interface" import { PanelConfig, PanelFieldConfig, @@ -11,18 +11,19 @@ import { VerticalEndIcon, VerticalStartIcon, } from "@illa-design/icon" +import i18n from "@/i18n/config" export const CHART_DATASET_CONFIG: PanelFieldConfig[] = [ { id: "dataset-name", - labelName: "editor.inspect.setter_label.dataset.name", + labelName: i18n.t("editor.inspect.setter_label.dataset.name"), attrName: "name", setterType: "INPUT_SETTER", isSetterSingleRow: true, }, { id: "dataset-values", - labelName: "editor.inspect.setter_label.dataset.value", + labelName: i18n.t("editor.inspect.setter_label.dataset.value"), attrName: "values", setterType: "INPUT_SETTER", isSetterSingleRow: true, @@ -30,7 +31,7 @@ export const CHART_DATASET_CONFIG: PanelFieldConfig[] = [ }, { id: "dataset-type", - labelName: "editor.inspect.setter_label.type", + labelName: i18n.t("editor.inspect.setter_label.type"), attrName: "type", setterType: "BASE_SELECT_SETTER", options: [ @@ -51,14 +52,14 @@ export const CHART_DATASET_CONFIG: PanelFieldConfig[] = [ }, { id: "dataset-toolTip", - labelName: "editor.inspect.setter_label.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), attrName: "toolTip", setterType: "INPUT_SETTER", isSetterSingleRow: true, }, { id: "dataset-lineColor", - labelName: "editor.inspect.setter_label.color", + labelName: i18n.t("editor.inspect.setter_label.color"), attrName: "lineColor", setterType: "CHART_LINE_COLOR_LIST_SETTER", isSetterSingleRow: true, @@ -76,7 +77,7 @@ export const CHART_DATASET_CONFIG: PanelFieldConfig[] = [ export const CHART_PANEL_CONFIG: PanelConfig[] = [ { id: "chart-data", - groupName: "DATA", + groupName: i18n.t("DATA"), children: [ { id: "chart-data-config-type", @@ -96,7 +97,7 @@ export const CHART_PANEL_CONFIG: PanelConfig[] = [ { id: "chart-chartJson", - labelName: "data", + labelName: i18n.t("data"), isSetterSingleRow: true, attrName: "chartJson", setterType: "TEXT_AREA", @@ -107,7 +108,7 @@ export const CHART_PANEL_CONFIG: PanelConfig[] = [ }, { id: "chart-data", - labelName: "X-axis values", + labelName: i18n.t("X-axis values"), attrName: "xAxis", isSetterSingleRow: true, useCustomLayout: true, @@ -121,7 +122,7 @@ export const CHART_PANEL_CONFIG: PanelConfig[] = [ }, { id: "chart-layout", - groupName: "LAYOUT", + groupName: i18n.t("LAYOUT"), children: [ { id: "chart-layout-config-type", @@ -141,7 +142,7 @@ export const CHART_PANEL_CONFIG: PanelConfig[] = [ }, { id: "chart-chartJson", - labelName: "Layout", + labelName: i18n.t("Layout"), isSetterSingleRow: true, attrName: "layoutJson", setterType: "TEXT_AREA", @@ -152,7 +153,7 @@ export const CHART_PANEL_CONFIG: PanelConfig[] = [ }, { id: "chart-title", - labelName: "editor.inspect.setter_label.title", + labelName: i18n.t("editor.inspect.setter_label.title"), attrName: "title", setterType: "INPUT_SETTER", defaultValue: "chart", @@ -163,7 +164,7 @@ export const CHART_PANEL_CONFIG: PanelConfig[] = [ }, { id: "chart-xAxisTitle", - labelName: "editor.inspect.setter_label.x_axis_title", + labelName: i18n.t("editor.inspect.setter_label.x_axis_title"), attrName: "xTitle", setterType: "INPUT_SETTER", bindAttrName: ["layoutConfigType", "type"], @@ -174,7 +175,7 @@ export const CHART_PANEL_CONFIG: PanelConfig[] = [ { id: "chart-xAxisType", - labelName: "editor.inspect.setter_label.x_axis_type", + labelName: i18n.t("editor.inspect.setter_label.x_axis_type"), attrName: "xAxisType", setterType: "BASE_SELECT_SETTER", options: XAXISTYPE, @@ -185,7 +186,7 @@ export const CHART_PANEL_CONFIG: PanelConfig[] = [ }, { id: "chart-yAxisTitle", - labelName: "editor.inspect.setter_label.y_axis_title", + labelName: i18n.t("editor.inspect.setter_label.y_axis_title"), attrName: "yTitle", setterType: "INPUT_SETTER", bindAttrName: ["layoutConfigType", "type"], @@ -195,7 +196,7 @@ export const CHART_PANEL_CONFIG: PanelConfig[] = [ }, { id: "chart-legend-position", - labelName: "editor.inspect.setter_label.legend_position", + labelName: i18n.t("editor.inspect.setter_label.legend_position"), attrName: "legendPosition", setterType: "RADIO_GROUP_SETTER", bindAttrName: "type", diff --git a/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx b/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx index b027852d07..5db5026cd9 100644 --- a/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx +++ b/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx @@ -1,14 +1,14 @@ import { PanelConfig } from "@/page/App/components/InspectPanel/interface" import { HorizontalStartIcon, HorizontalEndIcon } from "@illa-design/icon" - import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" const baseWidgetName = "checkboxGroup" export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-options`, - groupName: "editor.inspect.setter_group.options", + groupName: i18n.t("editor.inspect.setter_group.options"), children: [ { id: `${baseWidgetName}-options-mode`, @@ -35,20 +35,20 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ childrenSetter: [ { id: "select-options-label", - labelName: "Label", + labelName: i18n.t("Label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "select-options-value", - labelName: "Value", + labelName: i18n.t("Value"), attrName: "value", setterType: "INPUT_SETTER", }, { id: "select-options-disabled", - labelName: "Disabled", + labelName: i18n.t("Disabled"), attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -57,7 +57,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-options-data-sources`, - labelName: "editor.inspect.setter_label.data_sources", + labelName: i18n.t("editor.inspect.setter_label.data_sources"), attrName: "dataSources", setterType: "INPUT_SETTER", bindAttrName: "optionConfigureMode", @@ -67,7 +67,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-options-mapped`, - labelName: "editor.inspect.setter_label.mapped_option", + labelName: i18n.t("editor.inspect.setter_label.mapped_option"), useCustomLayout: true, attrName: "mappedOption", setterType: "OPTION_MAPPED_SETTER", @@ -76,21 +76,21 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ childrenSetter: [ { id: `select-mappedOption-labels`, - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "labels", setterType: "OPTION_MAPPED_INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, }, { id: `select-mappedOption-values`, - labelName: "editor.inspect.setter_label.value", + labelName: i18n.t("editor.inspect.setter_label.value"), attrName: "values", setterType: "OPTION_MAPPED_INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, }, { id: `select-mappedOption-disables`, - labelName: "editor.inspect.setter_label.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), attrName: "disables", setterType: "OPTION_MAPPED_INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, @@ -99,8 +99,10 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-options-default-value`, - labelName: "editor.inspect.setter_label.default_value", - labelDesc: "editor.inspect.setter_tooltip.component_default_value", + labelName: i18n.t("editor.inspect.setter_label.default_value"), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.component_default_value", + ), attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -109,25 +111,25 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-label`, - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: `${baseWidgetName}-label-label`, - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: `${baseWidgetName}-label-caption`, - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: `${baseWidgetName}-label-position`, - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -137,7 +139,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-label-alignment`, - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -153,7 +155,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-label-label-width`, - labelName: "editor.inspect.setter_label.label_width", + labelName: i18n.t("editor.inspect.setter_label.label_width"), attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -162,12 +164,12 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-validation`, - groupName: "editor.inspect.setter_group.validation", + groupName: i18n.t("editor.inspect.setter_group.validation"), children: [ { id: `${baseWidgetName}-validation-required`, - labelName: "editor.inspect.setter_label.required_field", - labelDesc: "editor.inspect.setter_tooltip.required_field", + labelName: i18n.t("editor.inspect.setter_label.required_field"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -175,8 +177,12 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-validation-hide-message`, - labelName: "editor.inspect.setter_label.hide_validation_message", - labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", + labelName: i18n.t( + "editor.inspect.setter_label.hide_validation_message", + ), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.hide_validation_message", + ), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -186,12 +192,12 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-interaction`, - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ { id: `${baseWidgetName}-interaction-disabled`, - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -201,12 +207,12 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-adornments`, - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: `${baseWidgetName}-adornments-tooltip`, - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -215,12 +221,12 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-layout`, - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: `${baseWidgetName}-layout-hidden`, - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "checkboxGroupName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", @@ -230,7 +236,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-layout-direction`, - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), setterType: "RADIO_GROUP_SETTER", attrName: "direction", options: [ @@ -248,18 +254,18 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-styles`, - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: `${baseWidgetName}-style`, setterType: "LIST_SETTER", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: `${baseWidgetName}-style-coloScheme`, - labelName: "editor.inspect.setter_label.theme_color", + labelName: i18n.t("editor.inspect.setter_label.theme_color"), attrName: "colorScheme", setterType: "COLOR_PICKER_SETTER", defaultValue: "blue", diff --git a/src/widgetLibrary/CheckboxGroupWidget/widgetConfig.tsx b/src/widgetLibrary/CheckboxGroupWidget/widgetConfig.tsx index 71fd541128..034d340541 100644 --- a/src/widgetLibrary/CheckboxGroupWidget/widgetConfig.tsx +++ b/src/widgetLibrary/CheckboxGroupWidget/widgetConfig.tsx @@ -1,10 +1,11 @@ import { CheckboxWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" import { v4 } from "uuid" +import i18n from "@/i18n/config" export const CHECKBOX_GROUP_WIDGET_CONFIG: WidgetConfig = { type: "CHECKBOX_GROUP_WIDGET", - widgetName: "widget.check_box_group.name", + widgetName: i18n.t("widget.check_box_group.name"), displayName: "checkboxGroup", icon: , sessionType: "SELECT", diff --git a/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx b/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx index d4b173c849..3a17756821 100644 --- a/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx +++ b/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx @@ -5,18 +5,18 @@ import { } from "@illa-design/icon" import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" - import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ { id: "circle-progress-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "circle-progress-basic-Value", - labelName: "editor.inspect.setter_label.value", - labelDesc: "editor.inspect.setter_label.progress_percentage", + labelName: i18n.t("editor.inspect.setter_label.value"), + labelDesc: i18n.t("editor.inspect.setter_label.progress_percentage"), attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -25,18 +25,18 @@ export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "circle-progress-adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "circle-progress-adornments-showText", - labelName: "editor.inspect.setter_label.hide_value_label", + labelName: i18n.t("editor.inspect.setter_label.hide_value_label"), attrName: "showText", setterType: "SWITCH_SETTER", }, { id: "circle-progress-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -45,13 +45,13 @@ export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "circle-progress-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "circle-progress-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "circelProgressName" }, attrName: "hidden", useCustomLayout: true, @@ -60,7 +60,7 @@ export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ { id: "circle-progress-layout-alignment", setterType: "RADIO_GROUP_SETTER", - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "alignment", options: [ { @@ -81,18 +81,18 @@ export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "circle-progress-style", - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "circle-progress-style-list", setterType: "LIST_SETTER", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: "circle-progress-color", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), setterType: "COLOR_PICKER_SETTER", attrName: "color", defaultValue: "blue", @@ -100,7 +100,7 @@ export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "circle-progress-trailColor", - labelName: "editor.inspect.setter_label.trail_color", + labelName: i18n.t("editor.inspect.setter_label.trail_color"), setterType: "COLOR_PICKER_SETTER", attrName: "trailColor", defaultValue: "gray", @@ -108,7 +108,7 @@ export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ }, { id: "circle-progress-strokeWidth", - labelName: "editor.inspect.setter_label.stroke_width", + labelName: i18n.t("editor.inspect.setter_label.stroke_width"), setterType: "INPUT_SETTER", attrName: "strokeWidth", defaultValue: "4px", diff --git a/src/widgetLibrary/CircleProgressWidget/widgetConfig.tsx b/src/widgetLibrary/CircleProgressWidget/widgetConfig.tsx index b4ea3ce324..455c778540 100644 --- a/src/widgetLibrary/CircleProgressWidget/widgetConfig.tsx +++ b/src/widgetLibrary/CircleProgressWidget/widgetConfig.tsx @@ -1,10 +1,11 @@ import { CircleProgressWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" export const CIRCLE_PROGRESS_WIDGET_CONFIG: WidgetConfig = { type: "CIRCLE_PROGRESS_WIDGET", displayName: "circleProgress", - widgetName: "widget.circle_progress.name", + widgetName: i18n.t("widget.circle_progress.name"), icon: , sessionType: "PRESENTATION", w: 6, diff --git a/src/widgetLibrary/DateRangeWidget/panelConfig.tsx b/src/widgetLibrary/DateRangeWidget/panelConfig.tsx index 951c698963..5b4ba83a85 100644 --- a/src/widgetLibrary/DateRangeWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateRangeWidget/panelConfig.tsx @@ -1,30 +1,30 @@ import { HorizontalEndIcon, HorizontalStartIcon } from "@illa-design/icon" import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" - import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-range-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "date-range-basic-start-date", - labelName: "editor.inspect.setter_label.start_date", + labelName: i18n.t("editor.inspect.setter_label.start_date"), attrName: "startValue", setterType: "INPUT_SETTER", }, { id: "date-range-basic-end-date", - labelName: "editor.inspect.setter_label.end_data", + labelName: i18n.t("editor.inspect.setter_label.end_data"), attrName: "endValue", setterType: "INPUT_SETTER", }, { id: "date-basic-Format", - labelName: "editor.inspect.setter_label.format", - labelDesc: "editor.inspect.setter_tooltip.date_format", + labelName: i18n.t("editor.inspect.setter_label.format"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.date_format"), transComponents: { DayJS: , }, @@ -33,30 +33,30 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-range-basic-start-placeholder", - labelName: "editor.inspect.setter_label.start_placeholder", - labelDesc: "editor.inspect.setter_tooltip.placeholder", + labelName: i18n.t("editor.inspect.setter_label.start_placeholder"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.placeholder"), isSetterSingleRow: true, attrName: "startPlaceholder", setterType: "INPUT_SETTER", }, { id: "date-range-basic-end-placeholder", - labelName: "editor.inspect.setter_label.end_placeholder", - labelDesc: "editor.inspect.setter_tooltip.placeholder", + labelName: i18n.t("editor.inspect.setter_label.end_placeholder"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.placeholder"), isSetterSingleRow: true, attrName: "endPlaceholder", setterType: "INPUT_SETTER", }, { id: "date-range-basic-max-date", - labelName: "editor.inspect.setter_label.max_date", + labelName: i18n.t("editor.inspect.setter_label.max_date"), attrName: "maxDate", placeholder: "2022-05-30", setterType: "INPUT_SETTER", }, { id: "date-range-basic-min-date", - labelName: "editor.inspect.setter_label.min_date", + labelName: i18n.t("editor.inspect.setter_label.min_date"), attrName: "minDate", placeholder: "2022-05-01", setterType: "INPUT_SETTER", @@ -65,25 +65,25 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-range-label", - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: "date-range-label-label", - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date-range-label-caption", - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date-range-label-position", - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -93,7 +93,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-range-label-alignment", - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -109,7 +109,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-range-label-labelWidth", - labelName: "editor.inspect.setter_label.label_width", + labelName: i18n.t("editor.inspect.setter_label.label_width"), attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -118,21 +118,21 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-range-interaction", - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ // eventHandle @aoao { id: "date-range-interaction-disabled", - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, }, { id: "date-range-interaction-readonly", - labelName: "editor.inspect.setter_label.read_only", - labelDesc: "editor.inspect.setter_tooltip.read_only", + labelName: i18n.t("editor.inspect.setter_label.read_only"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.read_only"), attrName: "readonly", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -141,18 +141,18 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-range-adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "date-range-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", }, { id: "date-range-adornments-showClear", - labelName: "editor.inspect.setter_label.show_clear_button", + labelName: i18n.t("editor.inspect.setter_label.show_clear_button"), attrName: "showClear", useCustomLayout: true, setterType: "DYNAMIC_SWITCH_SETTER", @@ -160,8 +160,8 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-range-interaction-loading", - labelName: "editor.inspect.setter_label.loading", - labelDesc: "editor.inspect.setter_tooltip.loading", + labelName: i18n.t("editor.inspect.setter_label.loading"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.loading"), attrName: "loading", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -170,12 +170,12 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-range-validation", - groupName: "editor.inspect.setter_group.validation", + groupName: i18n.t("editor.inspect.setter_group.validation"), children: [ { id: "date-range-validation-required", - labelName: "editor.inspect.setter_label.required_field", - labelDesc: "editor.inspect.setter_tooltip.required_field", + labelName: i18n.t("editor.inspect.setter_label.required_field"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -183,8 +183,12 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-range-validation-hide-message", - labelName: "editor.inspect.setter_label.hide_validation_message", - labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", + labelName: i18n.t( + "editor.inspect.setter_label.hide_validation_message", + ), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.hide_validation_message", + ), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -194,13 +198,13 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-range-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "date-range-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "dateRangeName" }, attrName: "hidden", useCustomLayout: true, @@ -210,19 +214,19 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-range-style", - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "date-range-style-list", setterType: "LIST_SETTER", isSetterSingleRow: true, - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: "date-range-styles-colorScheme", - labelName: "editor.inspect.setter_label.theme_color", + labelName: i18n.t("editor.inspect.setter_label.theme_color"), setterType: "COLOR_PICKER_SETTER", attrName: "colorScheme", defaultValue: "blue", diff --git a/src/widgetLibrary/DateRangeWidget/widgetConfig.tsx b/src/widgetLibrary/DateRangeWidget/widgetConfig.tsx index c9241fa81a..30ee857df4 100644 --- a/src/widgetLibrary/DateRangeWidget/widgetConfig.tsx +++ b/src/widgetLibrary/DateRangeWidget/widgetConfig.tsx @@ -1,10 +1,11 @@ import { DateRangeWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" export const DATE_RANGE_WIDGET_CONFIG: WidgetConfig = { type: "DATE_RANGE_WIDGET", displayName: "dateRange", - widgetName: "widget.date_range.name", + widgetName: i18n.t("widget.date_range.name"), icon: , sessionType: "CALENDAR", w: 16, diff --git a/src/widgetLibrary/DateTimeWidget/panelConfig.tsx b/src/widgetLibrary/DateTimeWidget/panelConfig.tsx index 181338f611..c2310b6b1b 100644 --- a/src/widgetLibrary/DateTimeWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateTimeWidget/panelConfig.tsx @@ -1,26 +1,26 @@ import { HorizontalEndIcon, HorizontalStartIcon } from "@illa-design/icon" import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" - import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ { id: "date_time-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "date_time-basic-DefaultValue", - labelName: "editor.inspect.setter_label.default_value", - labelDesc: "editor.inspect.setter_tooltip.default_value", + labelName: i18n.t("editor.inspect.setter_label.default_value"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.default_value"), attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date_time-basic-date-format", - labelName: "editor.inspect.setter_label.format", - labelDesc: "editor.inspect.setter_tooltip.date_format", + labelName: i18n.t("editor.inspect.setter_label.format"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.date_format"), transComponents: { DayJS: , }, @@ -30,36 +30,36 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date_time-basic-placeholder", - labelName: "editor.inspect.setter_label.placeholder", - labelDesc: "editor.inspect.setter_tooltip.placeholder", + labelName: i18n.t("editor.inspect.setter_label.placeholder"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.placeholder"), attrName: "placeholder", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date_time-basic-max-date", - labelName: "editor.inspect.setter_label.max_date", + labelName: i18n.t("editor.inspect.setter_label.max_date"), attrName: "maxDate", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date_time-basic-min-date", - labelName: "editor.inspect.setter_label.min_date", + labelName: i18n.t("editor.inspect.setter_label.min_date"), attrName: "minDate", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date_time-basic-time-format", - labelName: "editor.inspect.setter_label.time_format", + labelName: i18n.t("editor.inspect.setter_label.time_format"), attrName: "timeFormat", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date_time-basic-minute-step", - labelName: "editor.inspect.setter_label.step_size", + labelName: i18n.t("editor.inspect.setter_label.step_size"), attrName: "minuteStep", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -68,25 +68,25 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date_time-label", - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: "date_time-label-label", - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date_time-label-caption", - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date_time-label-position", - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -96,7 +96,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date_time-label-alignment", - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -112,7 +112,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-label-labelWidth", - labelName: "editor.inspect.setter_label.label_width", + labelName: i18n.t("editor.inspect.setter_label.label_width"), attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -121,29 +121,29 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date_time-interaction", - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ // eventHandle @aoao { id: "date_time-interaction-loading", - labelName: "editor.inspect.setter_label.loading", - labelDesc: "editor.inspect.setter_tooltip.loading", + labelName: i18n.t("editor.inspect.setter_label.loading"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.loading"), attrName: "loading", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, }, { id: "date_time-interaction-disabled", - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, }, { id: "date_time-interaction-readonly", - labelName: "editor.inspect.setter_label.read_only", - labelDesc: "editor.inspect.setter_tooltip.read_only", + labelName: i18n.t("editor.inspect.setter_label.read_only"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.read_only"), attrName: "readonly", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -152,11 +152,11 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date_time-adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "date_time-adornments-showClear", - labelName: "editor.inspect.setter_label.show_clear_button", + labelName: i18n.t("editor.inspect.setter_label.show_clear_button"), attrName: "showClear", useCustomLayout: true, setterType: "DYNAMIC_SWITCH_SETTER", @@ -164,8 +164,8 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date_time-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -174,12 +174,12 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-time-validation", - groupName: "editor.inspect.setter_group.validation", + groupName: i18n.t("editor.inspect.setter_group.validation"), children: [ { id: "date-time-validation-required", - labelName: "editor.inspect.setter_label.required_field", - labelDesc: "editor.inspect.setter_tooltip.required_field", + labelName: i18n.t("editor.inspect.setter_label.required_field"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -187,16 +187,20 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-time-validation-custom", - labelName: "editor.inspect.setter_label.custom_rule", - labelDesc: "editor.inspect.setter_tooltip.custom_rule", + labelName: i18n.t("editor.inspect.setter_label.custom_rule"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.custom_rule"), setterType: "INPUT_SETTER", attrName: "customRule", expectedType: VALIDATION_TYPES.STRING, }, { id: "date-time-validation-hide-message", - labelName: "editor.inspect.setter_label.hide_validation_message", - labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", + labelName: i18n.t( + "editor.inspect.setter_label.hide_validation_message", + ), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.hide_validation_message", + ), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -206,13 +210,13 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date_time-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "date_time-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "dateTimeName" }, attrName: "hidden", useCustomLayout: true, @@ -222,19 +226,19 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date_time-style", - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "date_time-style-list", setterType: "LIST_SETTER", isSetterSingleRow: true, - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: "date_time-style-bg", - labelName: "editor.inspect.setter_label.theme_color", + labelName: i18n.t("editor.inspect.setter_label.theme_color"), setterType: "COLOR_PICKER_SETTER", attrName: "colorScheme", defaultValue: "blue", diff --git a/src/widgetLibrary/DateTimeWidget/widgetConfig.tsx b/src/widgetLibrary/DateTimeWidget/widgetConfig.tsx index 70ffc7a2ff..5a71ce1517 100644 --- a/src/widgetLibrary/DateTimeWidget/widgetConfig.tsx +++ b/src/widgetLibrary/DateTimeWidget/widgetConfig.tsx @@ -1,10 +1,11 @@ import { DateTimeWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" export const DATE_TIME_WIDGET_CONFIG: WidgetConfig = { type: "DATE_TIME_WIDGET", displayName: "dateTime", - widgetName: "widget.date_time.name", + widgetName: i18n.t("widget.date_time.name"), icon: , sessionType: "CALENDAR", w: 20, diff --git a/src/widgetLibrary/DateWidget/panelConfig.tsx b/src/widgetLibrary/DateWidget/panelConfig.tsx index 6ffa57eadf..5d8cd8c294 100644 --- a/src/widgetLibrary/DateWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateWidget/panelConfig.tsx @@ -1,26 +1,28 @@ import { HorizontalEndIcon, HorizontalStartIcon } from "@illa-design/icon" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" - import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const DATE_PANEL_CONFIG: PanelConfig[] = [ { id: "date-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "date-basic-DefaultValue", - labelName: "editor.inspect.setter_label.default_value", - labelDesc: "editor.inspect.setter_tooltip.component_default_value", + labelName: i18n.t("editor.inspect.setter_label.default_value"), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.component_default_value", + ), attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date-basic-Format", - labelName: "editor.inspect.setter_label.format", - labelDesc: "editor.inspect.setter_tooltip.date_format", + labelName: i18n.t("editor.inspect.setter_label.format"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.date_format"), transComponents: { DayJS: , }, @@ -30,22 +32,22 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-basic-placeholder", - labelName: "editor.inspect.setter_label.placeholder", - labelDesc: "editor.inspect.setter_tooltip.placeholder", + labelName: i18n.t("editor.inspect.setter_label.placeholder"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.placeholder"), attrName: "placeholder", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date-basic-max-date", - labelName: "editor.inspect.setter_label.max_date", + labelName: i18n.t("editor.inspect.setter_label.max_date"), attrName: "maxDate", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date-basic-min-date", - labelName: "editor.inspect.setter_label.min_date", + labelName: i18n.t("editor.inspect.setter_label.min_date"), attrName: "minDate", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -54,25 +56,25 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-label", - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: "date-label-label", - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date-label-caption", - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date-label-position", - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -82,7 +84,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-label-alignment", - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -98,7 +100,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-label-labelWidth", - labelName: "editor.inspect.setter_label.label_width", + labelName: i18n.t("editor.inspect.setter_label.label_width"), attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -107,21 +109,21 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-interaction", - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ // eventHandle @aoao { id: "date-interaction-disabled", - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, }, { id: "date-interaction-readonly", - labelName: "editor.inspect.setter_label.read_only", - labelDesc: "editor.inspect.setter_tooltip.read_only", + labelName: i18n.t("editor.inspect.setter_label.read_only"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.read_only"), attrName: "readOnly", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -130,19 +132,19 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "date-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "date-adornments-showClear", - labelName: "editor.inspect.setter_label.show_clear_button", + labelName: i18n.t("editor.inspect.setter_label.show_clear_button"), attrName: "showClear", useCustomLayout: true, setterType: "DYNAMIC_SWITCH_SETTER", @@ -150,8 +152,8 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-interaction-loading", - labelName: "editor.inspect.setter_label.loading", - labelDesc: "editor.inspect.setter_tooltip.loading", + labelName: i18n.t("editor.inspect.setter_label.loading"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.loading"), attrName: "loading", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -160,12 +162,12 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-validation", - groupName: "editor.inspect.setter_group.validation", + groupName: i18n.t("editor.inspect.setter_group.validation"), children: [ { id: "input-validation-required", - labelName: "editor.inspect.setter_label.required_field", - labelDesc: "editor.inspect.setter_tooltip.required_field", + labelName: i18n.t("editor.inspect.setter_label.required_field"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -173,8 +175,12 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-validation-hide-message", - labelName: "editor.inspect.setter_label.hide_validation_message", - labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", + labelName: i18n.t( + "editor.inspect.setter_label.hide_validation_message", + ), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.hide_validation_message", + ), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -184,13 +190,13 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "date-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "dateName" }, attrName: "hidden", useCustomLayout: true, @@ -200,19 +206,19 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "date-style", - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "date-style-list", setterType: "LIST_SETTER", isSetterSingleRow: true, - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: "date-style-colorScheme", - labelName: "editor.inspect.setter_label.theme_color", + labelName: i18n.t("editor.inspect.setter_label.theme_color"), setterType: "COLOR_PICKER_SETTER", attrName: "colorScheme", defaultValue: "blue", diff --git a/src/widgetLibrary/DateWidget/widgetConfig.tsx b/src/widgetLibrary/DateWidget/widgetConfig.tsx index 1ad866f23c..7f0835cfcc 100644 --- a/src/widgetLibrary/DateWidget/widgetConfig.tsx +++ b/src/widgetLibrary/DateWidget/widgetConfig.tsx @@ -1,11 +1,12 @@ import { DateWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" import dayjs from "dayjs" +import i18n from "@/i18n/config" export const DATE_WIDGET_CONFIG: WidgetConfig = { type: "DATE_WIDGET", displayName: "date", - widgetName: "widget.date.name", + widgetName: i18n.t("widget.date.name"), icon: , sessionType: "CALENDAR", w: 12, diff --git a/src/widgetLibrary/DividerWidget/panelConfig.tsx b/src/widgetLibrary/DividerWidget/panelConfig.tsx index 2c8edd1e14..6ba6a917fe 100644 --- a/src/widgetLibrary/DividerWidget/panelConfig.tsx +++ b/src/widgetLibrary/DividerWidget/panelConfig.tsx @@ -4,24 +4,24 @@ import { HorizontalStartIcon, } from "@illa-design/icon" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" - import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const DIVIDER_PANEL_CONFIG: PanelConfig[] = [ { id: "divider-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "divider-basic-text", - labelName: "editor.inspect.setter_label.text", + labelName: i18n.t("editor.inspect.setter_label.text"), attrName: "text", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "divider-basic-text-align", - labelName: "editor.inspect.setter_label.text_align", + labelName: i18n.t("editor.inspect.setter_label.text_align"), attrName: "textAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -43,13 +43,13 @@ export const DIVIDER_PANEL_CONFIG: PanelConfig[] = [ }, { id: "divider-layout", - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: "divider-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "dividerName" }, attrName: "hidden", useCustomLayout: true, @@ -59,18 +59,18 @@ export const DIVIDER_PANEL_CONFIG: PanelConfig[] = [ }, { id: "divider-style", - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "divider-style-list", setterType: "LIST_SETTER", attrName: "styles", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), useCustomLayout: true, childrenSetter: [ { id: "divider-style-text-size", - labelName: "editor.inspect.setter_label.text_size", + labelName: i18n.t("editor.inspect.setter_label.text_size"), setterType: "INPUT_SETTER", attrName: "textSize", defaultValue: "14px", diff --git a/src/widgetLibrary/DividerWidget/widgetConfig.tsx b/src/widgetLibrary/DividerWidget/widgetConfig.tsx index 9f55b299a8..d629c6a7c7 100644 --- a/src/widgetLibrary/DividerWidget/widgetConfig.tsx +++ b/src/widgetLibrary/DividerWidget/widgetConfig.tsx @@ -1,10 +1,11 @@ import { DividerWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" export const DIVIDER_WIDGET_CONFIG: WidgetConfig = { type: "DIVIDER_WIDGET", displayName: "divider", - widgetName: "widget.divider_progress.name", + widgetName: i18n.t("widget.divider_progress.name"), icon: , sessionType: "PRESENTATION", w: 16, diff --git a/src/widgetLibrary/EditableWidget/panelConfig.tsx b/src/widgetLibrary/EditableWidget/panelConfig.tsx index 3786089cc4..2ed6658ae5 100644 --- a/src/widgetLibrary/EditableWidget/panelConfig.tsx +++ b/src/widgetLibrary/EditableWidget/panelConfig.tsx @@ -1,26 +1,26 @@ import { HorizontalStartIcon, HorizontalEndIcon } from "@illa-design/icon" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" - import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "editable-text-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "editable-text-basic-defaultValue", - labelName: "editor.inspect.setter_label.default_value", - labelDesc: "editor.inspect.setter_tooltip.default_value", + labelName: i18n.t("editor.inspect.setter_label.default_value"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.default_value"), attrName: "value", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", }, { id: "editable-text-basic-placeholder", - labelName: "editor.inspect.setter_label.placeholder", - labelDesc: "editor.inspect.setter_tooltip.placeholder", + labelName: i18n.t("editor.inspect.setter_label.placeholder"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.placeholder"), attrName: "placeholder", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", @@ -29,25 +29,25 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "editable-text-label", - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: "editable-text-label-label", - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "editable-text-label-caption", - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", }, { id: "editable-text-label-position", - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -57,7 +57,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "editable-text-label-alignment", - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -73,7 +73,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-label-labelWidth", - labelName: "editor.inspect.setter_label.label_width", + labelName: i18n.t("editor.inspect.setter_label.label_width"), attrName: "labelWidth", expectedType: VALIDATION_TYPES.NUMBER, setterType: "INPUT_SETTER", @@ -82,12 +82,12 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "editable-text-interaction", - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ { id: "editable-text-interaction-disabled", - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -95,8 +95,8 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "editable-text-interaction-readonly", - labelName: "editor.inspect.setter_label.read_only", - labelDesc: "editor.inspect.setter_tooltip.read_only", + labelName: i18n.t("editor.inspect.setter_label.read_only"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.read_only"), attrName: "readOnly", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -106,11 +106,11 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "editable-text-Adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "editable-text-adornments-showClear", - labelName: "editor.inspect.setter_label.show_clear_button", + labelName: i18n.t("editor.inspect.setter_label.show_clear_button"), attrName: "allowClear", useCustomLayout: true, setterType: "DYNAMIC_SWITCH_SETTER", @@ -118,7 +118,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "editable-text-adornments-showChartCount", - labelName: "editor.inspect.setter_label.show_character_count", + labelName: i18n.t("editor.inspect.setter_label.show_character_count"), attrName: "showCharacterCount", useCustomLayout: true, setterType: "DYNAMIC_SWITCH_SETTER", @@ -126,22 +126,22 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "editable-text-adornments-prefixText", - labelName: "editor.inspect.setter_label.prefix_text", + labelName: i18n.t("editor.inspect.setter_label.prefix_text"), attrName: "prefixText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "editable-text-adornments-suffixText", - labelName: "editor.inspect.setter_label.suffix_text", + labelName: i18n.t("editor.inspect.setter_label.suffix_text"), attrName: "suffixText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "editable-text-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -150,12 +150,12 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "editable-text-validation", - groupName: "editor.inspect.setter_group.validation", + groupName: i18n.t("editor.inspect.setter_group.validation"), children: [ { id: "editable-text-validation-required", - labelName: "editor.inspect.setter_label.required_field", - labelDesc: "editor.inspect.setter_tooltip.required_field", + labelName: i18n.t("editor.inspect.setter_label.required_field"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -163,14 +163,14 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "editable-text-validation-pattern", - labelName: "editor.inspect.setter_label.pattern", + labelName: i18n.t("editor.inspect.setter_label.pattern"), setterType: "SEARCH_SELECT_SETTER", attrName: "pattern", options: ["Email", "URL", "Regex"], }, { id: "editable-text-validation-regex", - labelName: "editor.inspect.setter_label.regex", + labelName: i18n.t("editor.inspect.setter_label.regex"), setterType: "INPUT_SETTER", attrName: "regex", bindAttrName: "pattern", @@ -179,30 +179,34 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "editable-text-validation-max", - labelName: "editor.inspect.setter_label.max_length", + labelName: i18n.t("editor.inspect.setter_label.max_length"), setterType: "INPUT_SETTER", attrName: "maxLength", expectedType: VALIDATION_TYPES.NUMBER, }, { id: "editable-text-validation-min", - labelName: "editor.inspect.setter_label.min_length", + labelName: i18n.t("editor.inspect.setter_label.min_length"), setterType: "INPUT_SETTER", attrName: "minLength", expectedType: VALIDATION_TYPES.NUMBER, }, { id: "editable-text-validation-custom", - labelName: "editor.inspect.setter_label.custom_rule", - labelDesc: "editor.inspect.setter_tooltip.custom_rule", + labelName: i18n.t("editor.inspect.setter_label.custom_rule"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.custom_rule"), setterType: "INPUT_SETTER", attrName: "customRule", expectedType: VALIDATION_TYPES.STRING, }, { id: "editable-text-validation-hide-message", - labelName: "editor.inspect.setter_label.hide_validation_message", - labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", + labelName: i18n.t( + "editor.inspect.setter_label.hide_validation_message", + ), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.hide_validation_message", + ), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -212,12 +216,12 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "editable-text-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "editable-text-layout-hidden", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "editableTextName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", @@ -229,18 +233,18 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `editable-text-styles`, - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "editable-text-style", setterType: "LIST_SETTER", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: "editable-text-style-color", - labelName: "editor.inspect.setter_label.theme_color", + labelName: i18n.t("editor.inspect.setter_label.theme_color"), attrName: "colorScheme", setterType: "COLOR_PICKER_SETTER", defaultValue: "blue", diff --git a/src/widgetLibrary/EditableWidget/widgetConfig.tsx b/src/widgetLibrary/EditableWidget/widgetConfig.tsx index e641b8cbe6..c7beacba94 100644 --- a/src/widgetLibrary/EditableWidget/widgetConfig.tsx +++ b/src/widgetLibrary/EditableWidget/widgetConfig.tsx @@ -1,10 +1,11 @@ import { EditableTextWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" export const EDITABLE_TEXT_WIDGET_CONFIG: WidgetConfig = { type: "EDITABLE_TEXT_WIDGET", displayName: "editable_text", - widgetName: "widget.editable_text.name", + widgetName: i18n.t("widget.editable_text.name"), icon: , sessionType: "INPUTS", w: 10, diff --git a/src/widgetLibrary/ImageWidget/panelConfig.tsx b/src/widgetLibrary/ImageWidget/panelConfig.tsx index 6201c28264..f9b9bbba0b 100644 --- a/src/widgetLibrary/ImageWidget/panelConfig.tsx +++ b/src/widgetLibrary/ImageWidget/panelConfig.tsx @@ -1,24 +1,24 @@ import { PanelConfig } from "@/page/App/components/InspectPanel/interface" - import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const IMAGE_PANEL_CONFIG: PanelConfig[] = [ { id: "image-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "image-basic-source", attrName: "imageSrc", expectedType: VALIDATION_TYPES.STRING, - labelName: "editor.inspect.setter_label.image_source", + labelName: i18n.t("editor.inspect.setter_label.image_source"), isSetterSingleRow: true, setterType: "INPUT_SETTER", }, { id: "image-basic-alt-text", - labelName: "editor.inspect.setter_label.alt_text", - labelDesc: "editor.inspect.setter_label.alt_text_desc", + labelName: i18n.t("editor.inspect.setter_label.alt_text"), + labelDesc: i18n.t("editor.inspect.setter_label.alt_text_desc"), expectedType: VALIDATION_TYPES.STRING, attrName: "altText", setterType: "INPUT_SETTER", @@ -27,7 +27,7 @@ export const IMAGE_PANEL_CONFIG: PanelConfig[] = [ }, // { // id: "image-Interaction", - // groupName: "editor.inspect.setter_group.interaction" + // groupName: i18n.t("editor.inspect.setter_group.interaction") // children: [ // { // id: "image-interaction-event", @@ -40,12 +40,12 @@ export const IMAGE_PANEL_CONFIG: PanelConfig[] = [ // }, { id: "image-adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "image-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", @@ -54,26 +54,26 @@ export const IMAGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "image-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "image-layout-height", - labelName: "editor.inspect.setter_label.img_height", + labelName: i18n.t("editor.inspect.setter_label.img_height"), attrName: "height", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", }, { id: "image-layout-width", - labelName: "editor.inspect.setter_label.img_width", + labelName: i18n.t("editor.inspect.setter_label.img_width"), attrName: "width", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", }, { id: "image-layout-hidden", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "imageName" }, attrName: "hidden", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -84,19 +84,19 @@ export const IMAGE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "image-style", - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "date-style-list", setterType: "LIST_SETTER", isSetterSingleRow: true, - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: "image-style-radius", - labelName: "editor.inspect.setter_label.radius", + labelName: i18n.t("editor.inspect.setter_label.radius"), setterType: "INPUT_SETTER", attrName: "radius", defaultValue: "0px", diff --git a/src/widgetLibrary/ImageWidget/widgetConfig.tsx b/src/widgetLibrary/ImageWidget/widgetConfig.tsx index ac6e2d535f..aea82c98e3 100644 --- a/src/widgetLibrary/ImageWidget/widgetConfig.tsx +++ b/src/widgetLibrary/ImageWidget/widgetConfig.tsx @@ -1,10 +1,11 @@ import { ImageWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" export const IMAGE_WIDGET_CONFIG: WidgetConfig = { type: "IMAGE_WIDGET", displayName: "image", - widgetName: "widget.image.name", + widgetName: i18n.t("widget.image.name"), icon: , sessionType: "PRESENTATION", h: 16, diff --git a/src/widgetLibrary/InputWidget/panelConfig.tsx b/src/widgetLibrary/InputWidget/panelConfig.tsx index 85d6ded728..31cf618481 100644 --- a/src/widgetLibrary/InputWidget/panelConfig.tsx +++ b/src/widgetLibrary/InputWidget/panelConfig.tsx @@ -1,26 +1,26 @@ import { HorizontalStartIcon, HorizontalEndIcon } from "@illa-design/icon" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" - import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: "input-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "input-basic-defaultValue", - labelName: "editor.inspect.setter_label.default_value", - labelDesc: "editor.inspect.setter_tooltip.input_default_value", + labelName: i18n.t("editor.inspect.setter_label.default_value"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.input_default_value"), attrName: "value", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", }, { id: "input-basic-placeholder", - labelName: "editor.inspect.setter_label.placeholder", - labelDesc: "editor.inspect.setter_tooltip.placeholder", + labelName: i18n.t("editor.inspect.setter_label.placeholder"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.placeholder"), attrName: "placeholder", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", @@ -29,25 +29,25 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-label", - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: "input-label-label", - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "input-label-caption", - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", }, { id: "input-label-position", - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -57,7 +57,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-label-alignment", - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -73,7 +73,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-label-labelWidth", - labelName: "editor.inspect.setter_label.label_width", + labelName: i18n.t("editor.inspect.setter_label.label_width"), attrName: "labelWidth", expectedType: VALIDATION_TYPES.NUMBER, setterType: "INPUT_SETTER", @@ -82,12 +82,12 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-interaction", - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ { id: "input-interaction-disabled", - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -95,8 +95,8 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-interaction-readonly", - labelName: "editor.inspect.setter_label.read_only", - labelDesc: "editor.inspect.setter_tooltip.read_only", + labelName: i18n.t("editor.inspect.setter_label.read_only"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.read_only"), attrName: "readOnly", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -106,11 +106,11 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-Adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "input-adornments-showClear", - labelName: "editor.inspect.setter_label.show_clear_button", + labelName: i18n.t("editor.inspect.setter_label.show_clear_button"), attrName: "allowClear", useCustomLayout: true, setterType: "DYNAMIC_SWITCH_SETTER", @@ -118,7 +118,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-adornments-showChartCount", - labelName: "editor.inspect.setter_label.show_character_count", + labelName: i18n.t("editor.inspect.setter_label.show_character_count"), attrName: "showCharacterCount", useCustomLayout: true, setterType: "DYNAMIC_SWITCH_SETTER", @@ -126,22 +126,22 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-adornments-prefixText", - labelName: "editor.inspect.setter_label.prefix_text", + labelName: i18n.t("editor.inspect.setter_label.prefix_text"), attrName: "prefixText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "input-adornments-suffixText", - labelName: "editor.inspect.setter_label.suffix_text", + labelName: i18n.t("editor.inspect.setter_label.suffix_text"), attrName: "suffixText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "input-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -150,12 +150,12 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-validation", - groupName: "editor.inspect.setter_group.validation", + groupName: i18n.t("editor.inspect.setter_group.validation"), children: [ { id: "input-validation-required", - labelName: "editor.inspect.setter_label.required_field", - labelDesc: "editor.inspect.setter_tooltip.required_field", + labelName: i18n.t("editor.inspect.setter_label.required_field"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -163,14 +163,14 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-validation-pattern", - labelName: "editor.inspect.setter_label.pattern", + labelName: i18n.t("editor.inspect.setter_label.pattern"), setterType: "SEARCH_SELECT_SETTER", attrName: "pattern", options: ["Email", "URL", "Regex"], }, { id: "input-validation-regex", - labelName: "editor.inspect.setter_label.regex", + labelName: i18n.t("editor.inspect.setter_label.regex"), setterType: "INPUT_SETTER", attrName: "regex", bindAttrName: "pattern", @@ -179,30 +179,34 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-validation-max", - labelName: "editor.inspect.setter_label.max_length", + labelName: i18n.t("editor.inspect.setter_label.max_length"), setterType: "INPUT_SETTER", attrName: "maxLength", expectedType: VALIDATION_TYPES.NUMBER, }, { id: "input-validation-min", - labelName: "editor.inspect.setter_label.min_length", + labelName: i18n.t("editor.inspect.setter_label.min_length"), setterType: "INPUT_SETTER", attrName: "minLength", expectedType: VALIDATION_TYPES.NUMBER, }, { id: "input-validation-custom", - labelName: "editor.inspect.setter_label.custom_rule", - labelDesc: "editor.inspect.setter_tooltip.custom_rule", + labelName: i18n.t("editor.inspect.setter_label.custom_rule"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.custom_rule"), setterType: "INPUT_SETTER", attrName: "customRule", expectedType: VALIDATION_TYPES.STRING, }, { id: "input-validation-hide-message", - labelName: "editor.inspect.setter_label.hide_validation_message", - labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", + labelName: i18n.t( + "editor.inspect.setter_label.hide_validation_message", + ), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.hide_validation_message", + ), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -212,12 +216,12 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "input-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "input-layout-hidden", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", placeholder: "false", @@ -228,18 +232,18 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `input-styles`, - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "input-style", setterType: "LIST_SETTER", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: "input-style-color", - labelName: "editor.inspect.setter_label.theme_color", + labelName: i18n.t("editor.inspect.setter_label.theme_color"), attrName: "colorScheme", setterType: "COLOR_PICKER_SETTER", defaultValue: "blue", diff --git a/src/widgetLibrary/InputWidget/widgetConfig.tsx b/src/widgetLibrary/InputWidget/widgetConfig.tsx index f0e0b3f6d6..b81a7baf76 100644 --- a/src/widgetLibrary/InputWidget/widgetConfig.tsx +++ b/src/widgetLibrary/InputWidget/widgetConfig.tsx @@ -1,10 +1,11 @@ import { TextInputWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" export const INPUT_WIDGET_CONFIG: WidgetConfig = { type: "INPUT_WIDGET", displayName: "input", - widgetName: "widget.input.name", + widgetName: i18n.t("widget.input.name"), icon: , sessionType: "INPUTS", w: 12, diff --git a/src/widgetLibrary/NumberInputWidget/panelConfig.tsx b/src/widgetLibrary/NumberInputWidget/panelConfig.tsx index cf74e125da..c140d0bb52 100644 --- a/src/widgetLibrary/NumberInputWidget/panelConfig.tsx +++ b/src/widgetLibrary/NumberInputWidget/panelConfig.tsx @@ -1,56 +1,56 @@ import { HorizontalStartIcon, HorizontalEndIcon } from "@illa-design/icon" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" - import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" const widgetBaseName = "number-input" export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-BASIC`, - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: `${widgetBaseName}-basic-default-value`, - labelName: "editor.inspect.setter_label.default_value", - labelDesc: "editor.inspect.setter_tooltip.input_default_value", + labelName: i18n.t("editor.inspect.setter_label.default_value"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.input_default_value"), attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, }, { id: `${widgetBaseName}-basic-placeholder`, - labelName: "editor.inspect.setter_label.placeholder", - labelDesc: "editor.inspect.setter_tooltip.placeholder", + labelName: i18n.t("editor.inspect.setter_label.placeholder"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.placeholder"), attrName: "placeholder", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: `${widgetBaseName}-basic-decimal-place`, - labelName: "editor.inspect.setter_label.decimal_place", + labelName: i18n.t("editor.inspect.setter_label.decimal_place"), attrName: "precision", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, }, { id: `${widgetBaseName}-basic-minimum`, - labelName: "editor.inspect.setter_label.minimum", + labelName: i18n.t("editor.inspect.setter_label.minimum"), attrName: "min", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, }, { id: `${widgetBaseName}-basic-maximum `, - labelName: "editor.inspect.setter_label.maximum", + labelName: i18n.t("editor.inspect.setter_label.maximum"), attrName: "max", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, }, { id: `${widgetBaseName}-separator`, - labelName: "editor.inspect.setter_label.thousand_separator", + labelName: i18n.t("editor.inspect.setter_label.thousand_separator"), attrName: "openThousandSeparator", useCustomLayout: true, setterType: "DYNAMIC_SWITCH_SETTER", @@ -60,25 +60,25 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${widgetBaseName}-label`, - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: `${widgetBaseName}-label-label`, - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: `${widgetBaseName}-label-caption`, - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: `${widgetBaseName}-label-position`, - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -88,7 +88,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${widgetBaseName}-label-alignment`, - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -104,7 +104,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${widgetBaseName}-label-width`, - labelName: "editor.inspect.setter_label.label_width", + labelName: i18n.t("editor.inspect.setter_label.label_width"), attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -113,12 +113,12 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${widgetBaseName}-interaction`, - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ { id: `${widgetBaseName}-interaction-disabled`, - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -126,8 +126,8 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${widgetBaseName}-interaction-readonly`, - labelName: "editor.inspect.setter_label.read_only", - labelDesc: "editor.inspect.setter_tooltip.read_only", + labelName: i18n.t("editor.inspect.setter_label.read_only"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.read_only"), attrName: "readOnly", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -137,34 +137,34 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${widgetBaseName}-adornments`, - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: `${widgetBaseName}-adornments-tooltip`, - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: `${widgetBaseName}-adornments-loading`, - labelName: "editor.inspect.setter_label.loading", - labelDesc: "editor.inspect.setter_tooltip.loading", + labelName: i18n.t("editor.inspect.setter_label.loading"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.loading"), attrName: "loading", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, }, { id: `${widgetBaseName}-adornments-prefix`, - labelName: "editor.inspect.setter_label.prefix_text", + labelName: i18n.t("editor.inspect.setter_label.prefix_text"), attrName: "prefix", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: `${widgetBaseName}-adornments-suffix`, - labelName: "editor.inspect.setter_label.suffix_text", + labelName: i18n.t("editor.inspect.setter_label.suffix_text"), attrName: "suffix", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -173,12 +173,12 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${widgetBaseName}-validation`, - groupName: "editor.inspect.setter_group.validation", + groupName: i18n.t("editor.inspect.setter_group.validation"), children: [ { id: `${widgetBaseName}-validation-required`, - labelName: "editor.inspect.setter_label.required_field", - labelDesc: "editor.inspect.setter_tooltip.required_field", + labelName: i18n.t("editor.inspect.setter_label.required_field"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -186,16 +186,20 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${widgetBaseName}-validation-custom`, - labelName: "editor.inspect.setter_label.custom_rule", - labelDesc: "editor.inspect.setter_tooltip.custom_rule", + labelName: i18n.t("editor.inspect.setter_label.custom_rule"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.custom_rule"), setterType: "INPUT_SETTER", attrName: "customRule", expectedType: VALIDATION_TYPES.STRING, }, { id: `${widgetBaseName}-validation-hide-message`, - labelName: "editor.inspect.setter_label.hide_validation_message", - labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", + labelName: i18n.t( + "editor.inspect.setter_label.hide_validation_message", + ), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.hide_validation_message", + ), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -205,12 +209,12 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${widgetBaseName}-layout`, - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: `${widgetBaseName}-layout-hidden`, - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "numberInputName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", @@ -222,18 +226,18 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${widgetBaseName}-styles`, - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: `${widgetBaseName}-styles-styles`, setterType: "LIST_SETTER", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: `${widgetBaseName}-styles-color`, - labelName: "editor.inspect.setter_label.theme_color", + labelName: i18n.t("editor.inspect.setter_label.theme_color"), attrName: "colorScheme", setterType: "COLOR_PICKER_SETTER", defaultValue: "blue", diff --git a/src/widgetLibrary/NumberInputWidget/widgetConfig.tsx b/src/widgetLibrary/NumberInputWidget/widgetConfig.tsx index 4506d55b69..e9f32b4b19 100644 --- a/src/widgetLibrary/NumberInputWidget/widgetConfig.tsx +++ b/src/widgetLibrary/NumberInputWidget/widgetConfig.tsx @@ -1,9 +1,10 @@ import { NumberInputWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" export const NUMBER_INPUT_WIDGET_CONFIG: WidgetConfig = { type: "NUMBER_INPUT_WIDGET", - widgetName: "widget.number_input.name", + widgetName: i18n.t("widget.number_input.name"), displayName: "numberInput", icon: , sessionType: "INPUTS", diff --git a/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx b/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx index 0d627f77d1..fa44b59fc6 100644 --- a/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx +++ b/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx @@ -1,14 +1,14 @@ import { HorizontalStartIcon, HorizontalEndIcon } from "@illa-design/icon" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" - import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" const baseWidgetName = "radioButton" export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-options`, - groupName: "editor.inspect.setter_group.options", + groupName: i18n.t("editor.inspect.setter_group.options"), children: [ { id: `${baseWidgetName}-options-mode`, @@ -35,20 +35,20 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ childrenSetter: [ { id: "segmented-control-options-label", - labelName: "Label", + labelName: i18n.t("Label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "segmented-control-options-value", - labelName: "Value", + labelName: i18n.t("Value"), attrName: "value", setterType: "INPUT_SETTER", }, { id: "segmented-control-options-disabled", - labelName: "Disabled", + labelName: i18n.t("Disabled"), attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -57,7 +57,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-options-data-sources`, - labelName: "editor.inspect.setter_label.data_sources", + labelName: i18n.t("editor.inspect.setter_label.data_sources"), attrName: "dataSources", setterType: "INPUT_SETTER", bindAttrName: "optionConfigureMode", @@ -67,7 +67,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: `radioGroup-options-mapped`, - labelName: "editor.inspect.setter_label.mapped_option", + labelName: i18n.t("editor.inspect.setter_label.mapped_option"), useCustomLayout: true, attrName: "mappedOption", setterType: "OPTION_MAPPED_SETTER", @@ -76,21 +76,21 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ childrenSetter: [ { id: `radioGroup-mappedOption-labels`, - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "labels", setterType: "OPTION_MAPPED_INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, }, { id: `radioGroup-mappedOption-values`, - labelName: "editor.inspect.setter_label.value", + labelName: i18n.t("editor.inspect.setter_label.value"), attrName: "values", setterType: "OPTION_MAPPED_INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, }, { id: `radioGroup-mappedOption-disables`, - labelName: "editor.inspect.setter_label.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), attrName: "disables", setterType: "OPTION_MAPPED_INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, @@ -99,8 +99,10 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-options-default-value`, - labelName: "editor.inspect.setter_label.default_value", - labelDesc: "editor.inspect.setter_tooltip.component_default_value", + labelName: i18n.t("editor.inspect.setter_label.default_value"), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.component_default_value", + ), attrName: "value", setterType: "INPUT_SETTER", }, @@ -108,25 +110,25 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-label`, - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: `${baseWidgetName}-label-label`, - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: `${baseWidgetName}-label-caption`, - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: `${baseWidgetName}-label-position`, - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -136,7 +138,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-label-alignment`, - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -152,7 +154,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-label-label-width`, - labelName: "editor.inspect.setter_label.label_width", + labelName: i18n.t("editor.inspect.setter_label.label_width"), attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -161,12 +163,12 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-validation`, - groupName: "editor.inspect.setter_group.validation", + groupName: i18n.t("editor.inspect.setter_group.validation"), children: [ { id: `${baseWidgetName}-validation-required`, - labelName: "editor.inspect.setter_label.required_field", - labelDesc: "editor.inspect.setter_tooltip.required_field", + labelName: i18n.t("editor.inspect.setter_label.required_field"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -174,8 +176,12 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-validation-hide-message`, - labelName: "editor.inspect.setter_label.hide_validation_message", - labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", + labelName: i18n.t( + "editor.inspect.setter_label.hide_validation_message", + ), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.hide_validation_message", + ), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -185,12 +191,12 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-interaction`, - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ { id: `${baseWidgetName}-interaction-disabled`, - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -200,12 +206,12 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-adornments`, - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: `${baseWidgetName}-adornments-tooltip`, - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -214,12 +220,12 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-layout`, - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: `${baseWidgetName}-layout-hidden`, - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "radioButtonName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", @@ -231,18 +237,18 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-style`, - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: `${baseWidgetName}-style-styles`, setterType: "LIST_SETTER", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: `${baseWidgetName}-style-color`, - labelName: "editor.inspect.setter_label.theme_color", + labelName: i18n.t("editor.inspect.setter_label.theme_color"), attrName: "colorScheme", setterType: "COLOR_PICKER_SETTER", defaultValue: "blue", diff --git a/src/widgetLibrary/RadioButtonWidget/widgetConfig.tsx b/src/widgetLibrary/RadioButtonWidget/widgetConfig.tsx index 3c2d0dc93d..f50c47a331 100644 --- a/src/widgetLibrary/RadioButtonWidget/widgetConfig.tsx +++ b/src/widgetLibrary/RadioButtonWidget/widgetConfig.tsx @@ -1,10 +1,11 @@ import { RadioButtonWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" import { v4 } from "uuid" +import i18n from "@/i18n/config" export const RADIO_BUTTON_WIDGET_CONFIG: WidgetConfig = { type: "RADIO_BUTTON_WIDGET", - widgetName: "widget.radio_button.name", + widgetName: i18n.t("widget.radio_button.name"), displayName: "radioButton", w: 16, h: 5, diff --git a/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx b/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx index a9896d130c..fbf8ae4d61 100644 --- a/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx +++ b/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx @@ -1,18 +1,13 @@ -import { - HorizontalStartIcon, - HorizontalEndIcon, - HorizontalFullIcon, - VerticalCenterIcon, -} from "@illa-design/icon" +import { HorizontalStartIcon, HorizontalEndIcon } from "@illa-design/icon" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" - import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: "radioGroup-options", - groupName: "editor.inspect.setter_group.options", + groupName: i18n.t("editor.inspect.setter_group.options"), children: [ { id: "radioGroup-options-mode", @@ -39,20 +34,20 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ childrenSetter: [ { id: "radioGroup-options-label", - labelName: "Label", + labelName: i18n.t("Label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "radioGroup-options-value", - labelName: "Value", + labelName: i18n.t("Value"), attrName: "value", setterType: "INPUT_SETTER", }, { id: "radioGroup-options-disabled", - labelName: "Disabled", + labelName: i18n.t("Disabled"), attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -61,7 +56,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: "radioGroup-option-data-sources", - labelName: "editor.inspect.setter_label.data_sources", + labelName: i18n.t("editor.inspect.setter_label.data_sources"), attrName: "dataSources", setterType: "INPUT_SETTER", bindAttrName: "optionConfigureMode", @@ -71,7 +66,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `radioGroup-options-mapped`, - labelName: "editor.inspect.setter_label.mapped_option", + labelName: i18n.t("editor.inspect.setter_label.mapped_option"), useCustomLayout: true, attrName: "mappedOption", setterType: "OPTION_MAPPED_SETTER", @@ -80,21 +75,21 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ childrenSetter: [ { id: `radioGroup-mappedOption-labels`, - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "labels", setterType: "OPTION_MAPPED_INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, }, { id: `radioGroup-mappedOption-values`, - labelName: "editor.inspect.setter_label.value", + labelName: i18n.t("editor.inspect.setter_label.value"), attrName: "values", setterType: "OPTION_MAPPED_INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, }, { id: `radioGroup-mappedOption-disables`, - labelName: "editor.inspect.setter_label.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), attrName: "disables", setterType: "OPTION_MAPPED_INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, @@ -103,8 +98,10 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: "radioGroup-basic-defaultValue", - labelName: "editor.inspect.setter_label.default_value", - labelDesc: "editor.inspect.setter_tooltip.component_default_value", + labelName: i18n.t("editor.inspect.setter_label.default_value"), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.component_default_value", + ), attrName: "value", setterType: "INPUT_SETTER", }, @@ -112,25 +109,25 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: "radioGroup-label", - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: "radioGroup-label-label", - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "radioGroup-label-caption", - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "radioGroup-label-position", - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -140,7 +137,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: "radioGroup-label-alignment", - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -156,7 +153,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: "radioGroup-label-labelWidth", - labelName: "editor.inspect.setter_label.label_width", + labelName: i18n.t("editor.inspect.setter_label.label_width"), attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -165,12 +162,12 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: "radioGroup-validation", - groupName: "editor.inspect.setter_group.validation", + groupName: i18n.t("editor.inspect.setter_group.validation"), children: [ { id: "radioGroup-validation-required", - labelName: "editor.inspect.setter_label.required_field", - labelDesc: "editor.inspect.setter_tooltip.required_field", + labelName: i18n.t("editor.inspect.setter_label.required_field"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -178,8 +175,12 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: "radioGroup-validation-hide-message", - labelName: "editor.inspect.setter_label.hide_validation_message", - labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", + labelName: i18n.t( + "editor.inspect.setter_label.hide_validation_message", + ), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.hide_validation_message", + ), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -189,12 +190,12 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: "radioGroup-interaction", - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ { id: "radioGroup-interaction-disabled", - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -204,12 +205,12 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: "radioGroup-Adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "radioGroup-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -218,12 +219,12 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: "radioGroup-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "radioGroup-layout-hidden", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "radioGroupName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", @@ -233,7 +234,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: "radioGroup-style-direction", - labelName: "editor.inspect.setter_label.group_layout", + labelName: i18n.t("editor.inspect.setter_label.group_layout"), setterType: "RADIO_GROUP_SETTER", attrName: "direction", options: [ @@ -251,18 +252,18 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ }, { id: `radioGroup-styles`, - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "radioGroup-style", setterType: "LIST_SETTER", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: "radioGroup-style-color", - labelName: "editor.inspect.setter_label.theme_color", + labelName: i18n.t("editor.inspect.setter_label.theme_color"), attrName: "colorScheme", setterType: "COLOR_PICKER_SETTER", defaultValue: "blue", diff --git a/src/widgetLibrary/RadioGroupWidget/widgetConfig.tsx b/src/widgetLibrary/RadioGroupWidget/widgetConfig.tsx index de0c2fecb4..5985653b29 100644 --- a/src/widgetLibrary/RadioGroupWidget/widgetConfig.tsx +++ b/src/widgetLibrary/RadioGroupWidget/widgetConfig.tsx @@ -1,11 +1,12 @@ import { RadioGroupWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" import { v4 } from "uuid" +import i18n from "@/i18n/config" export const RADIO_GROUP_WIDGET_CONFIG: WidgetConfig = { displayName: "radioGroup", type: "RADIO_GROUP_WIDGET", - widgetName: "widget.radio_group.name", + widgetName: i18n.t("widget.radio_group.name"), icon: , sessionType: "SELECT", w: 20, diff --git a/src/widgetLibrary/RateWidget/panelConfig.tsx b/src/widgetLibrary/RateWidget/panelConfig.tsx index 4c430ac14e..d2f8df3183 100644 --- a/src/widgetLibrary/RateWidget/panelConfig.tsx +++ b/src/widgetLibrary/RateWidget/panelConfig.tsx @@ -1,25 +1,27 @@ import { HorizontalEndIcon, HorizontalStartIcon } from "@illa-design/icon" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" import { HeartIcon, StarIcon } from "@illa-design/icon" -import { globalColor, illaPrefix } from "@illa-design/theme" import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const RATE_PANEL_CONFIG: PanelConfig[] = [ { id: "rate-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "rate-basic-DefaultValue", - labelName: "editor.inspect.setter_label.default_value", - labelDesc: "editor.inspect.setter_tooltip.component_default_value", + labelName: i18n.t("editor.inspect.setter_label.default_value"), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.component_default_value", + ), attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, }, { id: "rate-basic-icon", - labelName: "editor.inspect.setter_label.icon", + labelName: i18n.t("editor.inspect.setter_label.icon"), attrName: "icon", setterType: "RADIO_GROUP_SETTER", options: [ @@ -35,20 +37,20 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "rate-basic-max-rate", - labelName: "editor.inspect.setter_label.max_count", + labelName: i18n.t("editor.inspect.setter_label.max_count"), attrName: "maxCount", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, }, { id: "rate-basic-allow-half", - labelName: "editor.inspect.setter_label.allow_half", + labelName: i18n.t("editor.inspect.setter_label.allow_half"), attrName: "allowHalf", setterType: "SWITCH_SETTER", }, { id: "rate-basic-allow-clear", - labelName: "editor.inspect.setter_label.allow_clear", + labelName: i18n.t("editor.inspect.setter_label.allow_clear"), attrName: "allowClear", setterType: "SWITCH_SETTER", }, @@ -56,25 +58,25 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "rate-label", - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: "rate-label-label", - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "rate-label-caption", - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "rate-label-position", - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -84,7 +86,7 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "rate-label-alignment", - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -100,7 +102,7 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-label-labelWidth", - labelName: "editor.inspect.setter_label.label_width", + labelName: i18n.t("editor.inspect.setter_label.label_width"), attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -109,21 +111,21 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "rate-interaction", - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ // eventHandle @aoao { id: "rate-interaction-disabled", - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, }, { id: "rate-interaction-readonly", - labelName: "editor.inspect.setter_label.read_only", - labelDesc: "editor.inspect.setter_tooltip.read_only", + labelName: i18n.t("editor.inspect.setter_label.read_only"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.read_only"), attrName: "readonly", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -132,12 +134,12 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "rate-adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "rate-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -146,12 +148,12 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "rate-validation", - groupName: "editor.inspect.setter_group.validation", + groupName: i18n.t("editor.inspect.setter_group.validation"), children: [ { id: "rate-validation-required", - labelName: "editor.inspect.setter_label.required_field", - labelDesc: "editor.inspect.setter_tooltip.required_field", + labelName: i18n.t("editor.inspect.setter_label.required_field"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -159,16 +161,20 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "rate-validation-custom", - labelName: "editor.inspect.setter_label.custom_rule", - labelDesc: "editor.inspect.setter_tooltip.custom_rule", + labelName: i18n.t("editor.inspect.setter_label.custom_rule"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.custom_rule"), setterType: "INPUT_SETTER", attrName: "customRule", expectedType: VALIDATION_TYPES.STRING, }, { id: "rate-validation-hide-message", - labelName: "editor.inspect.setter_label.hide_validation_message", - labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", + labelName: i18n.t( + "editor.inspect.setter_label.hide_validation_message", + ), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.hide_validation_message", + ), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -178,13 +184,13 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "rate-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "rate-layout-hidden", setterType: "DYNAMIC_SWITCH_SETTER", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "rateName" }, useCustomLayout: true, attrName: "hidden", diff --git a/src/widgetLibrary/RateWidget/widgetConfig.tsx b/src/widgetLibrary/RateWidget/widgetConfig.tsx index 795599fd5f..a06d02671b 100644 --- a/src/widgetLibrary/RateWidget/widgetConfig.tsx +++ b/src/widgetLibrary/RateWidget/widgetConfig.tsx @@ -1,10 +1,11 @@ import { RateWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" export const RATE_WIDGET_CONFIG: WidgetConfig = { type: "RATE_WIDGET", displayName: "rate", - widgetName: "widget.rate.name", + widgetName: i18n.t("widget.rate.name"), icon: , sessionType: "PRESENTATION", w: 12, diff --git a/src/widgetLibrary/SelectWidget/panelConfig.tsx b/src/widgetLibrary/SelectWidget/panelConfig.tsx index 11b17a1cb0..73d95af383 100644 --- a/src/widgetLibrary/SelectWidget/panelConfig.tsx +++ b/src/widgetLibrary/SelectWidget/panelConfig.tsx @@ -1,13 +1,13 @@ import { HorizontalStartIcon, HorizontalEndIcon } from "@illa-design/icon" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" - import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const SELECT_PANEL_CONFIG: PanelConfig[] = [ { id: "select-options", - groupName: "editor.inspect.setter_group.options", + groupName: i18n.t("editor.inspect.setter_group.options"), children: [ { id: "select-options-mode", @@ -34,20 +34,20 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ childrenSetter: [ { id: "select-options-label", - labelName: "Label", + labelName: i18n.t("Label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "select-options-value", - labelName: "Value", + labelName: i18n.t("Value"), attrName: "value", setterType: "INPUT_SETTER", }, { id: "select-options-disabled", - labelName: "Disabled", + labelName: i18n.t("Disabled"), attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -56,7 +56,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-option-data-sources", - labelName: "editor.inspect.setter_label.data_sources", + labelName: i18n.t("editor.inspect.setter_label.data_sources"), attrName: "dataSources", setterType: "INPUT_SETTER", bindAttrName: "optionConfigureMode", @@ -66,8 +66,8 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-option-mapped", - labelName: "editor.inspect.setter_label.mapped_option", - labelDesc: "editor.inspect.setter_tooltip.map_data_option", + labelName: i18n.t("editor.inspect.setter_label.mapped_option"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.map_data_option"), useCustomLayout: true, attrName: "mappedOption", setterType: "OPTION_MAPPED_SETTER", @@ -76,21 +76,21 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ childrenSetter: [ { id: `select-mappedOption-labels`, - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "labels", setterType: "OPTION_MAPPED_INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, }, { id: `select-mappedOption-values`, - labelName: "editor.inspect.setter_label.value", + labelName: i18n.t("editor.inspect.setter_label.value"), attrName: "values", setterType: "OPTION_MAPPED_INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, }, { id: `select-mappedOption-disables`, - labelName: "editor.inspect.setter_label.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), attrName: "disables", setterType: "OPTION_MAPPED_INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, @@ -99,15 +99,17 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-basic-defaultValue", - labelName: "editor.inspect.setter_label.default_value", - labelDesc: "editor.inspect.setter_tooltip.component_default_value", + labelName: i18n.t("editor.inspect.setter_label.default_value"), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.component_default_value", + ), attrName: "value", setterType: "INPUT_SETTER", }, { id: "select-basic-placeholder", - labelName: "editor.inspect.setter_label.placeholder", - labelDesc: "editor.inspect.setter_tooltip.placeholder", + labelName: i18n.t("editor.inspect.setter_label.placeholder"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.placeholder"), attrName: "placeholder", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -116,25 +118,25 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-label", - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: "select-label-label", - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "select-label-caption", - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "select-label-position", - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -144,7 +146,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-label-alignment", - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -160,7 +162,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-label-labelWidth", - labelName: "editor.inspect.setter_label.label_width", + labelName: i18n.t("editor.inspect.setter_label.label_width"), attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, @@ -169,12 +171,12 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-validation", - groupName: "editor.inspect.setter_group.validation", + groupName: i18n.t("editor.inspect.setter_group.validation"), children: [ { id: "select-validation-required", - labelName: "editor.inspect.setter_label.required_field", - labelDesc: "editor.inspect.setter_tooltip.required_field", + labelName: i18n.t("editor.inspect.setter_label.required_field"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -182,8 +184,12 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-validation-hide-message", - labelName: "editor.inspect.setter_label.hide_validation_message", - labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", + labelName: i18n.t( + "editor.inspect.setter_label.hide_validation_message", + ), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.hide_validation_message", + ), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -193,12 +199,12 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-interaction", - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ { id: "select-interaction-disabled", - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -206,8 +212,8 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-interaction-readonly", - labelName: "editor.inspect.setter_label.read_only", - labelDesc: "editor.inspect.setter_tooltip.read_only", + labelName: i18n.t("editor.inspect.setter_label.read_only"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.read_only"), attrName: "readOnly", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -217,11 +223,11 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-Adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "select-adornments-showClear", - labelName: "editor.inspect.setter_label.show_clear_button", + labelName: i18n.t("editor.inspect.setter_label.show_clear_button"), attrName: "showClear", useCustomLayout: true, setterType: "DYNAMIC_SWITCH_SETTER", @@ -229,22 +235,22 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-adornments-prefixText", - labelName: "editor.inspect.setter_label.prefix_text", + labelName: i18n.t("editor.inspect.setter_label.prefix_text"), attrName: "prefixText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "select-adornments-suffixText", - labelName: "editor.inspect.setter_label.suffix_text", + labelName: i18n.t("editor.inspect.setter_label.suffix_text"), attrName: "suffixText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "select-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -253,12 +259,12 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "select-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "select-layout-hidden", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "selectName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", @@ -270,18 +276,18 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ }, { id: `select-style`, - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: `select-style-styles`, setterType: "LIST_SETTER", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: `select-style-color`, - labelName: "editor.inspect.setter_label.theme_color", + labelName: i18n.t("editor.inspect.setter_label.theme_color"), attrName: "colorScheme", setterType: "COLOR_PICKER_SETTER", defaultValue: "blue", diff --git a/src/widgetLibrary/SelectWidget/widgetConfig.tsx b/src/widgetLibrary/SelectWidget/widgetConfig.tsx index 86d7b07275..25be4bafa8 100644 --- a/src/widgetLibrary/SelectWidget/widgetConfig.tsx +++ b/src/widgetLibrary/SelectWidget/widgetConfig.tsx @@ -6,7 +6,7 @@ import i18n from "@/i18n/config" export const SELECT_WIDGET_CONFIG: WidgetConfig = { type: "SELECT_WIDGET", displayName: "select", - widgetName: "widget.select.name", + widgetName: i18n.t("widget.select.name"), icon: , sessionType: "SELECT", w: 12, diff --git a/src/widgetLibrary/SwitchWidget/panelConfig.tsx b/src/widgetLibrary/SwitchWidget/panelConfig.tsx index a53bf55195..61d1b0634d 100644 --- a/src/widgetLibrary/SwitchWidget/panelConfig.tsx +++ b/src/widgetLibrary/SwitchWidget/panelConfig.tsx @@ -1,18 +1,18 @@ import { HorizontalStartIcon, HorizontalEndIcon } from "@illa-design/icon" import { PanelConfig } from "@/page/App/components/InspectPanel/interface" import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" - import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ { id: "switch-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "switch-basic-defaultValue", - labelName: "editor.inspect.setter_label.default_value", - labelDesc: "editor.inspect.setter_tooltip.switch_default_value", + labelName: i18n.t("editor.inspect.setter_label.default_value"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.switch_default_value"), attrName: "value", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -22,25 +22,25 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "switch-label", - groupName: "editor.inspect.setter_group.label", + groupName: i18n.t("editor.inspect.setter_group.label"), children: [ { id: "switch-label-label", - labelName: "editor.inspect.setter_label.label", + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "label", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "switch-label-caption", - labelName: "editor.inspect.setter_label.caption", + labelName: i18n.t("editor.inspect.setter_label.caption"), attrName: "labelCaption", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: "switch-label-position", - labelName: "editor.inspect.setter_label.label_position", + labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", options: [ @@ -50,7 +50,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "switch-label-alignment", - labelName: "editor.inspect.setter_label.label_alignment", + labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", options: [ @@ -68,54 +68,54 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "switch-interaction", - groupName: "editor.inspect.setter_group.interaction", + groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ { id: "switch-interaction-event-handler", attrName: "events", - labelName: "editor.inspect.setter_label.event_handler", + labelName: i18n.t("editor.inspect.setter_label.event_handler"), setterType: "EVENT_HANDLER_SETTER", useCustomLayout: true, childrenSetter: [ { id: "event", - labelName: "editor.inspect.setter_label.event", + labelName: i18n.t("editor.inspect.setter_label.event"), setterType: "BASE_SELECT_SETTER", attrName: "eventType", options: [{ label: "Change", value: "onChange" }], }, { id: "action", - labelName: "editor.inspect.setter_label.action", - labelDesc: "editor.inspect.setter_tooltip.action", + labelName: i18n.t("editor.inspect.setter_label.action"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.action"), setterType: "EVENT_ACTION_SELECT_SETTER", attrName: "actionType", options: [ { - label: "editor.inspect.setter_label.trigger_query", + label: i18n.t("editor.inspect.setter_label.trigger_query"), value: "datasource", }, { - label: "editor.inspect.setter_label.control_component", + label: i18n.t("editor.inspect.setter_label.control_component"), value: "widget", }, { - label: "editor.inspect.setter_label.run_script", + label: i18n.t("editor.inspect.setter_label.run_script"), value: "script", }, { - label: "editor.inspect.setter_label.go_to_url", + label: i18n.t("editor.inspect.setter_label.go_to_url"), value: "openUrl", }, { - label: "editor.inspect.setter_label.show_notification", + label: i18n.t("editor.inspect.setter_label.show_notification"), value: "showNotification", }, ], }, { id: "query", - labelName: "Query", + labelName: i18n.t("Query"), setterType: "EVENT_TARGET_ACTION_SELECT_SETTER", attrName: "queryID", bindAttrName: "actionType", @@ -123,7 +123,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "actionMethod", - labelName: "Action Method", + labelName: i18n.t("Action Method"), setterType: "BASE_SELECT_SETTER", attrName: "widgetMethod", bindAttrName: "queryID", @@ -133,7 +133,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "component", - labelName: "Component", + labelName: i18n.t("Component"), setterType: "EVENT_TARGET_SELECT_SETTER", attrName: "widgetID", bindAttrName: "actionType", @@ -141,7 +141,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "Method", - labelName: "Method", + labelName: i18n.t("Method"), setterType: "EVENT_WIDGET_METHOD_SELECT_SETTER", attrName: "widgetMethod", bindAttrName: "widgetID", @@ -149,7 +149,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "Value", - labelName: "Value", + labelName: i18n.t("Value"), setterType: "INPUT_SETTER", attrName: "widgetTargetValue", bindAttrName: "widgetMethod", @@ -157,7 +157,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "disabled", - labelName: "editor.inspect.setter_label.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, attrName: "disabled", @@ -175,7 +175,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "URL", - labelName: "URL", + labelName: i18n.t("URL"), setterType: "INPUT_SETTER", attrName: "url", bindAttrName: "actionType", @@ -184,7 +184,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "newTab", - labelName: "New Tab", + labelName: i18n.t("New Tab"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, attrName: "newTab", @@ -194,7 +194,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "title", - labelName: "Title", + labelName: i18n.t("Title"), setterType: "INPUT_SETTER", attrName: "title", bindAttrName: "actionType", @@ -203,7 +203,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "description", - labelName: "Description", + labelName: i18n.t("Description"), setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, attrName: "description", @@ -212,7 +212,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "notification-type", - labelName: "Type", + labelName: i18n.t("Type"), setterType: "BASE_SELECT_SETTER", attrName: "notificationType", bindAttrName: "actionType", @@ -226,7 +226,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "duration", - labelName: "Duration", + labelName: i18n.t("Duration"), setterType: "INPUT_SETTER", attrName: "duration", bindAttrName: "actionType", @@ -235,7 +235,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "enabled", - labelName: "Only run when", + labelName: i18n.t("Only run when"), setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, attrName: "enabled", @@ -244,8 +244,8 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "switch-interaction-disabled", - labelName: "editor.inspect.setter_label.disabled", - labelDesc: "editor.inspect.setter_tooltip.disabled", + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), attrName: "disabled", setterType: "INPUT_SETTER", placeholder: "{{false}}", @@ -255,12 +255,12 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "switch-Adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "switch-adornments-tooltip", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -269,12 +269,12 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "switch-validation", - groupName: "editor.inspect.setter_group.validation", + groupName: i18n.t("editor.inspect.setter_group.validation"), children: [ { id: "switch-validation-required", - labelName: "editor.inspect.setter_label.required_field", - labelDesc: "editor.inspect.setter_tooltip.required_field", + labelName: i18n.t("editor.inspect.setter_label.required_field"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -282,8 +282,12 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "switch-validation-hide-message", - labelName: "editor.inspect.setter_label.hide_validation_message", - labelDesc: "editor.inspect.setter_tooltip.hide_validation_message", + labelName: i18n.t( + "editor.inspect.setter_label.hide_validation_message", + ), + labelDesc: i18n.t( + "editor.inspect.setter_tooltip.hide_validation_message", + ), setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, useCustomLayout: true, @@ -293,12 +297,12 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: "switch-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "switch-layout-hidden", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "switchName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", @@ -310,18 +314,18 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, { id: `switch-style`, - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "switch-style", setterType: "LIST_SETTER", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: "switch-style-radius", - labelName: "editor.inspect.setter_label.theme_color", + labelName: i18n.t("editor.inspect.setter_label.theme_color"), attrName: "colorScheme", setterType: "COLOR_PICKER_SETTER", defaultValue: "blue", diff --git a/src/widgetLibrary/SwitchWidget/widgetConfig.tsx b/src/widgetLibrary/SwitchWidget/widgetConfig.tsx index 5463f31101..510eba37ce 100644 --- a/src/widgetLibrary/SwitchWidget/widgetConfig.tsx +++ b/src/widgetLibrary/SwitchWidget/widgetConfig.tsx @@ -4,7 +4,7 @@ import i18n from "@/i18n/config" export const SWITCH_WIDGET_CONFIG: WidgetConfig = { displayName: "switch", - widgetName: "widget.switch.name", + widgetName: i18n.t("widget.switch.name"), h: 5, w: 10, type: "SWITCH_WIDGET", diff --git a/src/widgetLibrary/TextWidget/panelConfig.tsx b/src/widgetLibrary/TextWidget/panelConfig.tsx index b26381f45c..5c9b5a1842 100644 --- a/src/widgetLibrary/TextWidget/panelConfig.tsx +++ b/src/widgetLibrary/TextWidget/panelConfig.tsx @@ -9,16 +9,17 @@ import { import { PanelConfig } from "@/page/App/components/InspectPanel/interface" import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" export const TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "text-basic", - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: "text-basic-inputModal", - labelName: "editor.inspect.setter_label.value", - labelDesc: "editor.inspect.setter_tooltip.text_value", + labelName: i18n.t("editor.inspect.setter_label.value"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.text_value"), attrName: "disableMarkdown", setterType: "RADIO_GROUP_SETTER", options: [ @@ -37,12 +38,12 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "text-adornments", - groupName: "editor.inspect.setter_group.adornments", + groupName: i18n.t("editor.inspect.setter_group.adornments"), children: [ { id: "text-adornments-startAdornment", - labelName: "editor.inspect.setter_label.tooltip", - labelDesc: "editor.inspect.setter_tooltip.tooltip", + labelName: i18n.t("editor.inspect.setter_label.tooltip"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"), attrName: "tooltipText", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -51,11 +52,11 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "text-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "text-layout-col", - labelName: "editor.inspect.setter_label.horizontal_alignment", + labelName: i18n.t("editor.inspect.setter_label.horizontal_alignment"), attrName: "horizontalAlign", setterType: "RADIO_GROUP_SETTER", isSetterSingleRow: true, @@ -76,7 +77,7 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "text-layout-row", - labelName: "editor.inspect.setter_label.vertical_alignment", + labelName: i18n.t("editor.inspect.setter_label.vertical_alignment"), setterType: "RADIO_GROUP_SETTER", attrName: "verticalAlign", isSetterSingleRow: true, @@ -97,8 +98,8 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "text-layout-hidden", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "textName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", @@ -109,18 +110,18 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "text-style", - groupName: "editor.inspect.setter_group.style", + groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { id: "text-style-list", setterType: "LIST_SETTER", - labelName: "editor.inspect.setter_label.styles", + labelName: i18n.t("editor.inspect.setter_label.styles"), attrName: "styles", useCustomLayout: true, childrenSetter: [ { id: "text-style-color", - labelName: "editor.inspect.setter_label.text", + labelName: i18n.t("editor.inspect.setter_label.text"), setterType: "COLOR_PICKER_SETTER", attrName: "textColor", defaultValue: "#787e85ff", @@ -128,7 +129,7 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ }, { id: "text-style-link-color", - labelName: "editor.inspect.setter_label.links_color", + labelName: i18n.t("editor.inspect.setter_label.links_color"), setterType: "COLOR_PICKER_SETTER", attrName: "linkColor", defaultValue: "#1e6fffff", diff --git a/src/widgetLibrary/TextWidget/widgetConfig.tsx b/src/widgetLibrary/TextWidget/widgetConfig.tsx index dd09ef42da..1894098e80 100644 --- a/src/widgetLibrary/TextWidget/widgetConfig.tsx +++ b/src/widgetLibrary/TextWidget/widgetConfig.tsx @@ -1,9 +1,10 @@ import { TextWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" export const TEXT_WIDGET_CONFIG: WidgetConfig = { displayName: "text", - widgetName: "widget.text.name", + widgetName: i18n.t("widget.text.name"), h: 5, w: 12, type: "TEXT_WIDGET", diff --git a/src/widgetLibrary/TimelineWidget/panelConfig.tsx b/src/widgetLibrary/TimelineWidget/panelConfig.tsx index 4f2f60f9bc..d475d324ca 100644 --- a/src/widgetLibrary/TimelineWidget/panelConfig.tsx +++ b/src/widgetLibrary/TimelineWidget/panelConfig.tsx @@ -1,16 +1,16 @@ import { PanelConfig } from "@/page/App/components/InspectPanel/interface" - import { VALIDATION_TYPES } from "@/utils/validationFactory" +import i18n from "@/i18n/config" const baseWidgetName = "timeline" export const TIMELINE_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-basic`, - groupName: "editor.inspect.setter_group.basic", + groupName: i18n.t("editor.inspect.setter_group.basic"), children: [ { id: `${baseWidgetName}-items`, - labelName: "editor.inspect.setter_label.items", + labelName: i18n.t("editor.inspect.setter_label.items"), attrName: "items", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.ARRAY, @@ -18,8 +18,8 @@ export const TIMELINE_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-direction`, - labelName: "editor.inspect.setter_label.direction", - labelDesc: "editor.inspect.setter_tooltip.timeline_direction", + labelName: i18n.t("editor.inspect.setter_label.direction"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.timeline_direction"), setterType: "RADIO_GROUP_SETTER", attrName: "direction", options: [ @@ -32,7 +32,7 @@ export const TIMELINE_PANEL_CONFIG: PanelConfig[] = [ }, { id: `${baseWidgetName}-pending`, - labelName: "editor.inspect.setter_label.pending", + labelName: i18n.t("editor.inspect.setter_label.pending"), attrName: "pending", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -41,12 +41,12 @@ export const TIMELINE_PANEL_CONFIG: PanelConfig[] = [ }, { id: "text-layout", - groupName: "editor.inspect.setter_group.layout", + groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ { id: "text-layout-hidden", - labelName: "editor.inspect.setter_label.hidden", - labelDesc: "editor.inspect.setter_tooltip.hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), labelDescOption: { name: "timelineName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", diff --git a/src/widgetLibrary/TimelineWidget/widgetConfig.tsx b/src/widgetLibrary/TimelineWidget/widgetConfig.tsx index bb98097112..a475e66779 100644 --- a/src/widgetLibrary/TimelineWidget/widgetConfig.tsx +++ b/src/widgetLibrary/TimelineWidget/widgetConfig.tsx @@ -1,9 +1,10 @@ import { TimelineWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" export const TIMELINE_WIDGET_CONFIG: WidgetConfig = { type: "TIMELINE_WIDGET", - widgetName: "widget.timeline.name", + widgetName: i18n.t("widget.timeline.name"), displayName: "timeline", icon: , sessionType: "PRESENTATION", diff --git a/src/widgetLibrary/componentListBuilder.tsx b/src/widgetLibrary/componentListBuilder.tsx index cdbad8fc6a..65ba4fbe1a 100644 --- a/src/widgetLibrary/componentListBuilder.tsx +++ b/src/widgetLibrary/componentListBuilder.tsx @@ -4,18 +4,19 @@ import { NewTypeMapComponent, } from "@/page/App/components/WidgetPickerEditor/components/ComponentPanel/interface" import { WidgetCardInfo, WidgetConfig } from "./interface" +import i18n from "@/i18n/config" export type SessionType = keyof typeof sessionTypeMapSessionNameKey -const sessionTypeMapSessionNameKey = { - COMMON: "editor.widget_picker.sessions.commonly", - INPUTS: "editor.widget_picker.sessions.inputs", - SELECT: "editor.widget_picker.sessions.selects", - CALENDAR: "editor.widget_picker.sessions.calendar", - PRESENTATION: "editor.widget_picker.sessions.presentation", - DATE: "editor.widget_picker.sessions.data", - CONTAINER: "editor.widget_picker.sessions.container", - NAVIGATION: "editor.widget_picker.sessions.navigation", +export const sessionTypeMapSessionNameKey = { + COMMON: i18n.t("editor.widget_picker.sessions.commonly"), + INPUTS: i18n.t("editor.widget_picker.sessions.inputs"), + SELECT: i18n.t("editor.widget_picker.sessions.selects"), + CALENDAR: i18n.t("editor.widget_picker.sessions.calendar"), + PRESENTATION: i18n.t("editor.widget_picker.sessions.presentation"), + DATE: i18n.t("editor.widget_picker.sessions.data"), + CONTAINER: i18n.t("editor.widget_picker.sessions.container"), + NAVIGATION: i18n.t("editor.widget_picker.sessions.navigation"), } const COMMONLY_WIDGET = new Set([ From e670ed1ae8d05ec2ac076c1dc63772e9c0856ec8 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Wed, 20 Jul 2022 19:51:25 +0800 Subject: [PATCH 026/148] fix: can't reset state --- illa-design | 2 +- .../components/InspectPanel/actionMenu.tsx | 4 ++-- .../SwitchSetter/dynamicSwitch.tsx | 2 +- .../editor/components/componentsReducer.ts | 20 +++++++++++++++++++ .../editor/components/componentsSlice.ts | 2 ++ .../editor/components/componentsState.ts | 5 +++++ 6 files changed, 31 insertions(+), 4 deletions(-) diff --git a/illa-design b/illa-design index b52aca770f..e3551a805b 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit b52aca770fe1ee9857672f496ee7baae2cf0e33f +Subproject commit e3551a805b6ec10a734b56a73a504f223e748a78 diff --git a/src/page/App/components/InspectPanel/actionMenu.tsx b/src/page/App/components/InspectPanel/actionMenu.tsx index 47ae3aafa3..30b3b7e228 100644 --- a/src/page/App/components/InspectPanel/actionMenu.tsx +++ b/src/page/App/components/InspectPanel/actionMenu.tsx @@ -26,9 +26,9 @@ export const ActionMenu: FC = (props) => { onClick={() => { const defaultProps = widgetBuilder(componentType).config.defaults dispatch( - componentsActions.updateComponentPropsReducer({ + componentsActions.resetComponentPropsReducer({ displayName: widgetDisplayName, - updateSlice: defaultProps ?? {}, + resetSlice: defaultProps ?? {}, }), ) }} diff --git a/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx b/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx index 21a7c9ef16..6e9fc1bf5d 100644 --- a/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx +++ b/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx @@ -65,7 +65,7 @@ export const DynamicSwitchSetter: FC = (props) => { handleUpdateDsl(attrName, value) }} checked={value} - colorScheme="purple" + colorScheme="techPurple" /> )}
diff --git a/src/redux/currentApp/editor/components/componentsReducer.ts b/src/redux/currentApp/editor/components/componentsReducer.ts index 38e1aefe48..e17b4a3f43 100644 --- a/src/redux/currentApp/editor/components/componentsReducer.ts +++ b/src/redux/currentApp/editor/components/componentsReducer.ts @@ -4,6 +4,7 @@ import { ComponentNode, ComponentsState, DeleteComponentNodePayload, + ResetComponentPropsPayload, UpdateComponentPropsPayload, } from "@/redux/currentApp/editor/components/componentsState" import { searchDsl } from "@/redux/currentApp/editor/components/componentsSelector" @@ -139,3 +140,22 @@ export const updateComponentPropsReducer: CaseReducer< clonedWidgetProps, ) } + +export const resetComponentPropsReducer: CaseReducer< + ComponentsState, + PayloadAction +> = (state, action) => { + const { displayName, resetSlice } = action.payload + if (!isObject(resetSlice) || !displayName) { + return + } + const node = searchDsl(state.rootDsl, displayName) + if (!node) return + const widgetProps = resetSlice || {} + const clonedWidgetProps = cloneDeep(widgetProps) + node.props = getNewWidgetPropsByUpdateSlice( + displayName, + resetSlice, + clonedWidgetProps, + ) +} diff --git a/src/redux/currentApp/editor/components/componentsSlice.ts b/src/redux/currentApp/editor/components/componentsSlice.ts index def5cb2987..861588cfbb 100644 --- a/src/redux/currentApp/editor/components/componentsSlice.ts +++ b/src/redux/currentApp/editor/components/componentsSlice.ts @@ -4,6 +4,7 @@ import { addComponentReducer, copyComponentNodeReducer, deleteComponentNodeReducer, + resetComponentPropsReducer, updateComponentDraggingState, updateComponentPropsReducer, updateComponentReducer, @@ -23,6 +24,7 @@ const componentsSlice = createSlice({ updateComponentPropsReducer, updateComponentResizeState, deleteComponentNodeReducer, + resetComponentPropsReducer, }, }) diff --git a/src/redux/currentApp/editor/components/componentsState.ts b/src/redux/currentApp/editor/components/componentsState.ts index 8b437ec709..b7a2dfe7fc 100644 --- a/src/redux/currentApp/editor/components/componentsState.ts +++ b/src/redux/currentApp/editor/components/componentsState.ts @@ -45,3 +45,8 @@ export interface UpdateComponentPropsPayload { displayName: string updateSlice: Record } + +export interface ResetComponentPropsPayload { + displayName: string + resetSlice: Record +} From bc3eb0923fa860dd4d2c972be58255880c84b292 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Thu, 21 Jul 2022 10:53:16 +0800 Subject: [PATCH 027/148] feat: i18n --- src/i18n/locale/en-US.json | 4 ++++ src/i18n/locale/zh-CN.json | 4 ++++ .../PanelSetters/PublicComponent/Modal/style.ts | 2 +- .../ColorPicker/ColorPickerOperation.tsx | 16 +++++++++++----- .../components/ColorPicker/index.tsx | 10 +++++----- 5 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/i18n/locale/en-US.json b/src/i18n/locale/en-US.json index dd0f8866e2..d3b9a80a43 100644 --- a/src/i18n/locale/en-US.json +++ b/src/i18n/locale/en-US.json @@ -581,6 +581,10 @@ }, "event_handler_list": { "empty": "Trigger queries, control components, or call other APIs in response to component events." + }, + "color_picker": { + "title": "Edit color", + "prefabricated": "Prefabricated color" } } }, diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index 105b09c81e..7d3d75f595 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -581,6 +581,10 @@ }, "event_handler_list": { "empty": "触发查询、控制组件或调用其他API以响应组件事件。" + }, + "color_picker": { + "title": "Edit color", + "prefabricated": "Prefabricated color" } } }, diff --git a/src/page/App/components/PanelSetters/PublicComponent/Modal/style.ts b/src/page/App/components/PanelSetters/PublicComponent/Modal/style.ts index d506c92fae..43264205d6 100644 --- a/src/page/App/components/PanelSetters/PublicComponent/Modal/style.ts +++ b/src/page/App/components/PanelSetters/PublicComponent/Modal/style.ts @@ -7,7 +7,7 @@ export const headerStyle = css` justify-content: space-between; align-items: center; height: 48px; - color: ${globalColor(`--${illaPrefix}-grayBlue-06`)}; + color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; font-size: 16px; padding: 0 16px; font-weight: 500; diff --git a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/ColorPickerOperation.tsx b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/ColorPickerOperation.tsx index 5ec6a30b7b..3c1e585cb3 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/ColorPickerOperation.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/ColorPickerOperation.tsx @@ -16,13 +16,14 @@ import { } from "./styles" import Alpha from "@uiw/react-color-alpha" import Hue from "@uiw/react-color-hue" -import { hsvaToRgba, hexToHsva, hsvaToHex } from "@uiw/color-convert" +import { hsvaToRgba, hexToHsva } from "@uiw/color-convert" import { PointerProps } from "@uiw/react-color-alpha/cjs/Pointer" import { ColorPickerOperationProps } from "./interface" import { CloseIcon } from "@illa-design/icon" -import { useCallback, useEffect, useState } from "react" +import { FC, useCallback, useEffect, useState } from "react" import { css } from "@emotion/react" import useDebounce from "react-use/lib/useDebounce" +import { useTranslation } from "react-i18next" const HueBar = (props: PointerProps) => (
@@ -52,10 +53,13 @@ function Point(props: { ) } -function ColorPickerOperation(props: ColorPickerOperationProps) { +const ColorPickerOperation: FC = ( + props: ColorPickerOperationProps, +) => { const { prefabricatedColors, color } = props const [selectedColor, setSelectedColor] = useState(color) const [debouncedColor, setDebouncedColor] = useState(color) + const { t } = useTranslation() useDebounce( () => { @@ -82,7 +86,7 @@ function ColorPickerOperation(props: ColorPickerOperationProps) { return (
- edit color + {t("editor.inspect.setter_content.color_picker.title")}
- Prefabricated color + + {t("editor.inspect.setter_content.color_picker.prefabricated")} +
{prefabricatedColors?.map((item) => { return ( diff --git a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/index.tsx b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/index.tsx index 2aa3687478..92c8f2f8e2 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/index.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/index.tsx @@ -87,12 +87,12 @@ function ColorPicker(props: ColorPickerProps) { render: (
{ setInputValue(value) From 62efee7ca694ee7ad02a5d7d20be847714e897c1 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 22 Jul 2022 10:34:03 +0800 Subject: [PATCH 028/148] feat: color picker --- src/i18n/locale/en-US.json | 9 +- src/i18n/locale/zh-CN.json | 15 ++- .../App/components/InspectPanel/interface.ts | 3 - .../App/components/InspectPanel/label.tsx | 24 +--- .../App/components/InspectPanel/setter.tsx | 16 +-- .../PanelSetters/ColorPickerSetter/index.tsx | 16 ++- .../PanelSetters/ColorPickerSetter/style.ts | 13 ++ .../List/eventAndMethodLabel.tsx | 4 +- .../EventHandlerSetter/List/header.tsx | 23 ++-- .../EventHandlerSetter/List/interface.ts | 9 +- .../PanelSetters/EventHandlerSetter/index.tsx | 5 +- .../ColorPicker/ColorPickerOperation.tsx | 112 ++++++++---------- .../components/ColorPicker/index.tsx | 47 ++++---- .../components/ColorPicker/styles.tsx | 84 ++++++------- .../ButtonWidget/panelConfig.tsx | 19 ++- 15 files changed, 181 insertions(+), 218 deletions(-) diff --git a/src/i18n/locale/en-US.json b/src/i18n/locale/en-US.json index d3b9a80a43..3448844ffd 100644 --- a/src/i18n/locale/en-US.json +++ b/src/i18n/locale/en-US.json @@ -514,6 +514,8 @@ "pending": "Pending", "event_handler": "Event handler", "event": "Event", + "component": "Component", + "method": "Method", "action": "Action", "trigger_query": "Trigger query", "control_component": "Control component", @@ -538,6 +540,7 @@ "x_axis_type": "X-axis type", "y_axis_title": "Y-axis title", "legend_position": "Legend position", + "only_run_when": "Only run when", "dataset": { "name": "Dataset name", "value": "Dataset values", @@ -565,7 +568,7 @@ "timeline_direction": "Change the direction of the timeline." }, "setter_default_value": { - "solid": "Solid", + "fill": "Fill", "outline": "Outline" }, "setter_content": { @@ -580,7 +583,9 @@ "reset": "Reset" }, "event_handler_list": { - "empty": "Trigger queries, control components, or call other APIs in response to component events." + "empty": "Trigger queries, control components, or call other APIs in response to component events.", + "new": "New", + "title": "Edit event handler" }, "color_picker": { "title": "Edit color", diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index 7d3d75f595..c6402a847f 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -442,7 +442,7 @@ "adornments": "额外修饰属性", "interaction": "交互", "layout": "布局", - "style": "样式", + "style": "风格", "validation": "验证", "options": "选项" }, @@ -455,7 +455,7 @@ "tooltip": "提示", "align": "对齐", "hidden": "隐藏", - "variant": "变体", + "variant": "样式", "color": "颜色", "theme_color": "主题色", "default_value": "默认值", @@ -514,6 +514,8 @@ "pending": "等待", "event_handler": "事件处理器", "event": "事件", + "component": "组件", + "method": "方法", "action": "动作", "trigger_query": "触发请求", "control_component": "控制组件", @@ -538,6 +540,7 @@ "x_axis_type": "X-axis type", "y_axis_title": "Y-axis title", "legend_position": "Legend position", + "only_run_when": "执行条件", "dataset": { "name": "Dataset name", "value": "Dataset values", @@ -565,8 +568,8 @@ "timeline_direction": "切换时间轴的方向" }, "setter_default_value": { - "solid": "Solid", - "outline": "Outline" + "fill": "填充", + "outline": "描边" }, "setter_content": { "option_list": { @@ -580,7 +583,9 @@ "reset": "重置" }, "event_handler_list": { - "empty": "触发查询、控制组件或调用其他API以响应组件事件。" + "empty": "触发查询、控制组件或调用其他API以响应组件事件。", + "new": "新建", + "title": "编辑事件处理器" }, "color_picker": { "title": "Edit color", diff --git a/src/page/App/components/InspectPanel/interface.ts b/src/page/App/components/InspectPanel/interface.ts index 129496428c..602b800562 100644 --- a/src/page/App/components/InspectPanel/interface.ts +++ b/src/page/App/components/InspectPanel/interface.ts @@ -8,10 +8,7 @@ export interface PanelHeaderActionProps { export interface PanelLabelProps { labelName?: any - labelNameOption?: Record labelDesc?: string - labelDescOption?: Record - transComponents?: Record isInList?: boolean } diff --git a/src/page/App/components/InspectPanel/label.tsx b/src/page/App/components/InspectPanel/label.tsx index f454f89d8f..ea6ee5959e 100644 --- a/src/page/App/components/InspectPanel/label.tsx +++ b/src/page/App/components/InspectPanel/label.tsx @@ -1,38 +1,20 @@ import { FC } from "react" import { Tooltip } from "@illa-design/tooltip" -import { useTranslation, Trans } from "react-i18next" import { applyLabelTipsStyle, labelTipsTextStyle } from "./style" import { PanelLabelProps } from "./interface" export const PanelLabel: FC = (props) => { - const { - labelDesc, - labelName, - isInList, - labelDescOption, - labelNameOption, - transComponents, - } = props - - const { t } = useTranslation() + const { labelDesc, labelName, isInList } = props return ( - - {t(labelDesc, labelDescOption)} - - - } + content={{labelDesc}} trigger="hover" position="left" maxWidth="240px" disabled={!labelDesc} > - - {t(labelName, labelNameOption)} - + {labelName} ) } diff --git a/src/page/App/components/InspectPanel/setter.tsx b/src/page/App/components/InspectPanel/setter.tsx index f50fb3720b..772aa79ab8 100644 --- a/src/page/App/components/InspectPanel/setter.tsx +++ b/src/page/App/components/InspectPanel/setter.tsx @@ -13,10 +13,7 @@ export const Setter: FC = (props) => { isSetterSingleRow, isInList, labelName, - labelNameOption, labelDesc, - labelDescOption, - transComponents, useCustomLayout = false, shown, bindAttrName, @@ -63,21 +60,10 @@ export const Setter: FC = (props) => { ) : null - }, [ - useCustomLayout, - labelName, - labelDesc, - isInList, - labelNameOption, - labelDescOption, - transComponents, - ]) + }, [useCustomLayout, labelName, labelDesc, isInList]) const _finalAttrName = useMemo(() => { if (parentAttrName) { diff --git a/src/page/App/components/PanelSetters/ColorPickerSetter/index.tsx b/src/page/App/components/PanelSetters/ColorPickerSetter/index.tsx index d6ded48baa..3f39a75e14 100644 --- a/src/page/App/components/PanelSetters/ColorPickerSetter/index.tsx +++ b/src/page/App/components/PanelSetters/ColorPickerSetter/index.tsx @@ -1,9 +1,10 @@ -import { FC, useMemo } from "react" +import { FC, useCallback, useMemo } from "react" import { ColorPickerSetterProps } from "./interface" - +import { debounce } from "lodash" import ColorPicker from "@/page/App/components/WidgetPickerEditor/components/ColorPicker" import { hsvaToHexa } from "@uiw/color-convert/src" import { applyColorSetterStyle } from "@/page/App/components/PanelSetters/ColorPickerSetter/style" +import { HsvaColor } from "@uiw/color-convert" export const ColorPickerSetter: FC = (props) => { const { attrName, handleUpdateDsl, value, options, isSetterSingleRow } = props @@ -13,14 +14,19 @@ export const ColorPickerSetter: FC = (props) => { return options?.[index ?? -1]?.key ?? value }, [options, value]) + const debounceHandleUpdateDsl = useCallback( + debounce((value: HsvaColor) => { + handleUpdateDsl(attrName, hsvaToHexa(value)) + }, 300), + [handleUpdateDsl], + ) + return (
{ - handleUpdateDsl(attrName, hsvaToHexa(value)) - }} + onColorChange={debounceHandleUpdateDsl} />
) diff --git a/src/page/App/components/PanelSetters/ColorPickerSetter/style.ts b/src/page/App/components/PanelSetters/ColorPickerSetter/style.ts index 9594d406ba..06efbd56e1 100644 --- a/src/page/App/components/PanelSetters/ColorPickerSetter/style.ts +++ b/src/page/App/components/PanelSetters/ColorPickerSetter/style.ts @@ -1,7 +1,20 @@ import { css } from "@emotion/react" +import { globalColor, illaPrefix } from "@illa-design/theme" export function applyColorSetterStyle(isSingleRow: boolean = false) { return css` width: ${isSingleRow ? "100%" : "154px"}; ` } + +export const titleStyle = css` + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; + font-size: 12px; + font-weight: 500; +` + +export const closeIconStyle = css` + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; + font-size: 14px; + cursor: pointer; +` diff --git a/src/page/App/components/PanelSetters/EventHandlerSetter/List/eventAndMethodLabel.tsx b/src/page/App/components/PanelSetters/EventHandlerSetter/List/eventAndMethodLabel.tsx index 8b22f0324b..ac0ad89ce9 100644 --- a/src/page/App/components/PanelSetters/EventHandlerSetter/List/eventAndMethodLabel.tsx +++ b/src/page/App/components/PanelSetters/EventHandlerSetter/List/eventAndMethodLabel.tsx @@ -9,6 +9,7 @@ import { import { EventAndMethodLabelProps } from "./interface" import { BaseModal } from "@/page/App/components/PanelSetters/PublicComponent/Modal" import { BaseEventHandlerContext } from "@/page/App/components/PanelSetters/EventHandlerSetter/context" +import { useTranslation } from "react-i18next" const getMethodName = ( actionType: string, @@ -28,6 +29,7 @@ const getMethodName = ( export const EventAndMethodLabel: FC = (props) => { const { index } = props + const { t } = useTranslation() const [modalVisible, setModalVisible] = useState(false) const { widgetDisplayName, attrPath, childrenSetter, eventItems } = useContext(BaseEventHandlerContext) @@ -44,7 +46,7 @@ export const EventAndMethodLabel: FC = (props) => { popupVisible={modalVisible} content={ = ( props, ) => { - const { - labelName, - labelDesc, - labelDescOption, - labelNameOption, - transComponents, - handleAddItemAsync, - } = props + const { labelName, labelDesc, handleAddItemAsync } = props + const { t } = useTranslation() const handleClickNewButton = useCallback(() => { handleAddItemAsync() @@ -26,16 +21,12 @@ export const EventHandlerSetterHeader: FC = ( return (
- +
- New + + {t("editor.inspect.setter_content.event_handler_list.new")} +
) diff --git a/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts b/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts index b0359bd361..df17475297 100644 --- a/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts +++ b/src/page/App/components/PanelSetters/EventHandlerSetter/List/interface.ts @@ -1,14 +1,7 @@ import { PanelLabelProps } from "@/page/App/components/InspectPanel/interface" export interface EventHandlerSetterHeaderProps - extends Pick< - PanelLabelProps, - | "labelName" - | "labelDesc" - | "labelNameOption" - | "labelDescOption" - | "transComponents" - > { + extends Pick { handleAddItemAsync: () => void } diff --git a/src/page/App/components/PanelSetters/EventHandlerSetter/index.tsx b/src/page/App/components/PanelSetters/EventHandlerSetter/index.tsx index 7ca432964c..f24b221401 100644 --- a/src/page/App/components/PanelSetters/EventHandlerSetter/index.tsx +++ b/src/page/App/components/PanelSetters/EventHandlerSetter/index.tsx @@ -6,7 +6,6 @@ import { generateNewEventItem } from "@/page/App/components/PanelSetters/EventHa import { widgetBuilder } from "@/widgetLibrary/widgetBuilder" import { NewBaseEventHandlerSetterProps } from "@/page/App/components/PanelSetters/EventHandlerSetter/interface" import { BaseEventHandlerProvider } from "@/page/App/components/PanelSetters/EventHandlerSetter/context" -import { useTranslation } from "react-i18next" export const EventHandlerSetter: FC = ( props, @@ -23,8 +22,6 @@ export const EventHandlerSetter: FC = ( defaultValue, } = props - const { t } = useTranslation() - const eventHandlerConfig = useMemo( () => widgetBuilder(widgetType)?.eventHandlerConfig ?? { @@ -56,7 +53,7 @@ export const EventHandlerSetter: FC = ( >
diff --git a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/ColorPickerOperation.tsx b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/ColorPickerOperation.tsx index 3c1e585cb3..f45688a877 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/ColorPickerOperation.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/ColorPickerOperation.tsx @@ -12,6 +12,7 @@ import { slideContainerCss, slideCss, swatchContainerCss, + swatchWrapperStyle, titleCss, } from "./styles" import Alpha from "@uiw/react-color-alpha" @@ -20,10 +21,12 @@ import { hsvaToRgba, hexToHsva } from "@uiw/color-convert" import { PointerProps } from "@uiw/react-color-alpha/cjs/Pointer" import { ColorPickerOperationProps } from "./interface" import { CloseIcon } from "@illa-design/icon" -import { FC, useCallback, useEffect, useState } from "react" -import { css } from "@emotion/react" -import useDebounce from "react-use/lib/useDebounce" +import { FC, useCallback } from "react" import { useTranslation } from "react-i18next" +import { + closeIconStyle, + titleStyle, +} from "@/page/App/components/PanelSetters/ColorPickerSetter/style" const HueBar = (props: PointerProps) => (
@@ -56,26 +59,9 @@ function Point(props: { const ColorPickerOperation: FC = ( props: ColorPickerOperationProps, ) => { - const { prefabricatedColors, color } = props - const [selectedColor, setSelectedColor] = useState(color) - const [debouncedColor, setDebouncedColor] = useState(color) + const { prefabricatedColors, color, handleColorPick } = props const { t } = useTranslation() - useDebounce( - () => { - setDebouncedColor(selectedColor) - }, - 50, - [selectedColor], - ) - - useEffect(() => { - props.handleColorPick({ - ...color, - ...debouncedColor, - }) - }, [debouncedColor]) - const swatchItemClick = useCallback( (hexStr: string) => { props.handleColorPick(hexToHsva(hexStr)) @@ -86,71 +72,71 @@ const ColorPickerOperation: FC = ( return (
- {t("editor.inspect.setter_content.color_picker.title")} - + + {t("editor.inspect.setter_content.color_picker.title")} + +
{ - setSelectedColor({ + const newColors = { ...color, ...newColor, a: color.a, - }) + } + console.log("newColors", newColors) + props.handleColorPick && props.handleColorPick(newColors) }} />
{ - setSelectedColor({ ...color, ...newHue }) - props.handleHueChange && props.handleHueChange(newHue) + props.handleColorPick && + props.handleColorPick({ ...props.color, ...newHue }) }} /> { - setSelectedColor({ ...props.color, ...newAlpha }) - props.handleAlphaChange && props.handleAlphaChange(newAlpha) + props.handleColorPick && + props.handleColorPick({ ...props.color, ...newAlpha }) }} />
-
+
- - {t("editor.inspect.setter_content.color_picker.prefabricated")} - -
- {prefabricatedColors?.map((item) => { - return ( - { - swatchItemClick(item.key) - }} - /> - ) - })} +
+ + {t("editor.inspect.setter_content.color_picker.prefabricated")} + +
+ {prefabricatedColors?.map((item) => { + return ( + { + swatchItemClick(item.key) + }} + /> + ) + })} +
) diff --git a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/index.tsx b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/index.tsx index 92c8f2f8e2..2ec27113f5 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/index.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/index.tsx @@ -2,7 +2,7 @@ import ColorPickerOperation from "./ColorPickerOperation" import { Trigger } from "@illa-design/trigger" import { Input } from "@illa-design/input" import { - applyColorLumpCss, + applyColorLumpRadioStyle, colorInputContainerCss, colorInputCss, percentInputCss, @@ -35,40 +35,48 @@ function ColorPicker(props: ColorPickerProps) { defaultColor = "#FFFFFF", onColorChange, placeholder, - onHueChange, - onAlphaChange, prefabricatedColors, color, } = props const defaultHsva = useMemo(() => { - return hexToHsva(color?.substring(0, 7) ?? defaultColor.substring(0, 7)) + return hexToHsva(color ?? defaultColor) }, [defaultColor, color]) - useEffect(() => { - setHsva(defaultHsva) - setInputValue(hsvaToHex(defaultHsva)) + + const defaultInputValue = useMemo(() => { + return { + ...defaultHsva, + a: 1, + } }, [defaultHsva]) + + const defaultAlphaInputValue = useMemo(() => { + return defaultHsva.a * 100 + "%" + }, [defaultHsva.a]) + const [hsva, setHsva] = useState(defaultHsva) const [currentVisible, setCurrentVisible] = useState(false) - const [inputValue, setInputValue] = useState(hsvaToHex(hsva)) - const [alphaPercentValue, setAlphaPercentValue] = useState("100%") + const [inputValue, setInputValue] = useState(hsvaToHex(defaultInputValue)) + const [alphaPercentValue, setAlphaPercentValue] = useState( + defaultAlphaInputValue, + ) const handleColorPick = useCallback( (hsva: HsvaColor) => { - setHsva(hsva) - setAlphaPercentValue(updateAlphaInputValue(hsva.a)) - setInputValue(hsvaToHex(hsva)) onColorChange?.(hsva) + setHsva(hsva) }, [onColorChange], ) + useEffect(() => { + setInputValue(hsvaToHex(hsva)) + setAlphaPercentValue(hsva.a * 100 + "%") + }, [hsva]) + const [inputFocus, setInputFocus] = useState(false) const [debouncedInputFocus, setDebouncedInputFocus] = useState(false) - const inputRef = useRef(null) - const alphaInputRef = useRef(null) - useDebounce( () => { setDebouncedInputFocus(inputFocus) @@ -81,7 +89,6 @@ function ColorPicker(props: ColorPickerProps) {
setCurrentVisible(false)} /> } > -
+
), @@ -139,7 +144,6 @@ function ColorPicker(props: ColorPickerProps) { render: ( { if (event.target && event.target.value.length > 0) { @@ -160,9 +164,6 @@ function ColorPicker(props: ColorPickerProps) { } setAlphaPercentValue(event.target.value) }} - onFocus={() => { - setInputFocus(true) - }} onBlur={() => { setInputFocus(false) setAlphaPercentValue(hsva.a * 100 + "%") diff --git a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx index fb819e69c5..864748a8be 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx @@ -10,7 +10,7 @@ export const saturationCss = css` justify-content: center; ` export const slideContainerCss = css` - display: inline-flex; + display: flex; flex-direction: column; align-items: center; justify-content: center; @@ -18,14 +18,14 @@ export const slideContainerCss = css` ` export const slideAndLumpContainerCss = css` - display: inline-flex; + display: flex; width: 100%; - margin-top: 20px; + height: 64px; flex-direction: row; align-items: center; justify-content: center; - padding-bottom: 21px; border-bottom: solid 1px ${globalColor(`--${illaPrefix}-grayBlue-08`)}; + padding: 0 16px; ` export const titleCss = css` @@ -35,18 +35,15 @@ export const titleCss = css` display: inline-flex; justify-content: space-between; align-items: center; - border-bottom: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; box-sizing: border-box; - padding: 0 12px; + padding: 0 16px; color: ${globalColor(`--${illaPrefix}-grayBlue-01`)}; - margin-bottom: 8px; ` export const sessionTitleCss = css` - width: 100%; - color: ${globalColor(`--${illaPrefix}-grayBlue-01`)}; + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; + font-weight: 500; font-size: 12px; - padding: 10px 0 0 8px; box-sizing: border-box; ` @@ -57,8 +54,8 @@ export const slideCss = css` ` export const commonSlidePointCss = css` - width: 10px; - height: 10px; + width: 12px; + height: 12px; border-radius: 5px; position: absolute; border-width: 2px; @@ -76,23 +73,34 @@ export function applyHuePointCss(percent?: string) { return css` ${commonSlidePointCss}; bottom: -0.5px; - left: ${percent ? toPoint(percent) * 180 : 0}px; + left: ${percent ? toPoint(percent) * 150 : 0}px; ` } export function applyAlphaPointCss(percent?: string) { return css` ${commonSlidePointCss}; - bottom: -2px; - left: ${percent ? toPoint(percent) * 180 : 0}px; + bottom: -0.5px; + left: ${percent ? toPoint(percent) * 150 : 0}px; ` } -export function applyColorLumpCss(colorStr: RgbaColor) { +export function applyColorLumpRadioStyle(colorStr: RgbaColor) { + console.log("colorStr", colorStr) return css` + ${applyColorLumpCss(colorStr)}; + border-radius: 50%; width: 24px; height: 24px; - border-radius: 12px; + ` +} + +export function applyColorLumpCss(colorStr: RgbaColor) { + return css` + width: 32px; + height: 32px; + border-radius: 4px; + flex: none; &:hover { cursor: pointer; } @@ -124,12 +132,10 @@ export const labelCss = css` export const swatchContainerCss = css` width: 100%; - margin-bottom: 4px; - display: inline-flex; - padding: 0 3px; - margin-top: 8px; + display: flex; flex-wrap: wrap; box-sizing: border-box; + margin-top: 5px; ` export const colorInputCss = css` @@ -158,39 +164,33 @@ export const percentInputCss = css` background-color: transparent; ` -export const colorSwatchItemContainer = css` - width: 34px; - height: 22px; - padding: 0 6px; - margin-bottom: 6px; - box-sizing: border-box; -` +export const colorSwatchItemContainer = css`` export function applyColorCheckedItemContainer(isChecked?: boolean) { - const borderCss = isChecked - ? css` - border: solid ${globalColor(`--${illaPrefix}-grayBlue-02`)} 1px; - ` - : css` - border: solid white 1px; - ` return css` - width: 100%; - height: 100%; - padding: 1px; + padding: 3px; border-radius: 4px; box-sizing: border-box; - ${borderCss} + border: 1px solid + ${isChecked ? globalColor(`--${illaPrefix}-grayBlue-07`) : "transparent"}; ` } export function applyColorSwatchCss(colorStr?: string) { return css` - border: solid 1px ${globalColor(`--${illaPrefix}-grayBlue-09`)}; - height: 100%; - width: 100%; + border: 1px solid + ${colorStr === "#fff" + ? `${globalColor(`--${illaPrefix}-grayBlue-08`)}` + : "transparent"}; + height: 16px; + width: 16px; background-color: ${colorStr}; border-radius: 2px; box-sizing: border-box; ` } + +export const swatchWrapperStyle = css` + width: 100%; + padding: 8px 12px; +` diff --git a/src/widgetLibrary/ButtonWidget/panelConfig.tsx b/src/widgetLibrary/ButtonWidget/panelConfig.tsx index ac133d7fc2..a7b16f57d3 100644 --- a/src/widgetLibrary/ButtonWidget/panelConfig.tsx +++ b/src/widgetLibrary/ButtonWidget/panelConfig.tsx @@ -89,7 +89,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "component", - labelName: "Component", + labelName: i18n.t("editor.inspect.setter_label.component"), setterType: "EVENT_TARGET_SELECT_SETTER", attrName: "widgetID", bindAttrName: "actionType", @@ -97,7 +97,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "Method", - labelName: i18n.t("Method"), + labelName: i18n.t("editor.inspect.setter_label.method"), setterType: "EVENT_WIDGET_METHOD_SELECT_SETTER", attrName: "widgetMethod", bindAttrName: "widgetID", @@ -105,7 +105,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "Value", - labelName: i18n.t("Value"), + labelName: i18n.t("editor.inspect.setter_label.value"), setterType: "INPUT_SETTER", attrName: "widgetTargetValue", bindAttrName: "widgetMethod", @@ -113,7 +113,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "startValue", - labelName: i18n.t("startValue"), + labelName: i18n.t("editor.inspect.setter_label.start_date"), setterType: "INPUT_SETTER", attrName: "widgetTargetValue", bindAttrName: "widgetMethod", @@ -121,7 +121,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "endValue", - labelName: i18n.t("endValue"), + labelName: i18n.t("editor.inspect.setter_label.end_date"), setterType: "INPUT_SETTER", attrName: "widgetTargetValue", bindAttrName: "widgetMethod", @@ -129,7 +129,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "imageUrl", - labelName: i18n.t("Value"), + labelName: i18n.t("editor.inspect.setter_label.value"), setterType: "INPUT_SETTER", attrName: "widgetTargetValue", bindAttrName: "widgetMethod", @@ -215,7 +215,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ }, { id: "enabled", - labelName: i18n.t("Only run when"), + labelName: i18n.t("editor.inspect.setter_label.only_run_when"), // labelDesc: i18n.t("xxxxx"), setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -315,7 +315,6 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ setterType: "DYNAMIC_SWITCH_SETTER", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "buttonName" }, useCustomLayout: true, attrName: "hidden", expectedType: VALIDATION_TYPES.BOOLEAN, @@ -333,7 +332,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ attrName: "variant", options: [ { - label: i18n.t("editor.inspect.setter_default_value.solid"), + label: i18n.t("editor.inspect.setter_default_value.fill"), value: "fill", }, { @@ -345,7 +344,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: "button-style-list", setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.color"), attrName: "styles", useCustomLayout: true, childrenSetter: [ From b14f58d8536ccfb3bc139f789563243827c92267 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 22 Jul 2022 10:41:23 +0800 Subject: [PATCH 029/148] feat: add hover bg color --- .../PanelSetters/EventHandlerSetter/List/style.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/page/App/components/PanelSetters/EventHandlerSetter/List/style.ts b/src/page/App/components/PanelSetters/EventHandlerSetter/List/style.ts index 3c46fe02de..737f515520 100644 --- a/src/page/App/components/PanelSetters/EventHandlerSetter/List/style.ts +++ b/src/page/App/components/PanelSetters/EventHandlerSetter/List/style.ts @@ -30,7 +30,12 @@ export const fontButtonWrapperStyle = css` align-items: center; color: ${globalColor(`--${illaPrefix}-purple-01`)}; cursor: pointer; - height: 100%; + height: 24px; + padding: 1px 8px; + border-radius: 8px; + &:hover { + background-color: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; + } ` export const fontButtonStyle = css` From 7abf34c027f82a782544f878ecce86ee1f718510 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 22 Jul 2022 10:45:05 +0800 Subject: [PATCH 030/148] feat: event handler in action style --- .../components/PanelSetters/EventHandlerSetter/List/style.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/page/App/components/PanelSetters/EventHandlerSetter/List/style.ts b/src/page/App/components/PanelSetters/EventHandlerSetter/List/style.ts index 737f515520..4d9acc2c75 100644 --- a/src/page/App/components/PanelSetters/EventHandlerSetter/List/style.ts +++ b/src/page/App/components/PanelSetters/EventHandlerSetter/List/style.ts @@ -33,6 +33,7 @@ export const fontButtonWrapperStyle = css` height: 24px; padding: 1px 8px; border-radius: 8px; + font-size: 14px; &:hover { background-color: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; } @@ -99,4 +100,5 @@ export const emptyBodyStyle = css` color: ${globalColor(`--${illaPrefix}-grayBlue-03`)}; margin-bottom: 8px; border-radius: 8px; + font-size: 14px; ` From 37f8c1fc67e9c7d055fc6b90f264a906512ee1d3 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 22 Jul 2022 11:36:24 +0800 Subject: [PATCH 031/148] feat: remove button attr --- src/App.tsx | 3 +- .../InspectPanel/context/selectedContext.tsx | 3 -- .../App/components/InspectPanel/empty.tsx | 31 ++++++++++++------- .../App/components/InspectPanel/index.tsx | 4 +-- src/page/App/components/InspectPanel/style.ts | 2 -- src/page/Setting/tabPanel.tsx | 31 +++++++++---------- src/widgetLibrary/ButtonWidget/button.tsx | 11 ++----- src/widgetLibrary/ButtonWidget/interface.tsx | 3 -- .../ButtonWidget/panelConfig.tsx | 24 -------------- src/widgetLibrary/ButtonWidget/style.ts | 22 +++---------- .../ButtonWidget/widgetConfig.tsx | 1 - 11 files changed, 47 insertions(+), 88 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 97e611f6eb..83cedba576 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,13 +11,14 @@ import { getCurrentConfigLanguage, getCurrentTranslateLanguage, } from "@/redux/currentUser/currentUserSelector" -import i18n from "./i18n/config" import { useEffect } from "react" import { ILLARoute } from "@/router" +import { useTranslation } from "react-i18next" function App() { const configLanguage = useSelector(getCurrentConfigLanguage) const currentUserLanguage = useSelector(getCurrentTranslateLanguage) + const { i18n } = useTranslation() useEffect(() => { if (!!currentUserLanguage) { diff --git a/src/page/App/components/InspectPanel/context/selectedContext.tsx b/src/page/App/components/InspectPanel/context/selectedContext.tsx index dfc61f7d79..dbaf7006a0 100644 --- a/src/page/App/components/InspectPanel/context/selectedContext.tsx +++ b/src/page/App/components/InspectPanel/context/selectedContext.tsx @@ -1,5 +1,4 @@ import { createContext, ReactNode, FC } from "react" -import { Empty } from "@/page/App/components/InspectPanel/empty" interface Injected { widgetType: string @@ -33,8 +32,6 @@ export const SelectedProvider: FC = (props) => { handleUpdateDsl, } = props - if (!widgetType || !widgetDisplayName) return - const value = { widgetType, widgetDisplayName, diff --git a/src/page/App/components/InspectPanel/empty.tsx b/src/page/App/components/InspectPanel/empty.tsx index ce20b33d30..b183fcd0e8 100644 --- a/src/page/App/components/InspectPanel/empty.tsx +++ b/src/page/App/components/InspectPanel/empty.tsx @@ -6,22 +6,31 @@ import { unselectedTipWrapperStyle, } from "@/page/App/components/InspectPanel/style" import { UnselectedWidgetIcon } from "@illa-design/icon" +import { Empty } from "@illa-design/empty" -export const Empty: FC = () => { +export const EmptySelected: FC = () => { const { t } = useTranslation() return (
-
- -
-
- {t("editor.inspect.unselected_tip1")} -
-
- {t("editor.inspect.unselected_tip2")} -
+ + +
+ } + description={ + <> +
+ {t("editor.inspect.unselected_tip1")} +
+
+ {t("editor.inspect.unselected_tip2")} +
+ + } + />
) } -Empty.displayName = "Unselected-empty" +EmptySelected.displayName = "EmptySelected" diff --git a/src/page/App/components/InspectPanel/index.tsx b/src/page/App/components/InspectPanel/index.tsx index a54184cf3a..1ee9c2e347 100644 --- a/src/page/App/components/InspectPanel/index.tsx +++ b/src/page/App/components/InspectPanel/index.tsx @@ -1,7 +1,7 @@ import { FC, useMemo } from "react" import { useSelector } from "react-redux" import { SelectedPanel } from "./selectedPanel" -import { Empty } from "./empty" +import { EmptySelected } from "./empty" import { getSelectedComponentsDisplayName } from "@/redux/config/configSelector" export const InspectPanel: FC = () => { @@ -14,7 +14,7 @@ export const InspectPanel: FC = () => { }, [selectedComponentsDisplayNames]) return isNotSelected ? ( - + ) : ( ) diff --git a/src/page/App/components/InspectPanel/style.ts b/src/page/App/components/InspectPanel/style.ts index ab4c7362b3..e2970fb75f 100644 --- a/src/page/App/components/InspectPanel/style.ts +++ b/src/page/App/components/InspectPanel/style.ts @@ -105,8 +105,6 @@ export const unselectedTipIconStyle = css` export const unselectedTipTextStyle = css` margin-top: 4px; - font-size: 14px; - color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; ` export const singleSelectedPanelWrapperStyle = css` diff --git a/src/page/Setting/tabPanel.tsx b/src/page/Setting/tabPanel.tsx index 9dfe084ddb..6ed5c1b4ca 100644 --- a/src/page/Setting/tabPanel.tsx +++ b/src/page/Setting/tabPanel.tsx @@ -12,22 +12,6 @@ import { css } from "@emotion/react" import { useNavigate, Outlet, useLocation } from "react-router-dom" import { useTranslation } from "react-i18next" import { SettingLayout } from "@/page/Setting/components/Layout" -import i18n from "@/i18n/config" - -const TabItems = [ - { - title: i18n.t("setting.account.title"), - key: "account", - }, - { - title: i18n.t("setting.password.title"), - key: "password", - }, - { - title: i18n.t("setting.other.title"), - key: "others", - }, -] export const SettingTabNavBar: FC = () => { const navigate = useNavigate() @@ -36,6 +20,21 @@ export const SettingTabNavBar: FC = () => { const pathList = location.pathname.split("/") const key = pathList[pathList.length - 1] + const TabItems = [ + { + title: t("setting.account.title"), + key: "account", + }, + { + title: t("setting.password.title"), + key: "password", + }, + { + title: t("setting.other.title"), + key: "others", + }, + ] + const prefixTabs = (
= (props) => { const { @@ -12,23 +12,21 @@ export const WrappedButton: FC = (props) => { disabled, borderRadius, loading, - alignment, colorScheme, handleOnClick, } = props return ( -
+
} description={ diff --git a/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/Empty.tsx b/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/Empty.tsx index 7ad6c68db7..9a556f7e8b 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/Empty.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/Empty.tsx @@ -1,17 +1,20 @@ import { FC } from "react" -import { EmptyStateIcon } from "@illa-design/icon" -import { emptyStyle, emptyTipStyle } from "./style" +import { Empty } from "@illa-design/empty" +import { emptyStyle } from "./style" import { useTranslation } from "react-i18next" +import { ReactComponent as EmptySearchIcon } from "@/assets/empty-search-icon.svg" -export const Empty: FC = () => { +export const EmptySearchResult: FC = () => { const { t } = useTranslation() return (
- - {t("editor.widget_picker.empty_tip")} + } + description={t("editor.widget_picker.empty_tip")} + />
) } -Empty.displayName = "Empty" +EmptySearchResult.displayName = "Empty" diff --git a/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/index.tsx b/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/index.tsx index d9af81ec0e..3a9b689d24 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/index.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/index.tsx @@ -8,7 +8,7 @@ import { import { ComponentPanelProps, ComponentSessionProps } from "./interface" import { ComponentSession } from "./ComponentSession" import { getMatchComponent } from "./utils" -import { Empty } from "./Empty" +import { EmptySearchResult } from "./Empty" import { buildComponentList } from "@/widgetLibrary/componentListBuilder" import { useTranslation } from "react-i18next" @@ -45,7 +45,7 @@ export const ComponentPanel: FC = (props) => { )) ) : ( - + )}
diff --git a/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/style.tsx b/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/style.tsx index b268110b3a..db51c00697 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/style.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ComponentPanel/style.tsx @@ -101,20 +101,3 @@ export const emptyStyle = css` align-items: center; color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; ` - -export const emptyTipStyle = css` - color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; - margin-top: 4px; - font-size: 14px; -` - -function hexToRGBA(hex: string, alpha?: number) { - const r = parseInt(hex.slice(1, 3), 16), - g = parseInt(hex.slice(3, 5), 16), - b = parseInt(hex.slice(5, 7), 16) - if (alpha) { - return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")" - } else { - return "rgb(" + r + ", " + g + ", " + b + ")" - } -} From 44eb2138001788b00be6ccb2f3db9e8e2650921a Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 22 Jul 2022 14:43:58 +0800 Subject: [PATCH 034/148] fix: app list modal --- illa-design | 2 +- src/i18n/locale/en-US.json | 1 + src/i18n/locale/zh-CN.json | 1 + src/page/Dashboard/DashboardApps/index.tsx | 8 ++++---- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/illa-design b/illa-design index e3551a805b..625b91c1a6 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit e3551a805b6ec10a734b56a73a504f223e748a78 +Subproject commit 625b91c1a6e07ae0cf3991cc601119938405aaae diff --git a/src/i18n/locale/en-US.json b/src/i18n/locale/en-US.json index 3448844ffd..77faf21750 100644 --- a/src/i18n/locale/en-US.json +++ b/src/i18n/locale/en-US.json @@ -25,6 +25,7 @@ }, "back": "back", "edit_success": "edit success！", + "save": "Save", "user": { "description": "An open-source low-code Platform for Developers.", "sign_up": { diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index c6402a847f..0441da21ff 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -25,6 +25,7 @@ }, "back": "后退", "edit_success": "修改成功！", + "save": "保存", "user": { "description": "专属于开发者的开源低代码平台。", "sign_up": { diff --git a/src/page/Dashboard/DashboardApps/index.tsx b/src/page/Dashboard/DashboardApps/index.tsx index 86201e77d5..a298baced1 100644 --- a/src/page/Dashboard/DashboardApps/index.tsx +++ b/src/page/Dashboard/DashboardApps/index.tsx @@ -300,6 +300,7 @@ export const DashboardApps: FC = () => { autoFocus={false} footerAlign="right" visible={renameModalVisible} + title={t("dashboard.app.rename_app")} _css={modalStyle} okButtonProps={{ colorScheme: "techPurple", @@ -308,6 +309,7 @@ export const DashboardApps: FC = () => { onCancel={() => { setRenameModalVisible(false) }} + okText={t("save")} onOk={() => { if (!renameValue) { Message.error(t("dashboard.app.name_empty")) @@ -316,7 +318,6 @@ export const DashboardApps: FC = () => { renameRequest() }} > -
{t("dashboard.app.rename_app")}
{ @@ -353,10 +354,9 @@ export const DashboardApps: FC = () => { } duplicateRequest() }} + title={`${t("duplicate")} "${appsList[currentAppIdx].appName}"`} + okText={t("save")} > -
- {`${t("duplicate")} "${appsList[currentAppIdx].appName}"`} -
{ From 4a2c62e728494694b124c42e81aff79a192e10d4 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 22 Jul 2022 15:43:15 +0800 Subject: [PATCH 035/148] fix: modal style --- .../ActionGenerator/ActionTypeSelector/style.ts | 4 ++-- .../ActionEditor/ResourceForm/Editor/index.tsx | 3 ++- .../ActionEditor/ResourceForm/Editor/style.tsx | 9 ++++++--- src/page/Dashboard/DashboardApps/index.tsx | 3 ++- 4 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/style.ts b/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/style.ts index 91aff94a07..3d4b035106 100644 --- a/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/style.ts +++ b/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/style.ts @@ -3,11 +3,11 @@ import { globalColor, illaPrefix } from "@illa-design/theme" export const containerStyle = css` overflow: auto; - padding: 24px; + padding: 16px 24px 24px 24px; ` export const titleStyle = css` margin-bottom: 16px; - font-size: 20px; + font-size: 16px; font-weight: 500; text-align: center; color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; diff --git a/src/page/App/components/ActionEditor/ResourceForm/Editor/index.tsx b/src/page/App/components/ActionEditor/ResourceForm/Editor/index.tsx index ae385e1dbe..079e755ca1 100644 --- a/src/page/App/components/ActionEditor/ResourceForm/Editor/index.tsx +++ b/src/page/App/components/ActionEditor/ResourceForm/Editor/index.tsx @@ -22,6 +22,7 @@ import { formFooterFillingStyle, createResourceBtnStyle, formTitleStyle, + formBodyStyle, } from "./style" const renderResourceNode = ( @@ -155,7 +156,7 @@ export const ResourceFormEditor: FC = (props) => {
{t("editor.action.form.title.configure", { name: resourceTitle })}
-
+
{renderResourceNode( resourceType, connectionRef, diff --git a/src/page/App/components/ActionEditor/ResourceForm/Editor/style.tsx b/src/page/App/components/ActionEditor/ResourceForm/Editor/style.tsx index 63f04e1fb6..65c7b072dd 100644 --- a/src/page/App/components/ActionEditor/ResourceForm/Editor/style.tsx +++ b/src/page/App/components/ActionEditor/ResourceForm/Editor/style.tsx @@ -4,13 +4,16 @@ import { globalColor, illaPrefix } from "@illa-design/theme" export const formContainerStyle = css`` export const formTitleStyle = css` - padding: 24px 0 16px 0; - font-size: 20px; + padding: 16px 40px 8px 16px; + width: 100%; + font-size: 16px; font-weight: 500; text-align: center; color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; ` - +export const formBodyStyle = css` + padding: 8px 24px; +` export const formFooterStyle = css` display: flex; padding: 24px; diff --git a/src/page/Dashboard/DashboardApps/index.tsx b/src/page/Dashboard/DashboardApps/index.tsx index a298baced1..9547320f3f 100644 --- a/src/page/Dashboard/DashboardApps/index.tsx +++ b/src/page/Dashboard/DashboardApps/index.tsx @@ -283,8 +283,9 @@ export const DashboardApps: FC = () => { } createNewRequest() }} + title={t("dashboard.app.create_app")} + okText={t("save")} > -
{t("dashboard.app.create_app")}
{ From 82119a98ba89b290f5f8eaa5ea87fcd75a7a1b07 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 22 Jul 2022 15:56:01 +0800 Subject: [PATCH 036/148] fix: sort app list and resources list --- src/page/Dashboard/DashboardApps/index.tsx | 17 +++++++-- .../Dashboard/DashboardResources/index.tsx | 36 +++++++++++-------- 2 files changed, 35 insertions(+), 18 deletions(-) diff --git a/src/page/Dashboard/DashboardApps/index.tsx b/src/page/Dashboard/DashboardApps/index.tsx index 9547320f3f..89adab82ae 100644 --- a/src/page/Dashboard/DashboardApps/index.tsx +++ b/src/page/Dashboard/DashboardApps/index.tsx @@ -1,7 +1,8 @@ -import { FC, useEffect, useState } from "react" +import { FC, useEffect, useState, useMemo } from "react" import { useDispatch, useSelector } from "react-redux" import { useTranslation } from "react-i18next" import { useNavigate } from "react-router-dom" +import { cloneDeep } from "lodash" import dayjs from "dayjs" import utc from "dayjs/plugin/utc" import copy from "copy-to-clipboard" @@ -170,6 +171,16 @@ export const DashboardApps: FC = () => { ) } + const sortedAppsList = useMemo(() => { + if (Array.isArray(appsList) && appsList.length > 0) { + const tmpAppList = cloneDeep(appsList) + return tmpAppList.sort((a, b) => { + return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime() + }) + } + return [] + }, [appsList]) + return ( <>
@@ -195,10 +206,10 @@ export const DashboardApps: FC = () => {
- {appsList.length !== 0 && ( + {sortedAppsList.length !== 0 && ( { ) const data = useMemo(() => { const result: any[] = [] - resourcesList.forEach((item: Resource, idx: number) => { - result.push({ - nameCol: NameColComponent(item.resourceType, item.resourceName), - typeCol: TypeColComponent(item.resourceType), - dbNameCol: DbNameColComponent(item.options?.databaseName), - ctimeCol: CtimeColComponent(item.updatedAt), - extraCol: ( - showFromFunction()} - setCurId={changeCurResourceId} - editActionType={editActionType} - /> - ), + const tmpResourcesList = cloneDeep(resourcesList) + tmpResourcesList + .sort((a, b) => { + return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime() + }) + .forEach((item: Resource) => { + result.push({ + nameCol: NameColComponent(item.resourceType, item.resourceName), + typeCol: TypeColComponent(item.resourceType), + dbNameCol: DbNameColComponent(item.options?.databaseName), + ctimeCol: CtimeColComponent(item.updatedAt), + extraCol: ( + showFromFunction()} + setCurId={changeCurResourceId} + editActionType={editActionType} + /> + ), + }) }) - }) return result }, [resourcesList]) From ee2bca2cc8c9adc1bc184fcb8f111f31efd2bf6f Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 22 Jul 2022 16:00:11 +0800 Subject: [PATCH 037/148] fix: panel config --- src/widgetLibrary/BarProgressWidget/panelConfig.tsx | 1 - src/widgetLibrary/CircleProgressWidget/panelConfig.tsx | 1 - src/widgetLibrary/DateRangeWidget/panelConfig.tsx | 4 ---- src/widgetLibrary/DateTimeWidget/panelConfig.tsx | 4 ---- src/widgetLibrary/DateWidget/panelConfig.tsx | 4 ---- src/widgetLibrary/DividerWidget/panelConfig.tsx | 1 - src/widgetLibrary/EditableWidget/panelConfig.tsx | 1 - src/widgetLibrary/ImageWidget/panelConfig.tsx | 1 - src/widgetLibrary/NumberInputWidget/panelConfig.tsx | 1 - src/widgetLibrary/RateWidget/panelConfig.tsx | 1 - src/widgetLibrary/SwitchWidget/panelConfig.tsx | 1 - src/widgetLibrary/TextWidget/panelConfig.tsx | 1 - src/widgetLibrary/TimelineWidget/panelConfig.tsx | 1 - 13 files changed, 22 deletions(-) diff --git a/src/widgetLibrary/BarProgressWidget/panelConfig.tsx b/src/widgetLibrary/BarProgressWidget/panelConfig.tsx index 30d9264045..4b32132cda 100644 --- a/src/widgetLibrary/BarProgressWidget/panelConfig.tsx +++ b/src/widgetLibrary/BarProgressWidget/panelConfig.tsx @@ -101,7 +101,6 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ setterType: "DYNAMIC_SWITCH_SETTER", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "barProgressName" }, attrName: "hidden", useCustomLayout: true, expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx b/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx index 3a17756821..0ac128afb6 100644 --- a/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx +++ b/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx @@ -52,7 +52,6 @@ export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ setterType: "DYNAMIC_SWITCH_SETTER", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "circelProgressName" }, attrName: "hidden", useCustomLayout: true, expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/DateRangeWidget/panelConfig.tsx b/src/widgetLibrary/DateRangeWidget/panelConfig.tsx index 5b4ba83a85..64788c1154 100644 --- a/src/widgetLibrary/DateRangeWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateRangeWidget/panelConfig.tsx @@ -25,9 +25,6 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ id: "date-basic-Format", labelName: i18n.t("editor.inspect.setter_label.format"), labelDesc: i18n.t("editor.inspect.setter_tooltip.date_format"), - transComponents: { - DayJS: , - }, attrName: "dateFormat", setterType: "INPUT_SETTER", }, @@ -205,7 +202,6 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ setterType: "DYNAMIC_SWITCH_SETTER", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "dateRangeName" }, attrName: "hidden", useCustomLayout: true, expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/DateTimeWidget/panelConfig.tsx b/src/widgetLibrary/DateTimeWidget/panelConfig.tsx index c2310b6b1b..00ecd2fba0 100644 --- a/src/widgetLibrary/DateTimeWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateTimeWidget/panelConfig.tsx @@ -21,9 +21,6 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ id: "date_time-basic-date-format", labelName: i18n.t("editor.inspect.setter_label.format"), labelDesc: i18n.t("editor.inspect.setter_tooltip.date_format"), - transComponents: { - DayJS: , - }, attrName: "dateFormat", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -217,7 +214,6 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ setterType: "DYNAMIC_SWITCH_SETTER", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "dateTimeName" }, attrName: "hidden", useCustomLayout: true, expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/DateWidget/panelConfig.tsx b/src/widgetLibrary/DateWidget/panelConfig.tsx index 5d8cd8c294..6a3659fecb 100644 --- a/src/widgetLibrary/DateWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateWidget/panelConfig.tsx @@ -23,9 +23,6 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ id: "date-basic-Format", labelName: i18n.t("editor.inspect.setter_label.format"), labelDesc: i18n.t("editor.inspect.setter_tooltip.date_format"), - transComponents: { - DayJS: , - }, attrName: "dateFormat", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, @@ -197,7 +194,6 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ setterType: "DYNAMIC_SWITCH_SETTER", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "dateName" }, attrName: "hidden", useCustomLayout: true, expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/DividerWidget/panelConfig.tsx b/src/widgetLibrary/DividerWidget/panelConfig.tsx index 6ba6a917fe..1221357ac5 100644 --- a/src/widgetLibrary/DividerWidget/panelConfig.tsx +++ b/src/widgetLibrary/DividerWidget/panelConfig.tsx @@ -50,7 +50,6 @@ export const DIVIDER_PANEL_CONFIG: PanelConfig[] = [ setterType: "DYNAMIC_SWITCH_SETTER", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "dividerName" }, attrName: "hidden", useCustomLayout: true, expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/EditableWidget/panelConfig.tsx b/src/widgetLibrary/EditableWidget/panelConfig.tsx index 2ed6658ae5..55e8f8de8c 100644 --- a/src/widgetLibrary/EditableWidget/panelConfig.tsx +++ b/src/widgetLibrary/EditableWidget/panelConfig.tsx @@ -222,7 +222,6 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ id: "editable-text-layout-hidden", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "editableTextName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", placeholder: "false", diff --git a/src/widgetLibrary/ImageWidget/panelConfig.tsx b/src/widgetLibrary/ImageWidget/panelConfig.tsx index f9b9bbba0b..c6edf8e3a1 100644 --- a/src/widgetLibrary/ImageWidget/panelConfig.tsx +++ b/src/widgetLibrary/ImageWidget/panelConfig.tsx @@ -74,7 +74,6 @@ export const IMAGE_PANEL_CONFIG: PanelConfig[] = [ id: "image-layout-hidden", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "imageName" }, attrName: "hidden", expectedType: VALIDATION_TYPES.BOOLEAN, setterType: "DYNAMIC_SWITCH_SETTER", diff --git a/src/widgetLibrary/NumberInputWidget/panelConfig.tsx b/src/widgetLibrary/NumberInputWidget/panelConfig.tsx index c140d0bb52..29cff79733 100644 --- a/src/widgetLibrary/NumberInputWidget/panelConfig.tsx +++ b/src/widgetLibrary/NumberInputWidget/panelConfig.tsx @@ -215,7 +215,6 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ id: `${widgetBaseName}-layout-hidden`, labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "numberInputName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", placeholder: "false", diff --git a/src/widgetLibrary/RateWidget/panelConfig.tsx b/src/widgetLibrary/RateWidget/panelConfig.tsx index d2f8df3183..d3f8dd5683 100644 --- a/src/widgetLibrary/RateWidget/panelConfig.tsx +++ b/src/widgetLibrary/RateWidget/panelConfig.tsx @@ -191,7 +191,6 @@ export const RATE_PANEL_CONFIG: PanelConfig[] = [ setterType: "DYNAMIC_SWITCH_SETTER", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "rateName" }, useCustomLayout: true, attrName: "hidden", expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/SwitchWidget/panelConfig.tsx b/src/widgetLibrary/SwitchWidget/panelConfig.tsx index 61d1b0634d..40adb5ac3f 100644 --- a/src/widgetLibrary/SwitchWidget/panelConfig.tsx +++ b/src/widgetLibrary/SwitchWidget/panelConfig.tsx @@ -303,7 +303,6 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ id: "switch-layout-hidden", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "switchName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", placeholder: "false", diff --git a/src/widgetLibrary/TextWidget/panelConfig.tsx b/src/widgetLibrary/TextWidget/panelConfig.tsx index 5c9b5a1842..449eb6903f 100644 --- a/src/widgetLibrary/TextWidget/panelConfig.tsx +++ b/src/widgetLibrary/TextWidget/panelConfig.tsx @@ -100,7 +100,6 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ id: "text-layout-hidden", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "textName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", useCustomLayout: true, diff --git a/src/widgetLibrary/TimelineWidget/panelConfig.tsx b/src/widgetLibrary/TimelineWidget/panelConfig.tsx index d475d324ca..145a4f6e28 100644 --- a/src/widgetLibrary/TimelineWidget/panelConfig.tsx +++ b/src/widgetLibrary/TimelineWidget/panelConfig.tsx @@ -47,7 +47,6 @@ export const TIMELINE_PANEL_CONFIG: PanelConfig[] = [ id: "text-layout-hidden", labelName: i18n.t("editor.inspect.setter_label.hidden"), labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), - labelDescOption: { name: "timelineName" }, setterType: "DYNAMIC_SWITCH_SETTER", attrName: "hidden", useCustomLayout: true, From dbda394b80cb67799eced7d448b76ec70e159ea9 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 22 Jul 2022 16:08:33 +0800 Subject: [PATCH 038/148] fix: i18n --- src/i18n/locale/en-US.json | 2 +- src/i18n/locale/zh-CN.json | 2 +- src/page/App/components/InspectPanel/label.tsx | 10 +++++++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/i18n/locale/en-US.json b/src/i18n/locale/en-US.json index 77faf21750..3f95c0721f 100644 --- a/src/i18n/locale/en-US.json +++ b/src/i18n/locale/en-US.json @@ -563,7 +563,7 @@ "switch_default_value": "Set the initial status of the switch. You can dynamically change the default value by JavaScript.", "component_default_value": "The initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}.", "map_data_option": "Use either an array of values or an object of keys mapped to arrays. Each item in your data source is mapped to each option", - "date_format": "A valid date format string. See dayJS", + "date_format": "A valid date format string. See [dayJS](https://day.js.org/docs/en/parse/string-format)", "loading": "Whether the component should show a loading indicator.", "progress_percentage": "The percentage value is between 0 and 100", "timeline_direction": "Change the direction of the timeline." diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index 0441da21ff..00b98b47ef 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -563,7 +563,7 @@ "switch_default_value": "设置开关的初始状态。您可以通过 JavaScript 动态改变开关的初始状态。", "component_default_value": "组件的默认值。您可以使用模版语法在框中输入 JavaScript 语句动态改变默认值。", "map_data_option": "使用数值或由键值组成的对象映射成选项。数据源中的每个项都映射到每个选项", - "date_format": "一个符合规范的时间格式，请参考 dayJS", + "date_format": "一个符合规范的时间格式，请参考 [dayJs](https://day.js.org/docs/en/parse/string-format)", "loading": "控制组件是否为加载状态。", "progress_percentage": "进度条的数值范围为 0-100", "timeline_direction": "切换时间轴的方向" diff --git a/src/page/App/components/InspectPanel/label.tsx b/src/page/App/components/InspectPanel/label.tsx index ea6ee5959e..0892fe7042 100644 --- a/src/page/App/components/InspectPanel/label.tsx +++ b/src/page/App/components/InspectPanel/label.tsx @@ -2,13 +2,21 @@ import { FC } from "react" import { Tooltip } from "@illa-design/tooltip" import { applyLabelTipsStyle, labelTipsTextStyle } from "./style" import { PanelLabelProps } from "./interface" +import { globalColor, illaPrefix } from "@illa-design/theme" +import { Text } from "@/widgetLibrary/TextWidget" export const PanelLabel: FC = (props) => { const { labelDesc, labelName, isInList } = props return ( {labelDesc}} + content={ + + } trigger="hover" position="left" maxWidth="240px" From 594c0c8adbba40a661ff8077eab1944be9351759 Mon Sep 17 00:00:00 2001 From: smallSohoSolo Date: Fri, 22 Jul 2022 16:29:27 +0800 Subject: [PATCH 039/148] fix: remove old action --- illa-design | 2 +- src/assets/action-list-empty-state.svg | 5 + src/i18n/locale/en-US.json | 2 +- src/i18n/locale/zh-CN.json | 2 +- src/middleware/settingsInfoRequest.tsx | 36 -- .../ActionResult/ApiResult/index.tsx | 58 --- .../ActionResult/ApiResult/interface.ts | 5 - .../ActionResult/DatabaseResult/index.tsx | 47 -- .../ActionResult/DatabaseResult/interface.ts | 5 - .../ActionResult/JSONViewer/index.tsx | 31 -- .../ActionResult/JSONViewer/interface.ts | 4 - .../ActionResult/JSONViewer/style.ts | 5 - .../ActionResult/TransformerResult/index.tsx | 11 - .../TransformerResult/interface.ts | 3 - .../ActionResult/TransformerResult/style.ts | 5 - .../ActionEditorPanel/ActionResult/index.tsx | 100 ---- .../ActionResult/interface.ts | 10 - .../ActionEditorPanel/ActionResult/style.ts | 60 --- .../ActionResultErrorIndicator/index.tsx | 25 - .../ActionResultErrorIndicator/interface.ts | 3 - .../ActionResultErrorIndicator/style.ts | 30 -- .../ActionEditorPanel/EditorHeader/index.tsx | 19 - .../EditorHeader/interface.ts | 9 - .../EditorHeader/moreActionButton.tsx | 85 ---- .../EditorHeader/runActionButton.tsx | 186 ------- .../ActionEditorPanel/EditorHeader/style.ts | 23 - .../EventHandler/eventHandlerConfig.tsx | 351 ------------- .../ResourceEditor/EventHandler/index.tsx | 60 --- .../ResourceEditor/FieldArray/index.tsx | 131 ----- .../ResourceEditor/FieldArray/interface.tsx | 18 - .../ResourceEditor/FieldArray/style.tsx | 71 --- .../ResourceEditor/FieldArray/util.ts | 62 --- .../ResourceEditor/ResourcePanel/index.tsx | 54 -- .../ResourceEditor/ResourcePanel/interface.ts | 6 - .../ResourceEditor/ResourceParams/index.tsx | 22 - .../ResourceParams/interface.tsx | 6 - .../ResourceEditor/Transformer/index.tsx | 71 --- .../ResourceEditor/Transformer/interface.ts | 6 - .../ResourceEditor/Transformer/style.ts | 11 - .../ResourceEditor/index.tsx | 143 ------ .../ResourceEditor/interface.tsx | 4 - .../ActionEditorPanel/TitleInput/index.tsx | 144 ------ .../ActionEditorPanel/TitleInput/interface.ts | 9 - .../ActionEditorPanel/TitleInput/style.ts | 67 --- .../TransformerEditor/index.tsx | 47 -- .../TransformerEditor/interface.ts | 4 - .../TransformerEditor/style.ts | 19 - .../context/ActionEditorPanelContext.tsx | 49 -- .../ActionEditor/ActionEditorPanel/index.tsx | 91 ---- .../ActionEditorPanel/interface.ts | 15 - .../ActionEditor/ActionEditorPanel/style.tsx | 336 ------------ .../ActionResourceSelector/index.tsx | 110 ---- .../ActionResourceSelector/interface.ts | 7 - .../ActionResourceSelector/style.ts | 63 --- .../ActionTypeSelector/index.tsx | 108 ---- .../ActionTypeSelector/interface.ts | 26 - .../ActionTypeSelector/style.ts | 84 --- .../ActionEditor/ActionGenerator/index.tsx | 127 ----- .../ActionEditor/ActionGenerator/interface.ts | 13 - .../ActionEditor/ActionGenerator/style.ts | 5 - .../ActionEditor/ActionList/Runtime/index.tsx | 166 ------ .../ActionList/Runtime/interface.ts | 5 - .../ActionEditor/ActionList/Runtime/style.ts | 38 -- .../ActionEditor/ActionList/SearchHeader.tsx | 112 ---- .../ActionEditor/ActionList/index.tsx | 300 ----------- .../ActionEditor/ActionList/interface.tsx | 26 - .../ActionEditor/ActionList/style.tsx | 309 ------------ .../Resource/MySQL/configure/index.tsx | 477 ------------------ .../Resource/MySQL/configure/input-upload.tsx | 72 --- .../Resource/MySQL/configure/style.tsx | 30 -- .../ActionEditor/Resource/MySQL/index.ts | 3 - .../ActionEditor/Resource/MySQL/interface.ts | 58 --- .../Resource/MySQL/param/index.tsx | 30 -- .../Resource/MySQL/param/style.tsx | 5 - .../configure/Authentication/Basic.tsx | 53 -- .../configure/Authentication/Bearer.tsx | 26 - .../configure/Authentication/OAuth2.tsx | 225 --------- .../configure/Authentication/index.tsx | 3 - .../configure/Authentication/interface.tsx | 15 - .../RESTAPI/configure/ParamList/index.tsx | 108 ---- .../RESTAPI/configure/ParamList/interface.ts | 8 - .../RESTAPI/configure/ParamList/style.tsx | 59 --- .../Resource/RESTAPI/configure/index.tsx | 247 --------- .../Resource/RESTAPI/configure/style.tsx | 21 - .../ActionEditor/Resource/RESTAPI/index.ts | 3 - .../Resource/RESTAPI/interface.tsx | 72 --- .../Resource/RESTAPI/param/Body.tsx | 219 -------- .../Resource/RESTAPI/param/index.tsx | 420 --------------- .../Resource/RESTAPI/param/style.tsx | 27 - .../ActionEditor/Resource/RESTAPI/util.ts | 56 -- .../components/ActionEditor/Resource/data.tsx | 72 --- .../components/ActionEditor/Resource/index.ts | 4 - .../ActionEditor/Resource/interface.ts | 5 - .../ActionEditor/Resource/style.tsx | 231 --------- .../ResourceForm/Editor/index.tsx | 212 -------- .../ResourceForm/Editor/interface.tsx | 14 - .../ResourceForm/Editor/style.tsx | 33 -- .../ResourceForm/Selector/index.tsx | 67 --- .../ResourceForm/Selector/interface.tsx | 17 - .../ResourceForm/Selector/style.tsx | 91 ---- .../ActionEditor/ResourceForm/index.tsx | 76 --- .../ActionEditor/ResourceForm/interface.tsx | 15 - .../ActionEditor/ResourceForm/style.tsx | 16 - .../components/ActionTypeIcon/index.tsx | 34 -- .../components/ActionTypeIcon/interface.ts | 5 - .../App/components/ActionEditor/constant.ts | 8 - .../App/components/ActionEditor/context.ts | 8 - .../App/components/ActionEditor/index.tsx | 334 ------------ .../App/components/ActionEditor/interface.tsx | 36 -- .../App/components/ActionEditor/layout.tsx | 45 -- .../App/components/ActionEditor/style.tsx | 69 --- src/page/App/components/ActionEditor/utils.ts | 32 -- .../components/Actions/ActionList/index.tsx | 120 +++++ .../components/Actions/ActionList/style.ts | 37 ++ .../Actions/ActionListItem/index.tsx | 88 ++++ .../Actions/ActionListItem/interface.ts | 7 + .../Actions/ActionListItem/style.ts | 80 +++ .../ActionPanel/ActionTitleBar/index.tsx | 64 +++ .../ActionPanel/ActionTitleBar/interface.ts | 6 + .../Actions/ActionPanel/MysqlPanel/index.tsx | 9 + .../Actions/ActionPanel/MysqlPanel/style.ts | 3 + .../ActionPanel/RestApiPanel/index.tsx | 8 + .../ActionPanel/TransformerPanel/index.tsx | 8 + .../components/Actions/ActionPanel/index.tsx | 43 ++ .../Actions/ActionPanel/interface.ts | 6 + .../components/Actions/ActionPanel/style.ts | 35 ++ .../components/Actions/SearchHeader/index.tsx | 94 ++++ .../Actions/SearchHeader/interface.tsx | 5 + .../components/Actions/SearchHeader/style.tsx | 54 ++ src/page/App/components/Actions/getIcon.tsx | 46 ++ src/page/App/components/Actions/index.tsx | 24 + src/page/App/components/Actions/styles.ts | 31 ++ .../App/components/DataWorkspace/index.tsx | 6 +- src/page/App/components/PageNavBar/index.tsx | 1 - .../SelectSetter/eventTargetActionSelect.tsx | 61 +-- src/page/App/index.tsx | 11 +- src/page/App/style.tsx | 1 + .../Dashboard/DashboardResources/index.tsx | 141 +----- .../Dashboard/DashboardResources/style.tsx | 31 +- .../components/DashboardGenerator/index.tsx | 118 ----- .../DashboardGenerator/interface.tsx | 21 - .../components/DashboardGenerator/style.ts | 5 - .../components/DashboardTitleBar/style.tsx | 13 +- src/redux/config/configReducer.ts | 17 - src/redux/config/configSlice.ts | 4 +- src/redux/config/configState.ts | 9 +- src/redux/currentApp/action/actionReducer.ts | 45 +- src/redux/currentApp/action/actionSelector.ts | 39 +- src/redux/currentApp/action/actionSlice.ts | 4 +- src/redux/currentApp/action/actionState.ts | 41 +- .../editor/components/componentsSelector.ts | 15 + .../editor/components/componentsState.ts | 1 - .../dependencies/dependenciesListener.ts | 12 +- .../execution/executionListener.ts | 6 +- .../execution/executionSelector.ts | 6 +- src/redux/resource/resourceReducer.ts | 10 +- src/redux/resource/resourceSelector.ts | 2 +- src/redux/resource/resourceState.ts | 18 +- src/router/routerConfig.tsx | 2 +- src/utils/action/errorHandler.ts | 40 -- src/utils/action/execute.ts | 149 ------ src/utils/action/performance.ts | 121 ----- src/utils/generators/generateComponentNode.ts | 1 - src/utils/hooks/useResize.tsx | 153 ------ src/widgetLibrary/ButtonWidget/button.tsx | 5 +- .../EditableWidget/editableText.tsx | 3 +- src/widgetLibrary/EditableWidget/interface.ts | 1 + 167 files changed, 933 insertions(+), 8676 deletions(-) create mode 100644 src/assets/action-list-empty-state.svg delete mode 100644 src/middleware/settingsInfoRequest.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/ApiResult/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/ApiResult/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/DatabaseResult/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/DatabaseResult/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer/style.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/TransformerResult/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/TransformerResult/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/TransformerResult/style.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/style.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator/style.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/moreActionButton.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/runActionButton.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/style.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/FieldArray/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/FieldArray/interface.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/FieldArray/style.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/FieldArray/util.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/ResourcePanel/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/ResourcePanel/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/ResourceParams/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/ResourceParams/interface.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/Transformer/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/Transformer/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/Transformer/style.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/interface.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/TitleInput/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/TitleInput/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/TitleInput/style.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor/style.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/context/ActionEditorPanelContext.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionEditorPanel/style.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector/style.ts delete mode 100644 src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/style.ts delete mode 100644 src/page/App/components/ActionEditor/ActionGenerator/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionGenerator/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionGenerator/style.ts delete mode 100644 src/page/App/components/ActionEditor/ActionList/Runtime/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionList/Runtime/interface.ts delete mode 100644 src/page/App/components/ActionEditor/ActionList/Runtime/style.ts delete mode 100644 src/page/App/components/ActionEditor/ActionList/SearchHeader.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionList/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionList/interface.tsx delete mode 100644 src/page/App/components/ActionEditor/ActionList/style.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/MySQL/configure/index.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/MySQL/configure/input-upload.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/MySQL/configure/style.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/MySQL/index.ts delete mode 100644 src/page/App/components/ActionEditor/Resource/MySQL/interface.ts delete mode 100644 src/page/App/components/ActionEditor/Resource/MySQL/param/index.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/MySQL/param/style.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/Basic.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/Bearer.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/OAuth2.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/index.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/interface.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/configure/ParamList/index.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/configure/ParamList/interface.ts delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/configure/ParamList/style.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/configure/index.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/configure/style.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/index.ts delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/interface.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/param/Body.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/param/index.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/param/style.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/RESTAPI/util.ts delete mode 100644 src/page/App/components/ActionEditor/Resource/data.tsx delete mode 100644 src/page/App/components/ActionEditor/Resource/index.ts delete mode 100644 src/page/App/components/ActionEditor/Resource/interface.ts delete mode 100644 src/page/App/components/ActionEditor/Resource/style.tsx delete mode 100644 src/page/App/components/ActionEditor/ResourceForm/Editor/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ResourceForm/Editor/interface.tsx delete mode 100644 src/page/App/components/ActionEditor/ResourceForm/Editor/style.tsx delete mode 100644 src/page/App/components/ActionEditor/ResourceForm/Selector/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ResourceForm/Selector/interface.tsx delete mode 100644 src/page/App/components/ActionEditor/ResourceForm/Selector/style.tsx delete mode 100644 src/page/App/components/ActionEditor/ResourceForm/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ResourceForm/interface.tsx delete mode 100644 src/page/App/components/ActionEditor/ResourceForm/style.tsx delete mode 100644 src/page/App/components/ActionEditor/components/ActionTypeIcon/index.tsx delete mode 100644 src/page/App/components/ActionEditor/components/ActionTypeIcon/interface.ts delete mode 100644 src/page/App/components/ActionEditor/constant.ts delete mode 100644 src/page/App/components/ActionEditor/context.ts delete mode 100644 src/page/App/components/ActionEditor/index.tsx delete mode 100644 src/page/App/components/ActionEditor/interface.tsx delete mode 100644 src/page/App/components/ActionEditor/layout.tsx delete mode 100644 src/page/App/components/ActionEditor/style.tsx delete mode 100644 src/page/App/components/ActionEditor/utils.ts create mode 100644 src/page/App/components/Actions/ActionList/index.tsx create mode 100644 src/page/App/components/Actions/ActionList/style.ts create mode 100644 src/page/App/components/Actions/ActionListItem/index.tsx create mode 100644 src/page/App/components/Actions/ActionListItem/interface.ts create mode 100644 src/page/App/components/Actions/ActionListItem/style.ts create mode 100644 src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx create mode 100644 src/page/App/components/Actions/ActionPanel/ActionTitleBar/interface.ts create mode 100644 src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx create mode 100644 src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts create mode 100644 src/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx create mode 100644 src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx create mode 100644 src/page/App/components/Actions/ActionPanel/index.tsx create mode 100644 src/page/App/components/Actions/ActionPanel/interface.ts create mode 100644 src/page/App/components/Actions/ActionPanel/style.ts create mode 100644 src/page/App/components/Actions/SearchHeader/index.tsx create mode 100644 src/page/App/components/Actions/SearchHeader/interface.tsx create mode 100644 src/page/App/components/Actions/SearchHeader/style.tsx create mode 100644 src/page/App/components/Actions/getIcon.tsx create mode 100644 src/page/App/components/Actions/index.tsx create mode 100644 src/page/App/components/Actions/styles.ts delete mode 100644 src/page/Dashboard/components/DashboardGenerator/index.tsx delete mode 100644 src/page/Dashboard/components/DashboardGenerator/interface.tsx delete mode 100644 src/page/Dashboard/components/DashboardGenerator/style.ts delete mode 100644 src/utils/action/errorHandler.ts delete mode 100644 src/utils/action/execute.ts delete mode 100644 src/utils/action/performance.ts delete mode 100644 src/utils/hooks/useResize.tsx diff --git a/illa-design b/illa-design index b52aca770f..7f5c3076d2 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit b52aca770fe1ee9857672f496ee7baae2cf0e33f +Subproject commit 7f5c3076d27d1fe9ed83fcf6f42efb44a660d498 diff --git a/src/assets/action-list-empty-state.svg b/src/assets/action-list-empty-state.svg new file mode 100644 index 0000000000..53b4320700 --- /dev/null +++ b/src/assets/action-list-empty-state.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/i18n/locale/en-US.json b/src/i18n/locale/en-US.json index 7f69931db0..e4034a8bd2 100644 --- a/src/i18n/locale/en-US.json +++ b/src/i18n/locale/en-US.json @@ -252,7 +252,7 @@ "title": { "select": "Select Resource Type", "database": "DATABASES", - "api": "APIS", + "api": "API", "configure": "Configure {{name}}" }, "btn": { diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index 244922d960..e3bfb26050 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -252,7 +252,7 @@ "title": { "select": "选择资源类型", "database": "数据库", - "api": "APIS", + "api": "API", "configure": "配置 {{name}}" }, "btn": { diff --git a/src/middleware/settingsInfoRequest.tsx b/src/middleware/settingsInfoRequest.tsx deleted file mode 100644 index d6f50a3387..0000000000 --- a/src/middleware/settingsInfoRequest.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { FC, Fragment, useEffect } from "react" -import { useDispatch } from "react-redux" -import { getLocalStorage } from "@/utils/storage" -import { Api } from "@/api/base" -import { CurrentUser } from "@/redux/currentUser/currentUserState" -import { currentUserActions } from "@/redux/currentUser/currentUserSlice" - -const SettingsInfoRequest: FC = (props) => { - const dispatch = useDispatch() - - // user info - useEffect(() => { - const token = getLocalStorage("token") - if (token === "" || token === undefined || token === null) { - return - } - Api.request( - { - url: "/users", - method: "GET", - }, - (response) => { - dispatch( - currentUserActions.updateCurrentUserReducer({ - ...response.data, - nickname: response.data.nickname, - }), - ) - }, - (response) => {}, - ) - }, []) - return {props.children} -} - -export default SettingsInfoRequest diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/ApiResult/index.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/ApiResult/index.tsx deleted file mode 100644 index 0d9621b224..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/ApiResult/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { FC } from "react" -import { RESTAPIConfigureValues } from "@/page/App/components/ActionEditor/Resource" -import { useTranslation } from "react-i18next" -import { useSelector } from "react-redux" -import { getSelectedAction } from "@/redux/config/configSelector" -import { selectAllResource } from "@/redux/resource/resourceSelector" -import { Tabs, TabPane } from "@illa-design/tabs" -import { JSONViewer } from "@/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer" -import { ApiResultProps } from "./interface" - -function concatUrl(path: string = "", urlParams = [], baseUrl?: string) { - const params = - urlParams && urlParams.map(({ key, value }) => `${key}=${value}`).join("&") - const url = params ? `${path}?${params}` : path - return baseUrl ? `${baseUrl}/${url}` : url -} - -export const ApiResult: FC = (props) => { - const activeActionItem = useSelector(getSelectedAction) - const resource = useSelector(selectAllResource).find( - ({ resourceId }) => resourceId === activeActionItem.resourceId, - ) - const baseURL = (resource?.options as RESTAPIConfigureValues)?.baseURL - const url = activeActionItem.actionTemplate?.url - const urlParams = activeActionItem.actionTemplate?.urlParams - const method = activeActionItem.actionTemplate?.method - const body = activeActionItem.actionTemplate?.body - const headers = activeActionItem.actionTemplate?.headers - const { result } = props - const data = result?.data - const apiRequest = { - request: { - url: concatUrl(url, urlParams, baseURL), - method, - body: body?.length ? body : null, - headers: headers?.length ? headers : null, - }, - response: result, - } - - const { t } = useTranslation() - - return ( - - - - - - - - - ) -} - -ApiResult.displayName = "ApiResult" diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/ApiResult/interface.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/ApiResult/interface.ts deleted file mode 100644 index d5fd8cd415..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/ApiResult/interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { AxiosResponse } from "axios" - -export interface ApiResultProps { - result?: AxiosResponse -} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/DatabaseResult/index.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/DatabaseResult/index.tsx deleted file mode 100644 index c1c3ded511..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/DatabaseResult/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { FC, useState, useMemo } from "react" -import { useTranslation } from "react-i18next" -import { Table } from "@illa-design/table" -import { Tabs, TabPane } from "@illa-design/tabs" -import { JSONViewer } from "@/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer" -import { DatabaseResultProps } from "./interface" - -export const DatabaseResult: FC = (props) => { - const { result } = props - const data = result?.data - const { t } = useTranslation() - const [activeKey, setActiveKey] = useState("table") - - const keys = data?.length ? Object.keys(data[0]).map((k) => k) : [] - - const columns = useMemo(() => { - return keys.length - ? keys.map((k) => { - return { - accessor: k, - Header: `${k}`, - } - }) - : [] - }, [keys]) - - return ( - - - - - - - - - ) -} - -DatabaseResult.displayName = "DatabaseResult" diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/DatabaseResult/interface.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/DatabaseResult/interface.ts deleted file mode 100644 index 84cdc00a87..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/DatabaseResult/interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { AxiosResponse } from "axios" - -export interface DatabaseResultProps { - result?: AxiosResponse -} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer/index.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer/index.tsx deleted file mode 100644 index 415f06f345..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { FC } from "react" -import ReactJson from "react-json-view" -import { JSONViewerProps } from "./interface" -import { jsonViewContainer } from "./style" - -export const JSONViewer: FC = (props) => { - const { src = {}, collapsed } = props - - const reactJsonConfig = { - name: false as const, - iconStyle: "triangle" as const, - enableClipboard: false, - displayObjectSize: false, - displayDataTypes: false, - displayArrayKey: false, - indentWidth: 2, - } - - return ( -
- {/* @ts-ignore */} - -
- ) -} - -JSONViewer.displayName = "JSONViewer" diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer/interface.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer/interface.ts deleted file mode 100644 index 2962ec12ac..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer/interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface JSONViewerProps { - src?: object - collapsed?: boolean | number -} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer/style.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer/style.ts deleted file mode 100644 index 9fa6ede2d2..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/JSONViewer/style.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { css } from "@emotion/react" - -export const jsonViewContainer = css` - padding: 8px; -` diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/TransformerResult/index.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/TransformerResult/index.tsx deleted file mode 100644 index cb6bdd15ee..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/TransformerResult/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { FC } from "react" -import { TransformerResultProps } from "./interface" -import { transformerResultContainerStyle } from "./style" - -export const TransformerResult: FC = (props) => { - const { result } = props - - return
{result}
-} - -TransformerResult.displayName = "TransformerResult" diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/TransformerResult/interface.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/TransformerResult/interface.ts deleted file mode 100644 index 546bbbd043..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/TransformerResult/interface.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface TransformerResultProps { - result?: string -} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/TransformerResult/style.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/TransformerResult/style.ts deleted file mode 100644 index c17d5463aa..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/TransformerResult/style.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { css } from "@emotion/react" - -export const transformerResultContainerStyle = css` - padding: 8px; -` diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/index.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/index.tsx deleted file mode 100644 index c4f7e244b4..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/index.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { FC, useRef, useState, useContext, useMemo } from "react" -import { useTranslation } from "react-i18next" -import { useSelector } from "react-redux" -import { motion } from "framer-motion" -import { css } from "@emotion/react" -import { RightIcon, CloseIcon } from "@illa-design/icon" -import { useResize } from "@/utils/hooks/useResize" -import { AxiosResponse } from "axios" -import { - actionEditorPanelLayoutWrapper, - applyContainerHeight, - applyResizerStyle, -} from "@/page/App/components/ActionEditor/style" -import { getSelectedAction } from "@/redux/config/configSelector" -import { ActionItem } from "@/redux/currentApp/action/actionState" -import { ActionEditorContext } from "@/page/App/components/ActionEditor/context" -import { ApiResult } from "@/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/ApiResult" -import { DatabaseResult } from "@/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/DatabaseResult" -import { ACTION_TYPE } from "@/page/App/components/ActionEditor/constant" -import { - resCloseIconStyle, - applyResContainerStyle, - resHeaderStyle, - resTitleStyle, - resContentStyle, - resSuccessStatusIconStyle, -} from "./style" -import { ActionResultProps, ActionResultType } from "./interface" -import { TransformerResult } from "./TransformerResult" - -const CONTAINER_DEFAULT_HEIGHT = 180 - -function renderResult(activeActionItem: ActionItem, result?: ActionResultType) { - const { actionType } = activeActionItem - - switch (actionType) { - case ACTION_TYPE.REST_API: - return - case ACTION_TYPE.MYSQL: - return - case ACTION_TYPE.TRANSFORMER: - return - } -} - -export const ActionResult: FC = (props) => { - const { onClose, result, className } = props - const { t } = useTranslation() - const activeActionItem = useSelector(getSelectedAction) - const { editorHeight } = useContext(ActionEditorContext) - const resultContainerRef = useRef(null) - const [containerHeight, setContainerHeight] = useState( - CONTAINER_DEFAULT_HEIGHT, - ) - - const onHeightChange = (height: number) => { - setContainerHeight(height) - } - - const resizer = useResize("vertical", resultContainerRef, onHeightChange) - const title = t("editor.action.result.title.success") - const resultNode = useMemo( - () => renderResult(activeActionItem, result), - [activeActionItem, result], - ) - - return ( - -
-
-
- - {title} - -
-
{resultNode}
-
- - ) -} - -ActionResult.displayName = "ActionResult" diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/interface.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/interface.ts deleted file mode 100644 index 41bb93e21e..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/interface.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { HTMLAttributes } from "react" -import { AxiosResponse } from "axios" - -export type ActionResultType = AxiosResponse | string - -export interface ActionResultProps extends HTMLAttributes { - result?: ActionResultType - error?: boolean - onClose?: () => void -} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/style.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/style.ts deleted file mode 100644 index af735b941c..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/style.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { css, SerializedStyles } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const resHeaderStyle = css` - height: 56px; - background-color: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; - display: flex; - align-items: center; - padding: 16px; -` - -export const resStatusIconStyle = css` - width: 24px; - height: 24px; -` - -export const resSuccessStatusIconStyle = css` - ${resStatusIconStyle} - & path { - fill: ${globalColor(`--${illaPrefix}-green-07`)}; - - &:last-child { - fill: ${globalColor(`--${illaPrefix}-green-03`)}; - } - } -` - -export const resTitleStyle = css` - font-weight: 500; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; - margin-left: 10px; - flex: 1; -` - -export const resContentStyle = css` - overflow: auto; -` - -export const resCloseIconStyle = css` - color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; - cursor: pointer; - padding: 8px; - font-size: 14px; - width: 14px; - height: 14px; - box-sizing: content-box; - &:hover { - color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; - } -` - -export function applyResContainerStyle(maxHeight: number): SerializedStyles { - return css` - display: flex; - flex-direction: column; - overflow: hidden; - min-height: 182px; - max-height: ${maxHeight}px; - ` -} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator/index.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator/index.tsx deleted file mode 100644 index 00de13c8f6..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { FC } from "react" -import { WarningCircleIcon } from "@illa-design/icon" -import { ActionResultErrorIndicatorProps } from "./interface" -import { - actionResultErrorIndicatorIconStyle, - actionResultErrorIndicatorMessageStyle, - actionResultErrorIndicatorWrapperStyle, -} from "./style" - -export const ActionResultErrorIndicator: FC = ( - props, -) => { - const { errorMessage } = props - return ( -
- - {errorMessage} -
- ) -} - -ActionResultErrorIndicator.displayName = "ActionResultErrorIndicator" diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator/interface.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator/interface.ts deleted file mode 100644 index 49317abcac..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator/interface.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface ActionResultErrorIndicatorProps { - errorMessage: string -} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator/style.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator/style.ts deleted file mode 100644 index e68bc05673..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator/style.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { css } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const actionResultErrorIndicatorWrapperStyle = css` - display: flex; - align-items: center; - padding: 16px; - background: ${globalColor(`--${illaPrefix}-red-07`)}; -` - -export const actionResultErrorIndicatorMessageStyle = css` - margin-left: 8px; - max-height: 40px; - overflow-y: auto; - font-size: 14px; -` - -export const actionResultErrorIndicatorIconStyle = css` - width: 24px; - height: 24px; - min-width: 24px; - - & path { - fill: ${globalColor(`--${illaPrefix}-orange-07`)}; - - &:last-child { - fill: ${globalColor(`--${illaPrefix}-orange-03`)}; - } - } -` diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/index.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/index.tsx deleted file mode 100644 index 90cb23fc9d..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { FC } from "react" -import { TitleInput } from "@/page/App/components/ActionEditor/ActionEditorPanel/TitleInput" -import { ActionEditorHeaderMoreButton } from "./moreActionButton" -import { headerStyle } from "./style" -import { RunActionButton } from "./runActionButton" - -export const ActionEditorHeader: FC = () => { - return ( -
- -
- - -
-
- ) -} - -ActionEditorHeader.displayName = "ActionEditorHeader" diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/interface.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/interface.ts deleted file mode 100644 index 45a9a77837..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/interface.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface DropDownListProps { - onDeleteActionItem: () => void - onDuplicateActionItem: () => void -} - -export interface ActionEditorHeaderMoreButtonProps extends DropDownListProps {} - -export interface ActionEditorHeaderProps - extends ActionEditorHeaderMoreButtonProps {} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/moreActionButton.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/moreActionButton.tsx deleted file mode 100644 index 192e77688d..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/moreActionButton.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { FC, useCallback, useContext, useState } from "react" -import { Dropdown, DropList } from "@illa-design/dropdown" -import { globalColor, illaPrefix } from "@illa-design/theme" -import { Button } from "@illa-design/button" -import { MoreIcon } from "@illa-design/icon" -import { useTranslation } from "react-i18next" -import { useSelector } from "react-redux" -import { getSelectedAction } from "@/redux/config/configSelector" -import { TriggerProps } from "@illa-design/trigger" -import { moreBtnMenuStyle, moreBtnStyle } from "./style" -import { ACTION_EDITOR_CONTEXT } from "@/page/App/components/ActionEditor/ActionEditorPanel/context/ActionEditorPanelContext" - -const { Item } = DropList - -const triggerProps: TriggerProps = { - position: "br", - clickOutsideToClose: true, - closeOnClick: true, - openDelay: 0, - closeDelay: 0, - showArrow: false, -} - -const DropDownList: FC = () => { - const { t } = useTranslation() - - const { onDuplicateActionItem, onDeleteActionItem } = useContext( - ACTION_EDITOR_CONTEXT, - ) - const onClickItemDropList = useCallback( - (key: string) => { - switch (key) { - case "duplicate": - onDuplicateActionItem() - break - case "delete": - onDeleteActionItem() - break - } - }, - [onDuplicateActionItem, onDeleteActionItem], - ) - - return ( - - - - - ) -} - -DropDownList.displayName = "DropDownList" - -export const ActionEditorHeaderMoreButton: FC = () => { - const [moreBtnMenuVisible, setMoreBtnMenuVisible] = useState(false) - const activeActionItem = useSelector(getSelectedAction) - - return ( - } - trigger="click" - popupVisible={moreBtnMenuVisible} - onVisibleChange={setMoreBtnMenuVisible} - disabled={activeActionItem.actionId === ""} - triggerProps={triggerProps} - > - - ) -} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/style.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/style.ts deleted file mode 100644 index 714f85fefe..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader/style.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { css } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const headerStyle = css` - display: flex; - align-items: center; - padding: 8px 16px; - height: 48px; - border-bottom: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - box-sizing: border-box; - width: 100%; - justify-content: space-between; -` - -export const moreBtnStyle = css` - margin-right: 8px; -` - -export const moreBtnMenuStyle = css` - padding: 8px 0; - width: 180px; - box-shadow: 0 2px 16px 0 ${globalColor(`--${illaPrefix}-blackAlpha-05`)}; -` diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig.tsx deleted file mode 100644 index f1db27d287..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig.tsx +++ /dev/null @@ -1,351 +0,0 @@ -import { PanelConfig } from "@/page/App/components/InspectPanel/interface" -import { VALIDATION_TYPES } from "@/utils/validationFactory" - -const BASE_TYPE = "ACTION_TYPE" - -export const EVENT_HANDLER_CONFIG: PanelConfig[] = [ - { - id: `${BASE_TYPE}-interaction-success-event-handler`, - attrName: "successEvents", - labelName: "Success", - // labelDesc: "xxxxx", - setterType: "EVENT_HANDLER_SETTER", - defaultValue: "success", - useCustomLayout: true, - childrenSetter: [ - { - id: "event", - labelName: "editor.inspect.setter_label.event", - setterType: "BASE_SELECT_SETTER", - attrName: "eventType", - options: [{ label: "Success", value: "success" }], - }, - { - id: "action", - labelName: "editor.inspect.setter_label.action", - setterType: "EVENT_ACTION_SELECT_SETTER", - attrName: "actionType", - options: [ - { - label: "editor.inspect.setter_label.trigger_query", - value: "datasource", - }, - { - label: "editor.inspect.setter_label.control_component", - value: "widget", - }, - { - label: "editor.inspect.setter_label.run_script", - value: "script", - }, - { - label: "editor.inspect.setter_label.go_to_url", - value: "openUrl", - }, - { - label: "editor.inspect.setter_label.show_notification", - value: "showNotification", - }, - ], - }, - { - id: "query", - labelName: "Query", - setterType: "BASE_SELECT_SETTER", - attrName: "queryID", - bindAttrName: "actionType", - shown: (type) => type === "datasource", - }, - { - id: "component", - labelName: "Component", - setterType: "EVENT_TARGET_SELECT_SETTER", - attrName: "widgetID", - bindAttrName: "actionType", - shown: (type) => type === "widget", - }, - { - id: "Method", - labelName: "Method", - setterType: "EVENT_WIDGET_METHOD_SELECT_SETTER", - attrName: "widgetMethod", - bindAttrName: "widgetID", - shown: (widgetID) => !!widgetID, - }, - { - id: "Value", - labelName: "Value", - setterType: "INPUT_SETTER", - attrName: "widgetTargetValue", - bindAttrName: "widgetMethod", - shown: (widgetMethod) => widgetMethod === "setValue", - }, - { - id: "imageUrl", - labelName: "Value", - setterType: "INPUT_SETTER", - attrName: "widgetTargetValue", - bindAttrName: "widgetMethod", - shown: (widgetMethod) => widgetMethod === "setImageUrl", - }, - { - id: "disabled", - labelName: "editor.inspect.setter_label.disabled", - setterType: "DYNAMIC_SWITCH_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - attrName: "disabled", - bindAttrName: "type", - useCustomLayout: true, - shown: (type) => type === "widget", - }, - { - id: "script", - setterType: "INPUT_SETTER", - attrName: "script", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.STRING, - shown: (type) => type === "script", - }, - { - id: "URL", - labelName: "URL", - setterType: "INPUT_SETTER", - attrName: "url", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.STRING, - shown: (type) => type === "openUrl", - }, - { - id: "newTab", - labelName: "New Tab", - setterType: "DYNAMIC_SWITCH_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - attrName: "newTab", - bindAttrName: "actionType", - useCustomLayout: true, - shown: (type) => type === "openUrl", - }, - { - id: "title", - labelName: "Title", - setterType: "INPUT_SETTER", - attrName: "title", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.STRING, - shown: (type) => type === "showNotification", - }, - { - id: "description", - labelName: "Description", - setterType: "INPUT_SETTER", - expectedType: VALIDATION_TYPES.STRING, - attrName: "description", - bindAttrName: "actionType", - shown: (type) => type === "showNotification", - }, - { - id: "notification-type", - labelName: "Type", - setterType: "BASE_SELECT_SETTER", - attrName: "notificationType", - bindAttrName: "actionType", - shown: (type) => type === "showNotification", - options: [ - { label: "Success", value: "success" }, - { label: "Error", value: "error" }, - { label: "Warning", value: "warning" }, - { label: "Info", value: "info" }, - ], - }, - { - id: "duration", - labelName: "Duration", - setterType: "INPUT_SETTER", - attrName: "duration", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.NUMBER, - shown: (type) => type === "showNotification", - }, - { - id: "enabled", - labelName: "Only run when", - // labelDesc: "xxxxx", - setterType: "INPUT_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - attrName: "enabled", - }, - ], - }, - { - id: `${BASE_TYPE}-interaction-failed-event-handler`, - attrName: "failedEvents", - labelName: "Failed", - // labelDesc: "xxxxx", - setterType: "EVENT_HANDLER_SETTER", - defaultValue: "failed", - useCustomLayout: true, - childrenSetter: [ - { - id: "event", - labelName: "editor.inspect.setter_label.event", - setterType: "BASE_SELECT_SETTER", - attrName: "eventType", - options: [{ label: "Failed", value: "failed" }], - }, - { - id: "action", - labelName: "editor.inspect.setter_label.action", - setterType: "EVENT_ACTION_SELECT_SETTER", - attrName: "actionType", - options: [ - { - label: "editor.inspect.setter_label.trigger_query", - value: "datasource", - }, - { - label: "editor.inspect.setter_label.control_component", - value: "widget", - }, - { - label: "editor.inspect.setter_label.run_script", - value: "script", - }, - { - label: "editor.inspect.setter_label.go_to_url", - value: "openUrl", - }, - { - label: "editor.inspect.setter_label.show_notification", - value: "showNotification", - }, - ], - }, - { - id: "query", - labelName: "Query", - setterType: "BASE_SELECT_SETTER", - attrName: "queryID", - bindAttrName: "actionType", - shown: (type) => type === "datasource", - }, - { - id: "component", - labelName: "Component", - setterType: "EVENT_TARGET_SELECT_SETTER", - attrName: "widgetID", - bindAttrName: "actionType", - shown: (type) => type === "widget", - }, - { - id: "Method", - labelName: "Method", - setterType: "EVENT_WIDGET_METHOD_SELECT_SETTER", - attrName: "widgetMethod", - bindAttrName: "widgetID", - shown: (widgetID) => !!widgetID, - }, - { - id: "Value", - labelName: "Value", - setterType: "INPUT_SETTER", - attrName: "widgetTargetValue", - bindAttrName: "widgetMethod", - shown: (widgetMethod) => widgetMethod === "setValue", - }, - { - id: "imageUrl", - labelName: "Value", - setterType: "INPUT_SETTER", - attrName: "widgetTargetValue", - bindAttrName: "widgetMethod", - shown: (widgetMethod) => widgetMethod === "setImageUrl", - }, - { - id: "disabled", - labelName: "editor.inspect.setter_label.disabled", - setterType: "DYNAMIC_SWITCH_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - attrName: "disabled", - bindAttrName: "type", - useCustomLayout: true, - shown: (type) => type === "widget", - }, - { - id: "script", - setterType: "INPUT_SETTER", - attrName: "script", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.STRING, - shown: (type) => type === "script", - }, - { - id: "URL", - labelName: "URL", - setterType: "INPUT_SETTER", - attrName: "url", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.STRING, - shown: (type) => type === "openUrl", - }, - { - id: "newTab", - labelName: "New Tab", - setterType: "DYNAMIC_SWITCH_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - attrName: "newTab", - bindAttrName: "actionType", - useCustomLayout: true, - shown: (type) => type === "openUrl", - }, - { - id: "title", - labelName: "Title", - setterType: "INPUT_SETTER", - attrName: "title", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.STRING, - shown: (type) => type === "showNotification", - }, - { - id: "description", - labelName: "Description", - setterType: "INPUT_SETTER", - expectedType: VALIDATION_TYPES.STRING, - attrName: "description", - bindAttrName: "actionType", - shown: (type) => type === "showNotification", - }, - { - id: "notification-type", - labelName: "Type", - setterType: "BASE_SELECT_SETTER", - attrName: "notificationType", - bindAttrName: "actionType", - shown: (type) => type === "showNotification", - options: [ - { label: "Success", value: "success" }, - { label: "Error", value: "error" }, - { label: "Warning", value: "warning" }, - { label: "Info", value: "info" }, - ], - }, - { - id: "duration", - labelName: "Duration", - setterType: "INPUT_SETTER", - attrName: "duration", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.NUMBER, - shown: (type) => type === "showNotification", - }, - { - id: "enabled", - labelName: "Only run when", - // labelDesc: "xxxxx", - setterType: "INPUT_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - attrName: "enabled", - }, - ], - }, -] diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/index.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/index.tsx deleted file mode 100644 index a1b2731e53..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/index.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { useTranslation } from "react-i18next" -import { handlerTitleStyle } from "@/page/App/components/ActionEditor/ActionEditorPanel/style" -import { fieldFactory } from "@/page/App/components/InspectPanel/utils/fieldFactory" -import { EVENT_HANDLER_CONFIG } from "@/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig" -import { SelectedProvider } from "@/page/App/components/InspectPanel/context/selectedContext" -import { useDispatch, useSelector } from "react-redux" -import { getSelectedAction } from "@/redux/config/configSelector" -import { useCallback, useContext, useMemo } from "react" -import { configActions } from "@/redux/config/configSlice" -import { ActionEditorContext } from "@/page/App/components/ActionEditor/context" - -export const EventHandler = () => { - const { t } = useTranslation() - const activeActionItem = useSelector(getSelectedAction) - const dispatch = useDispatch() - const { setIsActionDirty } = useContext(ActionEditorContext) - - const widgetType = activeActionItem.actionType - - const widgetDisplayName = activeActionItem.displayName - - const widgetProps = activeActionItem.actionTemplate || {} - - const handleUpdateDsl = useCallback( - (attrPath: string, value: any) => { - setIsActionDirty?.(true) - const updateSlice = { [attrPath]: value } - - dispatch( - configActions.updateSelectActionTemplate({ - displayName: widgetDisplayName, - updateSlice, - }), - ) - }, - [widgetDisplayName], - ) - return ( - <> -
-
- {t("editor.action.panel.label.event_handler")} -
- - {fieldFactory( - EVENT_HANDLER_CONFIG, - "ILLA_REDUX_CONFIG_SELECTED_ACTION", - )} - -
- - ) -} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/FieldArray/index.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/FieldArray/index.tsx deleted file mode 100644 index 7491f7bc5b..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/FieldArray/index.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import { FC } from "react" -import { useTranslation } from "react-i18next" -import { AddIcon, DeleteIcon } from "@illa-design/icon" -import { Button } from "@illa-design/button" -import { Select } from "@illa-design/select" -import { CodeEditor } from "@/components/CodeEditor" -import { FieldArrayProps } from "./interface" -import { - deleteIconWrapperStyle, - fieldItemStyle, - fieldItemKeyStyle, - fieldItemValueStyle, - fieldItemTypeStyle, - newButtonStyle, -} from "./style" - -export const FieldArray: FC = (props) => { - const { - hasType, - onChange, - value: fields = [], - typeOptions, - autoNewField, - onAdd, - onRemove, - } = props - - const { t } = useTranslation() - - function autoAddField(index: number) { - if (!autoNewField) { - return - } - - if (index === fields.length - 1) { - onAdd?.() - } - } - - const fieldList = fields.map((field, index) => { - return ( -
- {hasType ? ( - <> - { - onChange?.({ ...field, key: v }) - autoAddField(index) - }} - /> - { - setIsActionDirty?.(true) - dispatch( - configActions.updateSelectedAction({ - ...activeActionItem, - resourceId: value, - }), - ) - }} - triggerProps={{ - autoAlignPopupWidth: false, - disabledOutsideScrollable: true, - }} - > - - - {resourceList?.map( - ({ resourceId: id, resourceName: name, resourceType }) => ( - - ), - )} - -
onEditResource?.(resourceId as string)} - > - -
- - handleOnBlur()} - onPressEnter={() => handleOnBlur()} - value={title} - onChange={(v) => setTitle(v)} - key={"input"} - inputRef={inputRef} - css={titleInputStyle} - /> - - ) : ( - { - editable && setIsEditing(true) - }} - css={applyTitleContainerStyle(editable)} - initial={"hidden"} - animate={"visible"} - exit={"hidden"} - variants={variants} - transition={{ duration: 0.2 }} - key={"title"} - > - - {title} - - - - ) - - return {childrenNode} -} - -TitleInput.displayName = "TitleInput" diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/TitleInput/interface.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/TitleInput/interface.ts deleted file mode 100644 index cce72aaffa..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/TitleInput/interface.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { HTMLAttributes } from "react" -import { ActionItem } from "@/redux/currentApp/action/actionState" - -export interface TitleInputProps - extends Omit, "title" | "onChange"> { - title?: string - activeActionItem?: ActionItem | null - onChange?: (name: string) => void -} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/TitleInput/style.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/TitleInput/style.ts deleted file mode 100644 index cfdce2eb88..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/TitleInput/style.ts +++ /dev/null @@ -1,67 +0,0 @@ -import chroma from "chroma-js" -import { css, SerializedStyles } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export function applyTitleContainerStyle(hoverable: boolean): SerializedStyles { - const hoverStyle = css` - &:hover { - cursor: pointer; - background-color: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; - padding: 0 16px; - - & > svg { - opacity: 1; - } - } - ` - return css` - display: flex; - align-items: center; - width: 280px; - border-radius: 8px; - box-sizing: border-box; - height: 32px; - line-height: 32px; - transition: all 0.2s ease-in-out; - position: relative; - ${hoverable && hoverStyle} - ` -} - -export const titleInputContainerStyle = css` - width: 280px; - max-width: 280px; - border-radius: 8px; - box-sizing: border-box; - height: 32px; - margin: 0 19px 0 16px; -` - -export const titleInputStyle = css` - width: 280px !important; - - & > span { - border-color: ${globalColor(`--${illaPrefix}-techPurple-01`)}!important; - box-shadow: 0 0 8px 0 - ${chroma(globalColor(`--${illaPrefix}-techPurple-01`)) - .alpha(0.2) - .hex()}; - } -` - -export const titleStyle = css` - display: inline-block; - max-width: 240px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin-right: 8px; - font-weight: 500; - font-size: 14px; -` - -export const titleEditIconStyle = css` - color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; - transition: all 0.2s ease-in-out; - opacity: 0; -` diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor/index.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor/index.tsx deleted file mode 100644 index 3793c07243..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { FC, useContext } from "react" -import { useTranslation } from "react-i18next" -import { useSelector, useDispatch } from "react-redux" -import { configActions } from "@/redux/config/configSlice" -import { getSelectedAction } from "@/redux/config/configSelector" -import { CodeEditor } from "@/components/CodeEditor" -import { ActionEditorContext } from "@/page/App/components/ActionEditor/context" -import { TransformerEditorProps } from "./interface" -import { transformerContainerStyle, transfomerTipsStyle } from "./style" - -export const TransformerEditor: FC = () => { - const { t } = useTranslation() - const { setIsActionDirty } = useContext(ActionEditorContext) - const dispatch = useDispatch() - const activeActionItem = useSelector(getSelectedAction) - const transformer = activeActionItem.actionTemplate?.transformer ?? "" - - return ( -
- { - setIsActionDirty?.(true) - dispatch( - configActions.updateSelectedAction({ - ...activeActionItem, - actionTemplate: { - ...activeActionItem.actionTemplate, - transformer: value, - }, - }), - ) - }} - /> -
- {t("editor.action.resource.transformer.tip.external_reference")} -
-
- ) -} - -TransformerEditor.displayName = "TransformerEditor" diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor/interface.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor/interface.ts deleted file mode 100644 index e4430adfed..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor/interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface TransformerEditorProps { - onChangeParam?: () => void - onSaveParam?: () => void -} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor/style.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor/style.ts deleted file mode 100644 index cdb0058f89..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor/style.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { css } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const transformerContainerStyle = css` - padding: 16px; - display: flex; - flex-direction: column; - gap: 8px; - flex: 1; -` - -export const transfomerTipsStyle = css` - display: grid; - align-items: center; - font-size: 14px; - line-height: 1.57; - color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; - margin: 0; -` diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/context/ActionEditorPanelContext.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/context/ActionEditorPanelContext.tsx deleted file mode 100644 index 8b3c9c8620..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/context/ActionEditorPanelContext.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { createContext, FC, ReactNode, useMemo } from "react" -import { ActionResultType } from "@/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/interface" - -interface Injected { - onDeleteActionItem: () => void - onDuplicateActionItem: () => void - handleUpdateResult: (result: ActionResultType) => void - onEditResource?: (id: string) => void - onCreateResource?: () => void -} - -interface IProps extends Injected { - children?: ReactNode -} - -export const ACTION_EDITOR_CONTEXT = createContext({} as Injected) - -export const ActionEditorProvider: FC = (props) => { - const { - children, - onDeleteActionItem, - onDuplicateActionItem, - handleUpdateResult, - onEditResource, - onCreateResource, - } = props - - const value = useMemo(() => { - return { - onDuplicateActionItem, - onDeleteActionItem, - handleUpdateResult, - onEditResource, - onCreateResource, - } - }, [ - onDuplicateActionItem, - onDeleteActionItem, - handleUpdateResult, - onEditResource, - onCreateResource, - ]) - - return ( - - {children} - - ) -} diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/index.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/index.tsx deleted file mode 100644 index 8af2a2e03f..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/index.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { FC, useState, useMemo, useCallback } from "react" -import { AnimatePresence } from "framer-motion" -import { useSelector } from "react-redux" -import { getSelectedAction } from "@/redux/config/configSelector" -import { ActionResultType } from "@/page/App/components/ActionEditor/ActionEditorPanel/ActionResult/interface" -import { ActionResult } from "@/page/App/components/ActionEditor/ActionEditorPanel/ActionResult" -import { ActionResultErrorIndicator } from "@/page/App/components/ActionEditor/ActionEditorPanel/ActionResultErrorIndicator" -import { ActionEditorPanelProps } from "./interface" -import { containerStyle } from "./style" -import { ActionEditorHeader } from "@/page/App/components/ActionEditor/ActionEditorPanel/EditorHeader" -import { ActionEditorProvider } from "@/page/App/components/ActionEditor/ActionEditorPanel/context/ActionEditorPanelContext" -import { ResourceEditor } from "@/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor" -import { TransformerEditor } from "@/page/App/components/ActionEditor/ActionEditorPanel/TransformerEditor" -import { ACTION_TYPE } from "@/page/App/components/ActionEditor/constant" - -export const ActionEditorPanel: FC = (props) => { - const { - onEditResource, - onCreateResource, - onDuplicateActionItem, - onDeleteActionItem, - } = props - - const [actionResVisible, setActionResVisible] = useState(false) - const [result, setResult] = useState() - - const activeActionItem = useSelector(getSelectedAction) - - const handleUpdateResult = useCallback((result: ActionResultType) => { - setResult(result) - setActionResVisible(true) - }, []) - - const handleCloseActionResult = useCallback(() => { - setActionResVisible(false) - }, []) - - const editorNode = useMemo(() => { - const { actionType, actionId } = activeActionItem - switch (actionType) { - case ACTION_TYPE.REST_API: - case ACTION_TYPE.MYSQL: - return ( - - ) - case ACTION_TYPE.TRANSFORMER: - return - default: - return null - } - }, [activeActionItem, onEditResource, onCreateResource]) - - return ( - -
- - {activeActionItem && ( - <> - {editorNode} - - {activeActionItem?.error && ( - - )} - {actionResVisible && ( - - )} - - - )} -
- - ) -} - -ActionEditorPanel.displayName = "ActionEditorPanel" diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/interface.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/interface.ts deleted file mode 100644 index 11443bde0a..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/interface.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { HTMLAttributes, ReactNode } from "react" - -export interface ActionEditorPanelProps - extends Omit, "onChange"> { - isActionDirty?: boolean - onEditResource?: (id: string) => void - onCreateResource?: () => void - onDeleteActionItem: () => void - onDuplicateActionItem: () => void - children?: ReactNode - onChange?: () => void - onSave?: () => void -} - -export type TriggerMode = "manual" | "onChange" diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/style.tsx b/src/page/App/components/ActionEditor/ActionEditorPanel/style.tsx deleted file mode 100644 index b7f9b4187f..0000000000 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/style.tsx +++ /dev/null @@ -1,336 +0,0 @@ -import { css, SerializedStyles } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" -import chroma from "chroma-js" - -export const containerStyle = css` - display: flex; - flex-direction: column; - flex: 1; - overflow: auto; - min-width: 670px; -` - -export const panelScrollStyle = css` - overflow: auto; - flex: 1; - user-select: none; - position: relative; - padding-bottom: 16px; -` - -export const titleContainerStyle = css` - display: flex; - align-items: center; - width: 280px; - max-width: 280px; - border-radius: 8px; - box-sizing: border-box; - height: 32px; - line-height: 32px; - transition: all 0.2s ease-in-out; - padding: 0 19px 0 16px; - - &:hover { - cursor: pointer; - background-color: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; - - & > svg { - opacity: 1; - } - } -` - -export const titleInputContainerStyle = css` - width: 280px; - max-width: 280px; - border-radius: 8px; - box-sizing: border-box; - height: 32px; - padding: 0px 19px 0 16px; -` - -export const titleInputStyle = css` - & > span { - border-color: ${globalColor(`--${illaPrefix}-techPurple-01`)} !important; - box-shadow: 0 0 8px 0 - ${chroma(globalColor(`--${illaPrefix}-techPurple-01`)) - .alpha(0.2) - .hex()}; - } -` - -export const titleStyle = css` - display: inline-block; - max-width: 240px; - overflow: hidden; - text-overflow: ellipsis; -` - -export const titleEditIconStyle = css` - color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; - transition: all 0.2s ease-in-out; - opacity: 0; -` - -export const actionStyle = css` - display: flex; - align-items: center; - padding: 8px 16px; -` - -export const resourceBarStyle = css` - margin-top: 8px; - margin-bottom: 8px; -` - -export const resourceBarTitleStyle = css` - margin-right: 16px; -` - -export const fillingStyle = css` - flex: 1; -` - -export const headerButtonStyle = css` - box-sizing: border-box; - font-size: 14px !important; - - & * { - font-size: 14px !important; - } -` - -export const runBtnStyle = css` - color: ${globalColor(`--${illaPrefix}-techPurple-02`)} !important; - background-color: ${globalColor(`--${illaPrefix}-techPurple-07`)} !important; - - &:hover { - background-color: ${globalColor( - `--${illaPrefix}-techPurple-06`, - )} !important; - } -` - -export const actionSelectStyle = css` - font-size: 14px; -` - -export const triggerSelectStyle = css` - max-width: 400px; -` - -export const resourceSelectContainerStyle = css`` - -export const resourceSelectStyle = css` - min-width: 169px; - max-width: 169px; - border-radius: 8px 0 0 8px !important; -` - -export const resourceSelectOptionStyle = css` - min-width: calc(200px - 16px * 2); - align-items: center; - display: flex; -` - -export const resourceSelectNewOptionStyle = css` - color: ${globalColor(`--${illaPrefix}-techPurple-01`)}; -` - -export const resourceSelectOptionIconStyle = css` - font-size: 14px; - margin-right: 8px; -` - -export const resourceSelectOptionNewIconStyle = css` - font-size: 14px; -` - -export const resourceOptionStyle = css` - overflow: hidden; - text-overflow: ellipsis; -` - -export function applyEditIconStyle(disabled: boolean): SerializedStyles { - const hoverColor = disabled - ? globalColor(`--${illaPrefix}-grayBlue-05`) - : globalColor(`--${illaPrefix}-grayBlue-02`) - - const hoverStyle = css` - &:hover > svg { - color: ${hoverColor}; - } - ` - - const cursorStyle = disabled ? "cursor: not-allowed;" : "cursor: pointer;" - - return css` - width: 32px; - height: 32px; - border: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - border-radius: 0 8px 8px 0; - box-sizing: border-box; - margin-right: 8px; - border-left: 0; - - ${cursorStyle} - ${hoverStyle} - & > svg { - margin: 8px; - color: ${globalColor(`--${illaPrefix}-grayBlue-06`)}; - } - ` -} - -export const sectionTitleStyle = css` - font-size: 14px; - line-height: 22px; - font-weight: 500; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; -` - -export const handlerTitleStyle = css` - ${sectionTitleStyle}; - color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; - padding: 16px 16px 0; -` - -export const panelPaddingStyle = css` - padding: 16px; -` - -export const panelSubBarStyle = css` - padding: 13px 16px; -` -export const newBtnStyle = css` - margin-left: 16px; - padding: 0 8px; - height: 24px; - font-size: 14px; - - & > span:first-child { - margin-right: 4px; - } -` - -export const dashBorderBottomStyle = css` - border-bottom: 1px dashed ${globalColor(`--${illaPrefix}-grayBlue-07`)}; -` - -export const gridHandlersStyle = css` - display: grid; - gap: 8px; - padding: 0 16px 8px; -` - -export const handlerMoreIconStyle = css` - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; - padding: 0 9px; - box-sizing: border-box; - border: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - display: flex; - align-items: center; - height: 100%; - font-size: 14px; - white-space: nowrap; - cursor: pointer; - color: ${globalColor(`--${illaPrefix}-grayBlue-01`)}; - background-color: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; - - &:hover { - background-color: ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - } -` - -export const moreListStyle = css` - list-style: none; - margin: 0; - padding: 8px 0; - width: 184px; -` - -export const moreListItemStyle = css` - padding: 5px 16px; - cursor: pointer; - font-size: 14px; - line-height: 1.57; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; - - &:hover { - background: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; - } -` - -export const moreListItemWarnStyle = css` - ${moreListItemStyle}; - color: ${globalColor(`--${illaPrefix}-red-03`)}; -` - -export const handlerItemWrapperStyle = css` - display: flex; - height: 32px; - font-size: 14px; - line-height: 1.57; - color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; - cursor: pointer; -` - -export const handlerItemContentStyle = css` - flex: 1; - border-right: solid 1px ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - padding: 5px 16px; - border: solid 1px ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; - - &:hover { - border-color: ${globalColor(`--${illaPrefix}-techPurple-06`)}; - } -` - -export const handlerItemMoreStyle = css` - width: 32px; - height: 100%; - display: inline-flex; - align-items: center; - padding: 0 9px; - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; - border: solid 1px ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - border-left-width: 0; - - &:hover { - background-color: ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - } -` - -export const radioBtnStyle = css` - width: 184px; -` - -export const resStatusStyle = css` - background-color: ${globalColor(`--${illaPrefix}-green-07`)}; - color: ${globalColor(`--${illaPrefix}-green-03`)}; - border-radius: 50%; - font-size: 12px; - display: inline-flex; - justify-content: center; - align-items: center; - width: 16px; - height: 16px; -` - -export const resTitleStyle = css` - font-weight: 500; - color: ${globalColor(`--${illaPrefix}-gray-01`)}; -` - -export const resAlertBgcStyle = css` - background-color: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; -` - -export const resCloseIconStyle = css` - font-size: 14px; - color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; -` diff --git a/src/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector/index.tsx b/src/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector/index.tsx deleted file mode 100644 index 752e702c8a..0000000000 --- a/src/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector/index.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import { FC, useEffect, useState } from "react" -import { css } from "@emotion/react" -import { useTranslation } from "react-i18next" -import { useSelector } from "react-redux" -import { AddIcon, PaginationPreIcon } from "@illa-design/icon" -import { Button, ButtonGroup } from "@illa-design/button" -import { selectAllResource } from "@/redux/resource/resourceSelector" -import { ActionTypeIcon } from "@/page/App/components/ActionEditor/components/ActionTypeIcon" -import { ActionResourceSeletorProps } from "./interface" -import { - containerStyle, - titleStyle, - footerStyle, - listStyle, - resourceItemContainerStyle, - resourceItemTitleStyle, - resourceItemTimeStyle, - resourceItemIconStyle, - resourceItemSelectedStyle, -} from "./style" - -export const ActionResourceSelector: FC = ( - props, -) => { - const { - resourceType, - onBack, - onCreateAction, - onCreateResource, - defaultSelectedResourceId = "", - } = props - const resourceList = useSelector(selectAllResource) - .filter((r) => r.resourceType === resourceType) - .sort( - (a, b) => - new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(), - ) - const [selectedResourceId, setSelectedResourceId] = useState("") - const { t } = useTranslation() - - useEffect(() => { - if (resourceList.length === 0) { - onCreateResource?.(resourceType) - } - }, []) - - useEffect(() => { - setSelectedResourceId( - defaultSelectedResourceId || (resourceList[0]?.resourceId ?? ""), - ) - }, [defaultSelectedResourceId]) - - return ( -
-
- {t("editor.action.action_list.action_generator.title.choose_resource")} -
- -
- {resourceList.map((r) => ( -
setSelectedResourceId(r.resourceId)} - > - - {r.resourceName} - {r.createdAt} -
- ))} -
- -
- - - - - -
-
- ) -} - -ActionResourceSelector.displayName = "ActionResourceSelector" diff --git a/src/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector/interface.ts b/src/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector/interface.ts deleted file mode 100644 index 519d75abae..0000000000 --- a/src/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector/interface.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface ActionResourceSeletorProps { - resourceType: string - defaultSelectedResourceId?: string - onBack?: () => void - onCreateResource?: (resbourceType: string) => void - onCreateAction?: (resourceType: string, resourceId: string) => void -} diff --git a/src/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector/style.ts b/src/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector/style.ts deleted file mode 100644 index 92a981e1d4..0000000000 --- a/src/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector/style.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { css } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const containerStyle = css` - display: flex; - flex-direction: column; -` - -export const titleStyle = css` - padding: 24px 0 16px 0; - font-size: 20px; - font-weight: 500; - text-align: center; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; -` - -export const listStyle = css` - margin-top: 16px; - overflow: auto; - max-height: 550px; - height: 550px; -` - -export const footerStyle = css` - height: 80px; - padding: 24px; - display: flex; - align-items: center; - justify-content: space-between; -` - -export const resourceItemContainerStyle = css` - padding: 12px 0 12px 24px; - display: flex; - align-items: center; - height: 48px; - cursor: pointer; - transition: all 0.2s ease-in-out; - - &:hover { - background: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; - } -` - -export const resourceItemSelectedStyle = css` - background: ${globalColor(`--${illaPrefix}-techPurple-07`)}; -` - -export const resourceItemIconStyle = css` - font-size: 24px; -` - -export const resourceItemTitleStyle = css` - margin-left: 8px; - flex: 1; - font-weight: 500; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; -` - -export const resourceItemTimeStyle = css` - flex: 1; - color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; -` diff --git a/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/index.tsx b/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/index.tsx deleted file mode 100644 index 430385e42e..0000000000 --- a/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/index.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { FC, cloneElement } from "react" -import { useTranslation } from "react-i18next" -import { - databases, - apis, - jsTransformer, -} from "@/page/App/components/ActionEditor/Resource" -import { - ActionTypeSelectorProps, - ActionTypeSelectorListProps, - ActionTypeSelectorCardProps, -} from "./interface" -import { - containerStyle, - titleStyle, - categoryStyle, - applyResourceItemStyle, - resourceListStyle, - resourceNameStyle, - resourceIconStyle, -} from "./style" - -const Card: FC = function (props) { - const { icon, nameKey, isDraft, category, actionType, onSelect } = props - const { t } = useTranslation() - const draftTip = t("editor.action.resource.label.comming_soon") - - return ( -
!isDraft && onSelect?.({ actionType, category })} - > - {cloneElement(icon, { css: resourceIconStyle })} - - {t(`editor.action.resource.${nameKey}.name`)} - -
- ) -} - -const List: FC = function (props) { - const { title, list = [], onSelect, category } = props - - return ( -
- {title} -
- {list.map((prop) => ( - - ))} -
-
- ) -} - -export const ActionTypeSelector: FC = function ( - props, -) { - const { resourceOnly = false, onSelect } = props - const { t } = useTranslation() - const lists = [ - { - title: t("editor.action.type.database"), - list: databases, - category: "databases" as const, - }, - { - title: t("editor.action.type.api"), - list: apis, - category: "apis" as const, - }, - { - title: t("editor.action.type.js_transformer"), - list: jsTransformer, - category: "jsTransformer" as const, - }, - ] - if (resourceOnly) { - lists.splice( - lists.findIndex( - (item) => item.title === t("editor.action.type.js_transformer"), - 1, - ), - ) - } - - return ( -
-
- {resourceOnly - ? t("dashboard.resources.create_new_title") - : t("editor.action.action_list.action_generator.selector.title")} -
- - {lists.map((l) => ( - - ))} -
- ) -} - -ActionTypeSelector.displayName = "ActionTypeSelector" diff --git a/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/interface.ts b/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/interface.ts deleted file mode 100644 index 23e1e7082f..0000000000 --- a/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/interface.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { - ResourceDataItem, - ActionTypeCategory, -} from "@/page/App/components/ActionEditor/Resource" - -export interface ActionTypeSelectorProps { - onSelect?: (item: ActionTypeInfo) => void - resourceOnly?: boolean -} - -export interface ActionTypeSelectorListProps { - title: string - category: ActionTypeCategory - list: ResourceDataItem[] - onSelect?: (item: ActionTypeInfo) => void -} - -export interface ActionTypeSelectorCardProps extends ResourceDataItem { - onSelect?: (item: ActionTypeInfo) => void - category: ActionTypeCategory -} - -export interface ActionTypeInfo { - actionType: string - category?: ActionTypeCategory -} diff --git a/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/style.ts b/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/style.ts deleted file mode 100644 index 91aff94a07..0000000000 --- a/src/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/style.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { css, SerializedStyles } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const containerStyle = css` - overflow: auto; - padding: 24px; -` -export const titleStyle = css` - margin-bottom: 16px; - font-size: 20px; - font-weight: 500; - text-align: center; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; -` - -export const categoryStyle = css` - display: inline-block; - height: 30px; - line-height: 30px; - padding-top: 8px; - font-size: 14px; - font-weight: 500; - color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; -` - -export const resourceListStyle = css` - padding: 8px 0; - display: grid; - grid-gap: 24px; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); -` - -export function applyResourceItemStyle(isDraft?: boolean): SerializedStyles { - const draftStyle = css` - cursor: not-allowed; - &:after { - top: 0; - position: absolute; - content: attr(data-draft-tip); - padding: 0 8px; - line-height: 16px; - font-size: 12px; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - background: ${globalColor(`--${illaPrefix}-techPurple-07`)}; - color: ${globalColor(`--${illaPrefix}-techPurple-02`)}; - } - ` - const hoverStyle = css` - &:hover { - box-shadow: 0 4px 10px 0 ${globalColor(`--${illaPrefix}-blackAlpha-07`)}; - background-color: ${globalColor(`--${illaPrefix}-techPurple-07`)}; - border-color: ${globalColor(`--${illaPrefix}-techPurple-01`)}; - } - ` - - return css` - flex-direction: column; - justify-content: center; - align-items: center; - padding: 24px 0; - border-radius: 8px; - border: solid 1px ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - position: relative; - display: flex; - background-color: ${globalColor(`--${illaPrefix}-white-01`)}; - cursor: pointer; - transition: all 0.2s ease-in-out; - - ${!isDraft && hoverStyle} - ${isDraft && draftStyle} - ` -} - -export const resourceIconStyle = css` - font-size: 32px; -` - -export const resourceNameStyle = css` - margin-top: 8px; - font-size: 14px; - font-weight: 500; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; -` diff --git a/src/page/App/components/ActionEditor/ActionGenerator/index.tsx b/src/page/App/components/ActionEditor/ActionGenerator/index.tsx deleted file mode 100644 index a370b76971..0000000000 --- a/src/page/App/components/ActionEditor/ActionGenerator/index.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import { FC, useEffect, useState } from "react" -import { useSelector } from "react-redux" -import { Modal } from "@illa-design/modal" -import { selectAllResource } from "@/redux/resource/resourceSelector" -import { ActionTypeSelector } from "@/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector" -import { ActionResourceSelector } from "@/page/App/components/ActionEditor/ActionGenerator/ActionResourceSelector" -import { ActionTypeInfo } from "@/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/interface" -import { ResourceFormEditor } from "@/page/App/components/ActionEditor/ResourceForm/Editor" -import { Resource } from "@/redux/resource/resourceState" -import { ActionGeneratorProps, ActionGeneratorSteps } from "./interface" -import { modalStyle } from "./style" - -function onSelectActionType( - info: ActionTypeInfo, - props: ActionGeneratorProps, - setStep: (step: ActionGeneratorSteps) => void, - setResourceType: (resourceType: string) => void, -) { - const { category, actionType } = info - const { onAddAction } = props - - switch (category) { - case "jsTransformer": { - onAddAction?.(info) - break - } - case "apis": - case "databases": { - // check if has resource, to create if not, to list if has - setResourceType(actionType) - setStep("resource") - break - } - default: - break - } -} - -function renderStep( - step: ActionGeneratorSteps, - resourceType: string, - props: ActionGeneratorProps, - setStep: (step: ActionGeneratorSteps) => void, - setResourceType: (resourceType: string) => void, - resourceList: Resource[], -) { - const { onAddAction } = props - const [defaultSelectedResourceId, setDefaultSelectedResourceId] = useState("") - - switch (step) { - case "type": - return ( - { - onSelectActionType(info, props, setStep, setResourceType) - }} - /> - ) - case "resource": - return ( - { - setStep("type") - setResourceType("") - }} - onCreateResource={(resourceType) => { - setResourceType(resourceType) - setStep("resource-create") - }} - onCreateAction={(resourceType, resourceId) => { - onAddAction?.({ actionType: resourceType, resourceId }) - }} - defaultSelectedResourceId={defaultSelectedResourceId} - /> - ) - case "resource-create": - return ( - { - setStep(resourceList.length > 0 ? "resource" : "type") - }} - onSubmit={(resourceId) => { - setStep("resource") - setDefaultSelectedResourceId(resourceId) - }} - /> - ) - } -} - -export const ActionGenerator: FC = function (props) { - const { visible, onClose } = props - const [step, setStep] = useState("type") - const [resourceType, setResourceType] = useState("") - const resourceList = useSelector(selectAllResource).filter( - (r) => r.resourceType === resourceType, - ) - - useEffect(() => { - setStep("type") - }, [visible]) - - return ( - - {renderStep( - step, - resourceType, - props, - setStep, - setResourceType, - resourceList, - )} - - ) -} - -ActionGenerator.displayName = "ActionGenerator" diff --git a/src/page/App/components/ActionEditor/ActionGenerator/interface.ts b/src/page/App/components/ActionEditor/ActionGenerator/interface.ts deleted file mode 100644 index 94f57ea323..0000000000 --- a/src/page/App/components/ActionEditor/ActionGenerator/interface.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { ActionTypeInfo } from "@/page/App/components/ActionEditor/ActionGenerator/ActionTypeSelector/interface" - -export interface ActionInfo extends ActionTypeInfo { - resourceId?: string -} - -export interface ActionGeneratorProps { - visible: boolean - onClose: () => void - onAddAction?: (info: ActionInfo) => void -} - -export type ActionGeneratorSteps = "type" | "resource" | "resource-create" diff --git a/src/page/App/components/ActionEditor/ActionGenerator/style.ts b/src/page/App/components/ActionEditor/ActionGenerator/style.ts deleted file mode 100644 index 5dc11b40ab..0000000000 --- a/src/page/App/components/ActionEditor/ActionGenerator/style.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { css } from "@emotion/react" - -export const modalStyle = css` - width: 696px; -` diff --git a/src/page/App/components/ActionEditor/ActionList/Runtime/index.tsx b/src/page/App/components/ActionEditor/ActionList/Runtime/index.tsx deleted file mode 100644 index 16f4db6bc5..0000000000 --- a/src/page/App/components/ActionEditor/ActionList/Runtime/index.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import { FC } from "react" -import { css } from "@emotion/react" -import { useTranslation } from "react-i18next" -import { Trigger } from "@illa-design/trigger" -import { Divider } from "@illa-design/divider" -import { RuntimeProps } from "./interface" -import { - runtimeContainerStyle, - runtimeDividerStyle, - runtimeGroupChildrenStyle, - runtimeGroupStyle, - runtimeItemStyle, - runtimeTextStyle, - runtimeValueStyle, -} from "./style" - -function formatTimeStr(time?: number): string { - if (time === undefined) { - return "" - } - - if (time < 1000) { - return `${time.toFixed(2)} ms` - } - - const seconds = time / 1000 - - const unit = ["s", "m", "h"] - const index = Math.floor(Math.log(seconds) / Math.log(60)) - const transformTime = (seconds / Math.pow(60, index)).toFixed(2) - - return `${transformTime} ${unit[index]}` -} - -function formatSizeStr(size: number): string { - if (size === undefined) { - return "" - } - const unit = ["B", "KB", "MB", "GB", "TB"] - const index = Math.floor(Math.log(size) / Math.log(1000)) - const transformSize = (size / Math.pow(1000, index)).toFixed(2) - - return `${transformSize} ${unit[index]}` -} - -export const Runtime: FC = (props) => { - const { actionItem } = props - const { t } = useTranslation() - const { runtime } = actionItem - const { - prepareQuery, - executeResource, - transferData, - handleResponse, - transformer, - postProcessing, - responseSize, - } = runtime || {} - - const backend = - executeResource || transferData - ? (executeResource ?? 0) + (transferData ?? 0) - : undefined - const frontend = - handleResponse || transformer || postProcessing - ? (handleResponse ?? 0) + (transformer ?? 0) + (postProcessing ?? 0) - : undefined - const total = - prepareQuery || backend || frontend - ? (prepareQuery ?? 0) + (backend ?? 0) + (frontend ?? 0) - : undefined - - return ( - - {total === undefined ? null : ( - <> - - {t("editor.action.action_list.runtime.total")}: - {formatTimeStr(total)} - - - - )} - - {prepareQuery === undefined ? null : ( - - {t("editor.action.action_list.runtime.prepare_query")}: - {formatTimeStr(prepareQuery)} - - )} - - {backend === undefined ? null : ( - - {t("editor.action.action_list.runtime.backend")}:{" "} - {formatTimeStr(backend)} - - )} - - {executeResource === undefined ? null : ( - - {t("editor.action.action_list.runtime.execute_resource")}: - - {formatTimeStr(executeResource)} - - - )} - - {transferData === undefined ? null : ( - - {t("editor.action.action_list.runtime.transfer_data")}: - {formatTimeStr(transferData)} - - )} - - {frontend === undefined ? null : ( - - {t("editor.action.action_list.runtime.frontend")}: - {formatTimeStr(frontend)} - - )} - - {handleResponse === undefined ? null : ( - - {t("editor.action.action_list.runtime.handle_response")}: - - {formatTimeStr(handleResponse)} - - - )} - - {transformer === undefined ? null : ( - - {t("editor.action.action_list.runtime.transformer")}: - {formatTimeStr(transformer)} - - )} - - {postProcessing === undefined ? null : ( - - {t("editor.action.action_list.runtime.post_processing")}: - - {formatTimeStr(postProcessing)} - - - )} - - {responseSize === undefined ? null : ( - - {t("editor.action.action_list.runtime.response_size")}: - {formatSizeStr(responseSize)} - - )} -
- } - > - {formatTimeStr(total)} - - ) -} - -Runtime.displayName = "Runtime" diff --git a/src/page/App/components/ActionEditor/ActionList/Runtime/interface.ts b/src/page/App/components/ActionEditor/ActionList/Runtime/interface.ts deleted file mode 100644 index 10c0c6de64..0000000000 --- a/src/page/App/components/ActionEditor/ActionList/Runtime/interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { ActionItem } from "@/redux/currentApp/action/actionState" - -export interface RuntimeProps { - actionItem: ActionItem -} diff --git a/src/page/App/components/ActionEditor/ActionList/Runtime/style.ts b/src/page/App/components/ActionEditor/ActionList/Runtime/style.ts deleted file mode 100644 index 879741ac7c..0000000000 --- a/src/page/App/components/ActionEditor/ActionList/Runtime/style.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { css } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const runtimeTextStyle = css` - color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; - cursor: pointer; - - &:hover { - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; - } -` -export const runtimeDividerStyle = css` - margin: 8px 0; -` - -export const runtimeContainerStyle = css` - display: flex; - flex-direction: column; - font-size: 14px; - font-weigth: 500; - padding: 8px; -` - -export const runtimeItemStyle = css` - white-space: nowrap; -` - -export const runtimeGroupStyle = css` - margin-top: 16px; -` - -export const runtimeGroupChildrenStyle = css` - padding-left: 8px; -` - -export const runtimeValueStyle = css` - margin-left: 4px; -` diff --git a/src/page/App/components/ActionEditor/ActionList/SearchHeader.tsx b/src/page/App/components/ActionEditor/ActionList/SearchHeader.tsx deleted file mode 100644 index 98ace0dc50..0000000000 --- a/src/page/App/components/ActionEditor/ActionList/SearchHeader.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { FC, forwardRef, useState, useMemo } from "react" -import { css } from "@emotion/react" -import { motion, AnimatePresence } from "framer-motion" -import { useTranslation } from "react-i18next" -import { Input } from "@illa-design/input" -import { Button } from "@illa-design/button" -import { SearchIcon } from "@illa-design/icon" -import { SearchHeaderProps } from "./interface" -import { - searchHeaderStyle, - searchHeaderInputStyle, - searchHeaderTitleStyle, - searchHeaderTitleTextStyle, - searchHeaderTitleIconStyle, - searchInputStyle, - searchInputIconStyle, - searchInputCloseBtnStyle, -} from "./style" - -export const SearchHeader: FC = (props) => { - const { updateAction } = props - const { t } = useTranslation() - const [isSearch, setIsSearch] = useState(false) - - const MotionHeaderSearchInput = motion( - forwardRef((_, ref) => ( - , - }} - placeholder={t("editor.action.action_list.placeholder.search")} - onChange={updateAction} - onClear={() => updateAction("")} - css={searchInputStyle} - allowClear - /> - )), - ) - - const MotionHeaderSearchCloseBtn = motion( - forwardRef((_, ref) => ( - - )), - ) - - const searchTitle = ( - - - {t("editor.action.action_list.title")} - - setIsSearch(true)} - css={searchHeaderTitleIconStyle} - /> - - ) - - const searchInput = ( - - - - - ) - - const headerContent = isSearch ? searchInput : searchTitle - - return useMemo( - () => ( -
- {headerContent} -
- ), - [isSearch], - ) -} - -SearchHeader.displayName = "AcionListSearchHeader" diff --git a/src/page/App/components/ActionEditor/ActionList/index.tsx b/src/page/App/components/ActionEditor/ActionList/index.tsx deleted file mode 100644 index 6c5404c770..0000000000 --- a/src/page/App/components/ActionEditor/ActionList/index.tsx +++ /dev/null @@ -1,300 +0,0 @@ -import { FC, useState, useMemo, useRef, useCallback } from "react" -import { useTranslation } from "react-i18next" -import { useSelector } from "react-redux" -import { Button } from "@illa-design/button" -import { Trigger } from "@illa-design/trigger" -import { DropList, Dropdown } from "@illa-design/dropdown" -import { Input } from "@illa-design/input" -import { illaPrefix, globalColor } from "@illa-design/theme" -import { AddIcon, WarningCircleIcon, EmptyStateIcon } from "@illa-design/icon" -import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName" -import { selectAllActionItem } from "@/redux/currentApp/action/actionSelector" -import { getSelectedAction } from "@/redux/config/configSelector" -import { ActionGenerator } from "@/page/App/components/ActionEditor/ActionGenerator" -import { ActionInfo } from "@/page/App/components/ActionEditor/ActionGenerator/interface" -import { ActionTypeIcon } from "@/page/App/components/ActionEditor/components/ActionTypeIcon" -import { isValidActionDisplayName } from "@/page/App/components/ActionEditor/utils" -import { ActionDisplayNameValidateResult } from "@/page/App/components/ActionEditor/interface" -import { ActionItem } from "@/redux/currentApp/action/actionState" -import { SearchHeader } from "./SearchHeader" -import { Runtime } from "./Runtime" -import { - actionListContainerStyle, - newBtnContainerStyle, - newButtonTextStyle, - actionItemListStyle, - applyActionItemStyle, - actionItemNameStyle, - applyactionItemNameTextStyle, - actionItemIconStyle, - warningIndicatorStyle, - updatedIndicatorStyle, - noMatchFoundWrapperStyle, - emptyActionListPlaceholderStyle, - nameErrorMsgStyle, -} from "./style" -import { ActionListProps } from "./interface" - -const DropListItem = DropList.Item - -export const ActionList: FC = (props) => { - const { - loading, - isActionDirty, - onAddActionItem, - onDuplicateActionItem, - onDeleteActionItem, - onUpdateActionItem, - onSelectActionItem, - } = props - - const { t } = useTranslation() - const actionItems = useSelector(selectAllActionItem) - const activeActionItem = useSelector(getSelectedAction) - const [query, setQuery] = useState("") - const [editingName, setEditingName] = useState("") - const [editingActionItemId, setEditingActionItemId] = useState("") - const [contextMenuActionId, setContextMenuActionId] = useState("") - const [isRenameError, setIsRenameError] = - useState({ error: false }) - const [actionGeneratorVisible, setActionGeneratorVisible] = useState(false) - - const inputRef = useRef(null) - - const matchedActionItems = useMemo(() => { - if (query === "") { - return actionItems - } - - return actionItems.filter(({ displayName }) => - displayName.toLowerCase().includes(query.toLowerCase()), - ) - }, [actionItems, query]) - - function editName(id: string, name: string) { - setEditingActionItemId(id) - setEditingName(name) - setTimeout(() => { - inputRef.current?.focus() - }, 0) - } - - const updateName = useCallback( - (originName: string) => { - if (originName !== editingName && !isRenameError.error) { - onUpdateActionItem(editingActionItemId, { - ...activeActionItem, - displayName: editingName, - oldDisplayName: originName, - }) - } - setEditingActionItemId("") - setIsRenameError({ error: false }) - setEditingName("") - }, - [onUpdateActionItem, editingActionItemId, editingName, isRenameError], - ) - - const onAddAction = useCallback( - (info: ActionInfo) => { - const { actionType, resourceId } = info - - setActionGeneratorVisible(false) - - onAddActionItem({ - displayName: DisplayNameGenerator.getDisplayName(actionType), - actionType, - resourceId, - actionTemplate: {}, - }) - }, - [onAddActionItem], - ) - - function onClickActionItem(id: string) { - onSelectActionItem(id) - } - - const actionItemsList = matchedActionItems.map((item) => { - const { actionId: id, displayName: name, actionType, error } = item - const isSelected = id === activeActionItem.actionId - - function renderName() { - if (id === editingActionItemId) { - return ( - {isRenameError?.errorMsg} - } - position="bottom" - popupVisible={isRenameError?.error} - showArrow={false} - closeDelay={0} - colorScheme="techPurple" - > - { - setEditingName(value) - value !== name && - setIsRenameError(isValidActionDisplayName(value)) - }} - onBlur={() => updateName(name)} - onPressEnter={() => updateName(name)} - /> - - ) - } - - return ( - editName(id, name)} - > - - {name} - - {isActionDirty && isSelected && ( - - )} - - ) - } - - return ( -
  • onClickActionItem(id)} - onContextMenu={() => { - setContextMenuActionId(id) - }} - > - - - {error && ( - - )} - - {renderName()} - -
    • - ) - }) - - const NoMatchFound = ( -
    - - {t("editor.action.action_list.tips.not_found")} -
    - ) - - const finalActionItemList = useMemo(() => { - if (matchedActionItems.length === 0) { - if (query !== "") { - return NoMatchFound - } - - return ( - - {t("editor.action.action_list.tips.empty")} - - ) - } - - return actionItemsList - }, [ - query, - matchedActionItems, - activeActionItem, - editingActionItemId, - isActionDirty, - editingName, - isRenameError, - ]) - - const handleContextMenu = useCallback( - (key) => { - switch (key) { - case "duplicate": - onDuplicateActionItem(contextMenuActionId) - break - case "delete": - onDeleteActionItem(contextMenuActionId) - break - case "rename": - const target = actionItems.find( - ({ actionId }) => actionId === contextMenuActionId, - ) as ActionItem - editName(target?.actionId, target?.displayName) - break - } - }, - [ - onDuplicateActionItem, - onDeleteActionItem, - editName, - contextMenuActionId, - actionItems, - ], - ) - - return ( -
    - - -
    - -
    - - - - - - - } - > -
      {finalActionItemList}
    -     - - setActionGeneratorVisible(false)} - onAddAction={onAddAction} - /> -
    - ) -} - -ActionList.displayName = "ActionList" diff --git a/src/page/App/components/ActionEditor/ActionList/interface.tsx b/src/page/App/components/ActionEditor/ActionList/interface.tsx deleted file mode 100644 index 6b9ce5d70b..0000000000 --- a/src/page/App/components/ActionEditor/ActionList/interface.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { HTMLAttributes, MouseEvent } from "react" -import { ActionItem } from "@/redux/currentApp/action/actionState" - -export interface ActionListProps extends HTMLAttributes { - loading?: boolean - onAddActionItem: (data: Omit) => void - onUpdateActionItem: ( - actionId: string, - data: ActionItem & { oldDisplayName?: string }, - ) => void - onDuplicateActionItem: (actionId: string) => void - onDeleteActionItem: (actionId: string) => void - onSelectActionItem: (actionId: string) => void - isActionDirty?: boolean -} - -export interface SearchHeaderProps { - updateAction: (action: string) => void -} - -export interface ContextMenuProps { - id?: string - contextMenuEvent?: MouseEvent - onDuplicate?: () => void - onDelete?: () => void -} diff --git a/src/page/App/components/ActionEditor/ActionList/style.tsx b/src/page/App/components/ActionEditor/ActionList/style.tsx deleted file mode 100644 index 569ef851a5..0000000000 --- a/src/page/App/components/ActionEditor/ActionList/style.tsx +++ /dev/null @@ -1,309 +0,0 @@ -import chroma from "chroma-js" -import { css, SerializedStyles } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const actionListContainerStyle = css` - display: flex; - flex-direction: column; - min-width: 255px; - width: 255px; - border-right: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - position: relative; - font-size: 14px; -` - -export const newBtnContainerStyle = css` - margin: 0 16px 8px 16px; -` - -export const applynewButtonStyle = (isActive: boolean): SerializedStyles => { - const activeStyle = css` - background-color: ${globalColor(`--${illaPrefix}-techPurple-05`)}!important; - ` - - return css` - background-color: ${globalColor(`--${illaPrefix}-techPurple-07`)}!important; - color: ${globalColor(`--${illaPrefix}-techPurple-01`)}!important; - justify-content: center; - font-size: 14px; - margin: 0 16px 8px 16px; - border-radius: 8px !important; - line-height: 32px; - flex-shrink: 0; - - ${isActive && activeStyle} - - transition: background-color .2s ease-in-out; - - & > * { - font-size: 14px !important; - } - - &:hover { - background-color: ${globalColor( - `--${illaPrefix}-techPurple-06`, - )}!important; - } - ` -} - -export const newButtonTextStyle = css` - display: flex; - align-items: center; -` - -export const actionItemListStyle = css` - list-style: none; - margin: 0; - padding: 0; - overflow-x: hidden; - overflow-y: auto; -` - -export function applyActionItemStyle(isSelected: boolean): SerializedStyles { - const backgroundColorStyle = css` - background: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; - ` - - const selectedBackgroundColorStyle = css` - background: ${globalColor(`--${illaPrefix}-techPurple-07`)}; - ` - - return css` - display: flex; - align-items: center; - cursor: pointer; - padding: 9px 16px; - height: 40px; - user-select: none; - font-size: 14px; - font-weight: 500; - - &:hover { - ${isSelected ? selectedBackgroundColorStyle : backgroundColorStyle} - } - - ${isSelected && selectedBackgroundColorStyle} - ` -} - -export const actionItemIconStyle = css` - position: relative; - display: flex; - margin-right: 8px; - color: ${globalColor(`--${illaPrefix}-grayBlue-07`)}; -` - -export const actionItemNameStyle = css` - flex: 1 1 0; - display: flex; - align-items: center; - max-width: 164px; - overflow: hidden; - margin-rigth: 8px; -` - -export function applyactionItemNameTextStyle( - isWarning: boolean, -): SerializedStyles { - const warningColor = css` - color: ${globalColor(`--${illaPrefix}-red-03`)}; - ` - return css` - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - display: inline-block; - ${isWarning && warningColor} - ` -} - -export const actionItemRuntimeStyle = css` - color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; - - &:hover { - color: ${globalColor(`--${illaPrefix}-grayBlue-03`)}; - } -` - -export const warningIndicatorStyle = css` - position: absolute; - color: ${globalColor(`--${illaPrefix}-orange-06`)}; - bottom: 0; - right: 0; - - & > path:last-child { - fill: ${globalColor(`--${illaPrefix}-orange-03`)}; - } -` - -export const updatedIndicatorStyle = css` - display: inline-block; - height: 6px; - width: 6px; - border-radius: 50%; - background-color: ${globalColor(`--${illaPrefix}-blue-03`)}; - margin-left: 8px; - flex: 0 0 6px; -` -export const actionItemTimeStyle = css` - color: ${globalColor(`--${illaPrefix}-grayBlue-06`)}; -` - -export const newActionOptionsListStyle = css` - list-style: none; - margin: 0; - padding: 0; - width: 220px; -` - -export const newActionOptionsItemStyle = css` - display: flex; - align-items: center; - cursor: pointer; - padding: 9px 16px; - height: 40px; - - &:hover { - background: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; - } -` - -export const noMatchFoundWrapperStyle = css` - display: flex; - flex-direction: column; - align-items: center; - color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; - font-size: 14px; - - & > svg { - margin-bottom: 8px; - } -` - -export const emptyActionListPlaceholderStyle = css` - display: flex; - justify-content: center; - align-items: center; - color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; - padding: 16px; - margin: 0 16px; - font-size: 14px; - border: 2px dashed ${globalColor(`--${illaPrefix}-grayBlue-09`)}; -` - -export function applycontextMenuStyle( - top?: number, - left?: number, -): SerializedStyles { - return css` - position: fixed; - top: ${top ?? 0}px; - left: ${left ?? 0}px; - margin: 0; - padding: 8px 0; - width: 184px; - border: solid 1px ${globalColor(`--${illaPrefix}-gray-08`)}; - box-shadow: 0 2px 16px 0 ${globalColor(`--${illaPrefix}-blackAlpha-05`)}; - border-radius: 8px; - list-style: none; - z-index: 1; - background-color: ${globalColor(`--${illaPrefix}-white-01`)}; - ` -} - -export const actionListContextMenuStyle = css` - width: 184px; -` - -const menuItemStyle = css` - line-height: 32px; - padding: 5px 16px; - cursor: pointer; - - &:hover { - background: ${globalColor(`--${illaPrefix}-techPurple-07`)}; - } -` - -export function applycontextMenuVisibleStyle( - isVisible: boolean, -): SerializedStyles { - if (isVisible) { - return css` - opacity: 1; - ` - } - - return css` - opacity: 0; - top: -9999px; - ` -} - -export const duplicateActionStyle = css` - ${menuItemStyle} - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}!important; -` - -export const deleteActionStyle = css` - ${menuItemStyle} - color: ${globalColor(`--${illaPrefix}-red-03`)}!important; -` - -export const searchHeaderStyle = css` - width: 100%; - height: 48px; - display: flex; - padding: 13px 16px; - align-items: center; - font-weight: 500; - color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; -` -export const searchHeaderInputStyle = css` - justify-content: flex-end; -` - -export const searchHeaderTitleStyle = css` - justify-content: flex-start; -` - -export const searchHeaderTitleTextStyle = css` - white-space: nowrap; - flex: 1; -` - -export const searchHeaderTitleIconStyle = css` - cursor: pointer; - &:hover { - color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; - } -` -export const searchInputStyle = css` - margin-right: 8px; - & > span { - border-radius: 8px !important; - border-color: ${globalColor(`--${illaPrefix}-techPurple-01`)}!important; - box-shadow: 0 0 8px 0 - ${chroma(globalColor(`--${illaPrefix}-techPurple-01`)) - .alpha(0.2) - .hex()}; - } -` - -export const searchInputIconStyle = css` - color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; -` - -export const searchInputCloseBtnStyle = css` - flex: 0 0 45px; - & > span { - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; - } -` - -export const nameErrorMsgStyle = css` - display: inline-block; - width: 180px; -` diff --git a/src/page/App/components/ActionEditor/Resource/MySQL/configure/index.tsx b/src/page/App/components/ActionEditor/Resource/MySQL/configure/index.tsx deleted file mode 100644 index 0d70665908..0000000000 --- a/src/page/App/components/ActionEditor/Resource/MySQL/configure/index.tsx +++ /dev/null @@ -1,477 +0,0 @@ -import { forwardRef, useImperativeHandle, useState } from "react" -import { css } from "@emotion/react" -import { Controller, SubmitHandler, useForm } from "react-hook-form" -import { useTranslation } from "react-i18next" -import { Input, Password } from "@illa-design/input" -import { Switch } from "@illa-design/switch" -import { InputNumber } from "@illa-design/input-number" -import { applyGridColIndex } from "@/page/App/components/ActionEditor/style" -import { useSelector } from "react-redux" -import { selectAllResource } from "@/redux/resource/resourceSelector" -import { - connectTextStyle, - descriptionStyle, - errorMessageStyle, - formStyle, - gridContainerStyle, - gridRowContainerStyle, - groupTitleStyle, - labelTextSmallSizeStyle, - labelTextStyle, - labelTextVerticalStyle, - requiredLabelTextStyle, - splitLineStyle, -} from "@/page/App/components/ActionEditor/Resource/style" -import { MySQLConfigureProps, MySQLConfigureValues } from "../interface" -import { InputUpload } from "./input-upload" -import { - formPaddingStyle, - hostnamePortStyle, - switchAreaStyle, - switchDescriptionStyle, - usernamePasswordStyle, -} from "./style" - -export const MySQLConfigure = forwardRef( - (props, ref) => { - const { resourceId, connectionRef, onSubmit, onTestConnection } = props - const { t } = useTranslation() - const resourceConfig = useSelector(selectAllResource).find( - (i) => i.resourceId === resourceId, - ) - const [enableSSH, setEnableSSH] = useState( - (resourceConfig?.options as MySQLConfigureValues)?.ssh, - ) - const [enableSSL, setEnableSSL] = useState( - (resourceConfig?.options as MySQLConfigureValues)?.ssl, - ) - const { - handleSubmit, - control, - register, - resetField, - formState: { errors }, - getValues, - setValue, - } = useForm({ - mode: "onSubmit", - defaultValues: { - resourceName: resourceConfig?.resourceName, - ...resourceConfig?.options, - } || { - port: 3306, - }, - }) - - const testConnection = () => { - const data = getValues() - const { resourceName, ...options } = data - - onTestConnection?.({ - resourceName: resourceName, - resourceType: "mysql", - options: { - ...options, - port: "" + options.port, - }, - }) - } - - useImperativeHandle(connectionRef, () => { - { - return { testConnection } - } - }) - - const submitForm: SubmitHandler = (data) => { - const { resourceName, ...options } = data - onSubmit?.({ - resourceName: resourceName, - resourceType: "mysql", - options: { - ...options, - port: "" + options.port, - ssh: enableSSH, - ssl: enableSSL, - }, - }) - } - return ( -
    -
    -
    - - ( - - )} - rules={{ - required: t("editor.action.form.required"), - }} - control={control} - name="resourceName" - /> - {errors.resourceName && ( -
    - {errors.resourceName.message} -
    - )} -
    -
    - -
    - ( - - )} - control={control} - name="host" - rules={{ - required: t("editor.action.form.required"), - }} - /> - ( - - )} - control={control} - name="port" - rules={{ - required: t("editor.action.form.required"), - }} - /> -
    - {(errors.host || errors.port) && ( -
    -
    {errors.host?.message}
    -
    {errors.port?.message}
    -
    - )} -
    -
    - - ( - - )} - control={control} - name="databaseName" - /> -
    -
    - -
    - ( - - )} - control={control} - name="databaseUsername" - /> - ( - - )} - control={control} - name="databasePassword" - /> -
    -
    - {t("editor.action.resource.my_sql.tip.username_password")} -
    -
    -
    - -
    - {t("editor.action.resource.my_sql.tip.connect_type")} -
    -
    -
    -

    - {t("editor.action.resource.my_sql.title.advanced_option")} -

    -
    - -
    - { - setEnableSSH(val) - }} - /> -
    -
    - {t("editor.action.resource.my_sql.tip.connect_over_ssh")} -
    -
    -
    -
    - {enableSSH && ( - <> -
    - -
    - ( - - )} - rules={{ - required: t("editor.action.form.required"), - }} - control={control} - name="advancedOptions.sshHost" - /> - ( - - )} - rules={{ - required: t("editor.action.form.required"), - }} - control={control} - name="advancedOptions.sshPort" - /> -
    - {(errors.advancedOptions?.sshHost || - errors.advancedOptions?.sshPort) && ( -
    -
    - {errors.advancedOptions?.sshHost?.message} -
    -
    - {errors.advancedOptions?.sshPort?.message} -
    -
    - )} -
    -
    - -
    - ( - - )} - rules={{ - required: t("editor.action.form.required"), - }} - control={control} - name="advancedOptions.sshUsername" - /> - ( - - )} - rules={{ - required: t("editor.action.form.required"), - }} - control={control} - name="advancedOptions.sshPassword" - /> -
    - {(errors.advancedOptions?.sshUsername || - errors.advancedOptions?.sshPassword) && ( -
    -
    - {errors.advancedOptions?.sshUsername?.message} -
    -
    - {errors.advancedOptions?.sshPassword?.message} -
    -
    - )} -
    -
    - - -
    -
    - - ( - - )} - control={control} - name="advancedOptions.sshPassphrase" - /> -
    - - )} -
    - -
    - { - setEnableSSL(val) - }} - /> -
    -
    - {t("editor.action.resource.my_sql.tip.ssl_options")} -
    -
    -
    -
    - {enableSSL && ( - <> -
    - - -
    -
    - - -
    -
    - - -
    - - )} -
    - - ) - }, -) - -MySQLConfigure.displayName = "MySQLConfigure" diff --git a/src/page/App/components/ActionEditor/Resource/MySQL/configure/input-upload.tsx b/src/page/App/components/ActionEditor/Resource/MySQL/configure/input-upload.tsx deleted file mode 100644 index 5dbafbbbfd..0000000000 --- a/src/page/App/components/ActionEditor/Resource/MySQL/configure/input-upload.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { useState, useRef, FC } from "react" -import { useTranslation } from "react-i18next" -import { Button } from "@illa-design/button" -import { Input } from "@illa-design/input" -import { InputUploadProps } from "../interface" -import { displayNoneStyle } from "./style" - -export const InputUpload: FC = (props) => { - const { - reset, - register, - name, - setValue, - placeholder = "e.g.path/to/root.crt", - } = props - const { t } = useTranslation() - const registerValue = register(name) - const [fileName, setFileName] = useState("") - const uploadRef = useRef(null) - const handleUpload = () => { - uploadRef.current?.click() - } - const reader = new FileReader() - reader.onload = function () { - this.result && setValue(name, this.result as string) - } - return ( -
    - - {t("btn.choose_file")} - - ), - }} - onClear={() => { - setFileName("") - reset(name) - }} - allowClear - borderColor="techPurple" - /> - { - registerValue.ref(e) - uploadRef.current = e - }} - onChange={(event) => { - registerValue.onChange(event) - const files = event.target.files - if (files) { - setFileName(files[0].name) - reader.readAsText(files[0]) - } - }} - type="file" - /> -
    - ) -} - -InputUpload.displayName = "InputUpload" diff --git a/src/page/App/components/ActionEditor/Resource/MySQL/configure/style.tsx b/src/page/App/components/ActionEditor/Resource/MySQL/configure/style.tsx deleted file mode 100644 index 31258075eb..0000000000 --- a/src/page/App/components/ActionEditor/Resource/MySQL/configure/style.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { css } from "@emotion/react" - -export const displayNoneStyle = css` - display: none; -` - -export const hostnamePortStyle = css` - display: grid; - grid-column-gap: 8px; - grid-template-columns: 1fr 142px; -` - -export const usernamePasswordStyle = css` - display: grid; - grid-column-gap: 8px; - grid-template-columns: 1fr 1fr; -` - -export const switchAreaStyle = css` - display: flex; - align-items: center; -` -export const switchDescriptionStyle = css` - display: inline-block; - margin-left: 8px; -` - -export const formPaddingStyle = css` - padding: 8px 0; -` diff --git a/src/page/App/components/ActionEditor/Resource/MySQL/index.ts b/src/page/App/components/ActionEditor/Resource/MySQL/index.ts deleted file mode 100644 index 4e54d12f9a..0000000000 --- a/src/page/App/components/ActionEditor/Resource/MySQL/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from "./interface" -export * from "./configure" -export * from "./param" diff --git a/src/page/App/components/ActionEditor/Resource/MySQL/interface.ts b/src/page/App/components/ActionEditor/Resource/MySQL/interface.ts deleted file mode 100644 index 61bac7e884..0000000000 --- a/src/page/App/components/ActionEditor/Resource/MySQL/interface.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { - UseFormRegister, - UseFormResetField, - UseFormSetValue, -} from "react-hook-form" -import { RefObject } from "react" -import { ConnectionRef } from "@/page/App/components/ActionEditor/ResourceForm/Editor/interface" - -export interface MySQLConfigureProps { - resourceId?: string - connectionRef: RefObject - onSubmit?: (data: any) => void - onTestConnection?: (data: any) => void -} - -export interface MySQLConfigureValues { - resourceName: string - host: string - port: number - databaseName: string - databaseUsername: string - databasePassword: string - ssl: boolean - ssh: boolean - advancedOptions: AdvancedOptions -} - -export interface AdvancedOptions { - sshHost: string - sshPort: number - sshUsername: string - sshPassword: string - sshPrivateKey: string - sshPassphrase: string - serverCert: string - clientKey: string - clientCert: string -} - -export interface InputUploadProps { - name: `advancedOptions.${keyof Pick< - AdvancedOptions, - "sshPrivateKey" | "serverCert" | "clientKey" | "clientCert" - >}` - register: UseFormRegister - reset: UseFormResetField - setValue: UseFormSetValue - placeholder?: string -} - -export interface MySQLParamProps { - onChange: (value: any) => void -} - -export interface MySQLParamValues { - mode?: string - query?: string -} diff --git a/src/page/App/components/ActionEditor/Resource/MySQL/param/index.tsx b/src/page/App/components/ActionEditor/Resource/MySQL/param/index.tsx deleted file mode 100644 index ee4f599c08..0000000000 --- a/src/page/App/components/ActionEditor/Resource/MySQL/param/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { FC } from "react" -import { useSelector } from "react-redux" -import { CodeEditor } from "@/components/CodeEditor" -import { MySQLParamProps } from "@/page/App/components/ActionEditor/Resource/MySQL/interface" -import { getSelectedAction } from "@/redux/config/configSelector" -import { panelPaddingStyle } from "./style" - -export const MySQLParam: FC = (props) => { - const { onChange } = props - const { query = "", mode = "sql" } = - useSelector(getSelectedAction)?.actionTemplate ?? {} - - return ( -
    - { - // TODO: @spike Temporary Fix `mode` to `sql`, should support `gui` mode later - onChange({ query: value, mode }) - }} - mode="SQL_JS" - expectedType="String" - height="88px" - lineNumbers - /> -
    - ) -} - -MySQLParam.displayName = "MySQLParam" diff --git a/src/page/App/components/ActionEditor/Resource/MySQL/param/style.tsx b/src/page/App/components/ActionEditor/Resource/MySQL/param/style.tsx deleted file mode 100644 index b41a2777a1..0000000000 --- a/src/page/App/components/ActionEditor/Resource/MySQL/param/style.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { css } from "@emotion/react" - -export const panelPaddingStyle = css` - padding: 16px; -` diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/Basic.tsx b/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/Basic.tsx deleted file mode 100644 index c49ee842eb..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/Basic.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { FC } from "react" -import { Input, Password } from "@illa-design/input" -import { useTranslation } from "react-i18next" -import { Controller } from "react-hook-form" -import { labelTextStyle } from "@/page/App/components/ActionEditor/Resource/style" -import { BasicAuthProps } from "./interface" - -export const BasicAuth: FC = (props) => { - const { control } = props - const { t } = useTranslation() - - return ( - <> - - ( - - )} - control={control} - name="basicUsername" - /> - - - ( - - )} - control={control} - name="basicPassword" - /> - - ) -} - -BasicAuth.displayName = "BasicAuth" diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/Bearer.tsx b/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/Bearer.tsx deleted file mode 100644 index 29b2aa8066..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/Bearer.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { FC } from "react" -import { Input } from "@illa-design/input" -import { useTranslation } from "react-i18next" -import { Controller } from "react-hook-form" -import { labelTextStyle } from "@/page/App/components/ActionEditor/Resource/style" -import { BearerAuthProps } from "./interface" - -export const BearerAuth: FC = (props) => { - const { control } = props - const { t } = useTranslation() - - return ( - <> - - } - control={control} - name="bearerToken" - /> - - ) -} - -BearerAuth.displayName = "BearerAuth" diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/OAuth2.tsx b/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/OAuth2.tsx deleted file mode 100644 index 3e2ae6ed7a..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/OAuth2.tsx +++ /dev/null @@ -1,225 +0,0 @@ -import { FC } from "react" -import { css } from "@emotion/react" -import { useTranslation } from "react-i18next" -import { Input } from "@illa-design/input" -import { InputNumber } from "@illa-design/input-number" -import { Checkbox } from "@illa-design/checkbox" -import { Controller } from "react-hook-form" -import { - labelTextStyle, - descriptionStyle, - applyGridColIndex, - actionTextStyle, - checkboxStyle, - gridRowContainerStyle, - gridRowCenterItemStyle, -} from "@/page/App/components/ActionEditor/Resource/style" -import { OAuth2Props } from "./interface" -import { OAuth2Description } from "../style" - -export const OAuth2: FC = (props) => { - const { control, watch } = props - const { t } = useTranslation() - - const isUseClientCredentialsAuth = watch("oauth2UseClientCredentialsAuth") - - return ( - <> -
    - -
    - {t("editor.action.resource.rest_api.tip.configure_oauth2")} -
    - ( - - {t( - "editor.action.resource.rest_api.label.use_client_credentials_auth", - )} - - )} - control={control} - name="oauth2UseClientCredentialsAuth" - /> -
    - - {!isUseClientCredentialsAuth && ( -
    - - ( - - )} - control={control} - name="oauth2CallbackUrl" - /> - - - ( - - {t( - "editor.action.resource.rest_api.label.share_oauth2_credentials_between_users", - )} - - )} - control={control} - name="oauth2ShareUserCredentials" - /> -
    - )} - -
    - - ( - - )} - control={control} - name="oauthAuthUrl" - /> -
    - -
    - - ( - - )} - control={control} - name="oauth2AccessTokenUrl" - /> -
    - -
    - - } - control={control} - name="oauth2ClientId" - /> -
    - -
    - - } - control={control} - name="oauth2ClientSecret" - /> -
    - -
    - - } - control={control} - name="oauth2Scope" - /> -
    - -
    - - } - control={control} - name="oauth2Audience" - /> -
    - - {!isUseClientCredentialsAuth && ( - <> -
    - - ( - - )} - control={control} - name="oauth2AccessToken" - /> -
    -
    - - ( - - )} - control={control} - name="oauth2RefreshToken" - /> -
    - - )} - -
    - - ( - - )} - control={control} - name="oauth2AccessTokenLifespanSeconds" - /> -
    - - ) -} - -OAuth2.displayName = "OAuth2" diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/index.tsx b/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/index.tsx deleted file mode 100644 index b9a83d31ea..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export * from "./Basic" -export * from "./OAuth2" -export * from "./Bearer" diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/interface.tsx b/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/interface.tsx deleted file mode 100644 index e868eec45c..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/Authentication/interface.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Control, FieldErrors, UseFormWatch } from "react-hook-form" -import { RESTAPIConfigureValues } from "@/page/App/components/ActionEditor/Resource/RESTAPI" - -interface BaseAuthProps { - control: Control - watch: UseFormWatch - errors?: FieldErrors -} - -export interface BasicAuthProps extends BaseAuthProps {} - -export interface OAuth2Props extends BaseAuthProps {} - -export interface BearerAuthProps - extends BaseAuthProps {} diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/ParamList/index.tsx b/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/ParamList/index.tsx deleted file mode 100644 index bd82d6037e..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/ParamList/index.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { css } from "@emotion/react" -import { forwardRef, useCallback, useMemo, useState } from "react" -import { useTranslation } from "react-i18next" -import { Input } from "@illa-design/input" -import { DeleteIcon, AddIcon } from "@illa-design/icon" -import { useFieldArray, Controller } from "react-hook-form" -import { actionTextStyle } from "@/page/App/components/ActionEditor/Resource/style" -import { Params } from "@/page/App/components/ActionEditor/Resource/RESTAPI" -import { - paramListWrapperStyle, - paramItemStyle, - paramItemKeyStyle, - newButtonStyle, - deleteIconStyle, - applyParamItemValueStyle, -} from "./style" -import { ParamListProps } from "./interface" - -const EmptyField: Params = { key: "", value: "" } - -export const ParamList = forwardRef( - (props, ref) => { - const { control, name, ...restProps } = props - const { t } = useTranslation() - const { fields, append, remove, update } = useFieldArray({ - control, - name, - }) - const [isValueFocus, setIsValueFocus] = useState({ - index: 0, - focus: false, - }) - - const addParamItem = useCallback(() => append(EmptyField), [append]) - const removeParamItem = useCallback( - (index) => { - if (fields.length === 1) { - update(index, EmptyField) - return - } - - remove(index) - }, - [update, remove, fields], - ) - - const paramList = useMemo( - () => - fields.map((field, index) => { - return ( -
    - ( - - )} - control={control} - name={`${name}.${index}.key`} - /> - ( - removeParamItem(index)} - css={deleteIconStyle} - /> - ), - }} - placeholder={t( - "editor.action.resource.rest_api.placeholder.param_value", - )} - css={applyParamItemValueStyle( - isValueFocus.focus && isValueFocus.index === index, - )} - onFocus={() => setIsValueFocus({ index, focus: true })} - onBlur={() => setIsValueFocus({ index, focus: false })} - /> - )} - control={control} - name={`${name}.${index}.value`} - /> -
    - ) - }), - [fields, isValueFocus], - ) - - return ( -
    - {paramList} - - - {t("editor.action.resource.rest_api.btns.new")} - -
    - ) - }, -) diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/ParamList/interface.ts b/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/ParamList/interface.ts deleted file mode 100644 index 1ce0b7904d..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/ParamList/interface.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { HTMLAttributes } from "react" -import { Control, FieldArrayPath } from "react-hook-form" -import { RESTAPIConfigureValues } from "@/page/App/components/ActionEditor/Resource/RESTAPI" - -export interface ParamListProps extends HTMLAttributes { - name: FieldArrayPath - control: Control -} diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/ParamList/style.tsx b/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/ParamList/style.tsx deleted file mode 100644 index 3bc84f0bce..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/ParamList/style.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { css, SerializedStyles } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const paramListWrapperStyle = css` - display: flex; - flex-direction: column; -` - -export const paramItemStyle = css` - display: flex; - - & + & { - margin-top: 8px; - } -` - -export const paramItemKeyStyle = css` - width: 169px !important; - - & > span { - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - } -` - -export function applyParamItemValueStyle(isFocus: boolean): SerializedStyles { - return css` - & > span { - ${!isFocus && - css` - border-left: 0px; - `} - transition: all .2s ease-in-out; - border-top-left-radius: 0 !important; - border-bottom-left-radius: 0 !important; - } - ` -} - -export const newButtonStyle = css` - display: flex; - align-items: center; - align-self: flex-start; - padding-top: 8px !important; - - & svg { - margin-right: 5px; - margin-bottom: 2px; - } -` - -export const deleteIconStyle = css` - cursor: pointer; - color: ${globalColor(`--${illaPrefix}-grayBlue-07`)}; - - &:hover { - color: ${globalColor(`--${illaPrefix}-red-05`)}; - } -` diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/index.tsx b/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/index.tsx deleted file mode 100644 index 404ff67a98..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/index.tsx +++ /dev/null @@ -1,247 +0,0 @@ -import { forwardRef, useState } from "react" -import { css } from "@emotion/react" -import { useForm, Controller, SubmitHandler } from "react-hook-form" -import { Input } from "@illa-design/input" -import { InputTag } from "@illa-design/input-tag" -import { Checkbox } from "@illa-design/checkbox" -import { Select, Option } from "@illa-design/select" -import { useSelector } from "react-redux" -import { selectAllResource } from "@/redux/resource/resourceSelector" -import { useTranslation } from "react-i18next" -import { - formStyle, - gridContainerStyle, - labelTextStyle, - requiredLabelTextStyle, - applyGridColIndex, - descriptionStyle, - checkboxStyle, - errorMessageStyle, - gridRowContainerStyle, - gridRowCenterItemStyle, - dynamicLabelTextStyle, -} from "@/page/App/components/ActionEditor/Resource/style" -import { ACTION_TYPE } from "@/page/App/components/ActionEditor/constant" -import { - RESTAPIConfigureProps, - RESTAPIConfigureValues, - Params, -} from "../interface" -import { inputTagSmallSizeStyle, topZIndexStyle } from "./style" -import { ParamList } from "./ParamList" -import { BasicAuth, BearerAuth } from "./Authentication" - -const EmptyField: Params = { key: "", value: "" } - -const getOptions = (data: RESTAPIConfigureValues) => { - return data -} - -export const RESTAPIConfigure = forwardRef< - HTMLFormElement, - RESTAPIConfigureProps ->((props, ref) => { - const { resourceId, onSubmit } = props - const { t } = useTranslation() - const resourceConfig = useSelector(selectAllResource).find( - (i) => i.resourceId === resourceId, - ) - const { - handleSubmit, - control, - watch, - formState: { errors }, - } = useForm({ - mode: "onSubmit", - defaultValues: { - urlParams: [EmptyField], - headers: [EmptyField], - authentication: "none", - /* TODO: @spike hide param that not support yet */ - // forwardAllCookies: false, - // body: [EmptyField], - // oauth2UseClientCredentialsAuth: false, - // oauth2ShareUserCredentials: false, - resourceName: resourceConfig?.resourceName, - ...resourceConfig?.options, - }, - }) - - const submitForm: SubmitHandler = (data) => { - onSubmit?.({ - resourceName: data.resourceName, - resourceType: ACTION_TYPE.REST_API, - options: getOptions(data), - }) - } - - const renderAuthConfig = () => { - switch (watch("authentication")) { - case "basic": - return - case "bearer": - return - - default: - return null - } - } - - return ( -
    -
    - - ( - - )} - rules={{ - required: t("editor.action.form.required"), - }} - control={control} - name="resourceName" - /> - {errors.resourceName && ( -
    - {errors.resourceName.message} -
    - )} -
    - {t("editor.action.resource.rest_api.tip.name")} -
    -
    - -
    - - ( - - )} - control={control} - name="baseURL" - /> -
    - -
    - - -
    - -
    - - -
    - - {/* TODO: @spike api not support yes */} - {/*
    - - -
    - {t("editor.action.resource.rest_api.tip.extra_body_values")} -
    -
    - -
    -
    - - ( - - )} - control={control} - name="cookiesToForward" - /> -
    - ( - - - {t("editor.action.resource.rest_api.label.forward_all_cookies")} - - )} - control={control} - name="forwardAllCookies" - /> -
    */} - -
    - - ( - - )} - control={control} - name="authentication" - /> -
    - - {renderAuthConfig()} - - ) -}) - -RESTAPIConfigure.displayName = "RESTAPIConfigure" diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/style.tsx b/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/style.tsx deleted file mode 100644 index a45f327421..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/configure/style.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { css } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const gridContainerGapStyle = css` - gap: 8px; -` - -export const inputTagSmallSizeStyle = css` - height: 32px; -` - -export const topZIndexStyle = css` - z-index: 3000; -` - -export const OAuth2Description = css` - white-space: normal; - background: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; - padding: 8px 16px; - border-radius: 8px; -` diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/index.ts b/src/page/App/components/ActionEditor/Resource/RESTAPI/index.ts deleted file mode 100644 index 4e54d12f9a..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from "./interface" -export * from "./configure" -export * from "./param" diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/interface.tsx b/src/page/App/components/ActionEditor/Resource/RESTAPI/interface.tsx deleted file mode 100644 index 0e27bb23d3..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/interface.tsx +++ /dev/null @@ -1,72 +0,0 @@ -export interface RESTAPIConfigureProps { - resourceId?: string - onSubmit?: (data: any) => void -} - -export type Params = { - key: string - value: string -} - -export interface RESTAPIConfigureValues { - resourceName: string - baseURL?: string - urlParams?: Params[] - headers?: Params[] - body?: Params[] - cookiesToForward?: string[] - forwardAllCookies?: boolean - authentication?: string - basicUsername?: string - basicPassword?: string - bearerToken?: string - oauth2UseClientCredentialsAuth?: boolean - oauth2CallbackUrl?: string - oauthAuthUrl?: string - oauth2AccessTokenUrl?: string - oauth2ClientId?: string - oauth2ClientSecret?: string - oauth2Scope?: string - oauth2Audience?: string - oauth2AccessToken?: string - oauth2RefreshToken?: string - oauth2AccessTokenLifespanSeconds?: number - oauth2ShareUserCredentials?: boolean - databaseName: string -} - -export type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH" - -export type ContentType = - | "json" - | "raw" - | "x-www-form-urlencoded" - | "form-data" - | "binary" - | "none" - -export interface BodyParams extends Params { - type?: "text" | "file" | string -} - -export interface BodyProps { - value?: BodyParams[] | string - bodyType: ContentType - onChangeValue?: (newValue: BodyParams[] | string) => void - onChangeBodyType?: (bodyType: ContentType) => void -} - -export interface RESTAPIParamValues { - method?: HTTPMethod - url?: string - urlParams?: Params[] - headers?: Params[] - bodyType?: ContentType - body?: BodyParams[] | string - cookies?: Params[] -} - -export interface RESTAPIParamProps { - config?: RESTAPIParamValues - onChange?: (config: RESTAPIParamValues) => void -} diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/param/Body.tsx b/src/page/App/components/ActionEditor/Resource/RESTAPI/param/Body.tsx deleted file mode 100644 index 25e2bc29bb..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/param/Body.tsx +++ /dev/null @@ -1,219 +0,0 @@ -import { FC, useMemo, useCallback } from "react" -import { Select } from "@illa-design/select" -import { CodeEditor } from "@/components/CodeEditor" -import { FieldArray } from "@/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/FieldArray" -import { ValueType } from "@/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/FieldArray/interface" -import { - initArrayField, - getEmptyField, -} from "@/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/FieldArray/util" -import { BodyParams, BodyProps, ContentType } from "../interface" -import { bodyFieldStyle, descriptionCodeStyle, descriptionStyle } from "./style" - -const bodyTypeOptiosn = [ - { - value: "json", - label: "JSON", - }, - { - value: "raw", - label: "Raw", - }, - { - value: "x-www-form-urlencoded", - label: "x-www-form-urlencoded", - }, - { - value: "form-data", - label: "Form Data", - }, - { - value: "binary", - label: "binary", - }, - { - value: "none", - label: "None", - }, -] - -const typeOptions = [ - { - value: "text", - label: "Text", - }, - { - value: "file", - label: "File", - }, -] - -export const Body: FC = (props) => { - const { value, bodyType, onChangeBodyType, onChangeValue } = props - - const onAddWithType = useCallback(() => { - onChangeValue?.([...(value as BodyParams[]), getEmptyField(true)]) - }, [value, onChangeValue]) - - const onRemoveWithType = useCallback( - (_key) => { - const newVal = [...(value as BodyParams[])] - - if ((value as BodyParams[]).length === 1) { - onChangeValue?.([getEmptyField(true)]) - return - } - - newVal.splice( - newVal.findIndex((i) => i._key === _key), - 1, - ) - onChangeValue?.(newVal) - }, - [value, onChangeValue], - ) - - const onChangeWithType = useCallback( - (newValue) => { - const newVal = [...(value as BodyParams[])] - - newVal.splice( - newVal.findIndex(({ _key }) => _key === newValue._key), - 1, - newValue, - ) - - onChangeValue?.(newVal) - }, - [value], - ) - - const onAdd = useCallback(() => { - onChangeValue?.([...value, getEmptyField()]) - }, [value, onChangeValue]) - - const onRemove = useCallback( - (_key) => { - const newVal = [...value] - - if (value.length === 1) { - onChangeValue?.([getEmptyField()]) - return - } - - newVal.splice( - newVal.findIndex((i) => i._key === _key), - 1, - ) - onChangeValue?.(newVal) - }, - [value, onChangeValue], - ) - - const onChange = useCallback( - (newValue) => { - const newVal = [...value] - - newVal.splice( - newVal.findIndex(({ _key }) => _key === newValue._key), - 1, - newValue, - ) - - onChangeValue?.(newVal) - }, - [value], - ) - - const bodyForm = useMemo(() => { - switch (bodyType) { - case "json": - case "x-www-form-urlencoded": - return ( - - ) - case "form-data": - return ( - - ) - case "raw": - return ( - - ) - case "binary": - return ( - <> -
    - Either a binary string, or an object:{" "} - {`{data: binary string, filename?: string }`} -
    - - - ) - case "none": - default: - return null - } - }, [bodyType, value, onChangeBodyType, onChangeValue]) - - const onBodyTypeChange = useCallback( - (bodyType: ContentType) => { - switch (bodyType) { - case "json": - case "x-www-form-urlencoded": - onChangeValue?.(initArrayField([getEmptyField(true)])) - break - case "form-data": - onChangeValue?.(initArrayField([getEmptyField()])) - break - case "raw": - case "binary": - default: - onChangeValue?.("") - break - } - - onChangeBodyType?.(bodyType) - }, - [onChangeBodyType, onChangeValue], - ) - - return ( -
    - { - setParams((prev) => { - return { ...prev, method: value } - }) - }} - options={["GET", "POST", "PUT", "DELETE", "PATCH"]} - size="medium" - colorScheme="techPurple" - /> - setIsEditingUrl(true)} - onBlur={() => setIsEditingUrl(false)} - onChange={(value) => { - setParams((prev) => { - return { ...prev, url: value } - }) - isEditingUrl && updateUrlParams() - }} - placeholder={ - baseURL - ? t( - "editor.action.resource.rest_api.placeholder.action_url_path_with_base_url", - ) - : t( - "editor.action.resource.rest_api.placeholder.action_url_path", - ) - } - borderColor="techPurple" - addonBefore={{ render: baseURL ? `${baseURL}/` : null }} - /> -
    -
    - {t("editor.action.resource.rest_api.tip.get_req_auto_run")} -
    -
    -
    - -
    - - { - setParams((prev) => { - return { ...prev, urlParams: addArrayField(prev.urlParams) } - }) - }} - onRemove={(_key) => { - setParams((prev) => { - return { - ...prev, - urlParams: removeArrayField(prev.urlParams, _key), - } - }) - !isEditingUrl && updatePath() - }} - onChange={(value) => { - if (isEditingUrl) { - return - } - setParams((prev) => { - const urlParams = - value.key === "" && value.value === "" - ? removeArrayField(prev.urlParams, value._key) - : updateArrayField(prev.urlParams, value) - const newParams = { ...prev, urlParams } - return newParams - }) - - updatePath() - }} - autoNewField - /> -
    - -
    - - { - setParams((prev) => { - return { ...prev, headers: addArrayField(prev.headers) } - }) - }} - onRemove={(_key) => - setParams((prev) => { - return { - ...prev, - headers: removeArrayField(prev.headers, _key), - } - }) - } - onChange={(value) => - setParams((prev) => { - return { - ...prev, - headers: updateArrayField(prev.headers, value), - } - }) - } - /> -
    - - {hasBody && ( -
    - - -
    - )} - -
    - - { - setParams((prev) => { - return { ...prev, cookies: addArrayField(prev.cookies) } - }) - }} - onRemove={(_key) => - setParams((prev) => { - return { - ...prev, - cookies: removeArrayField(prev.cookies, _key), - } - }) - } - onChange={(value) => - setParams((prev) => { - return { - ...prev, - cookies: updateArrayField(prev.cookies, value), - } - }) - } - /> -
    - - ) -} - -RESTAPIParam.displayName = "RESTAPIParam" diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/param/style.tsx b/src/page/App/components/ActionEditor/Resource/RESTAPI/param/style.tsx deleted file mode 100644 index 5e8094a7c7..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/param/style.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { css } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const actionTypeStyle = css` - display: grid; - align-items: center; - grid-template-columns: 160px 1fr; - gap: 8px; -` - -export const descriptionStyle = css` - margin: 0; - margin-top: 8px; - align-items: center; - font-size: 14px; - color: ${globalColor(`--${illaPrefix}-grayBlue-06`)}; -` - -export const descriptionCodeStyle = css` - font-size: 12px; -` - -export const bodyFieldStyle = css` - flex-direction: column; - gap: 16px; - display: flex; -` diff --git a/src/page/App/components/ActionEditor/Resource/RESTAPI/util.ts b/src/page/App/components/ActionEditor/Resource/RESTAPI/util.ts deleted file mode 100644 index 852c93907e..0000000000 --- a/src/page/App/components/ActionEditor/Resource/RESTAPI/util.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { Params } from "./interface" - -export function concatParam(params: Params[]): string { - return params - ?.filter(({ key, value }) => key !== "" && value !== undefined) - .map(({ key, value }) => `${key}=${value}`) - .join("&") -} - -export function extractPath(path: string): string { - if (path === "") { - return "" - } - - return path.indexOf("?") === -1 - ? path.slice(0) - : path.slice(0, path.indexOf("?")) -} - -export function hasParamInPath(path?: string): boolean { - if (!path) { - return false - } - - return path.split("?").length > 1 -} - -export function extractParamFromPath(path?: string): Params[] { - if (!path) { - return [] - } - - const firstQuestionMarkIndex = path?.indexOf("?") - - if (firstQuestionMarkIndex === -1) { - return [] - } - - const urlParamsStr = path?.slice((firstQuestionMarkIndex ?? -1) + 1) - - return ( - urlParamsStr?.split("&").map((param) => { - const equalMarkIndex = param.indexOf("=") - let key = "", - value = "" - - if (equalMarkIndex !== -1) { - key = param.slice(0, equalMarkIndex) - value = param.slice(equalMarkIndex + 1) - } else { - key = param - } - return { key, value } - }) ?? [] - ) -} diff --git a/src/page/App/components/ActionEditor/Resource/data.tsx b/src/page/App/components/ActionEditor/Resource/data.tsx deleted file mode 100644 index 493b06aa80..0000000000 --- a/src/page/App/components/ActionEditor/Resource/data.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { ReactElement } from "react" -import { - PostgresIcon, - MySqlIcon, - RedisIcon, - MongoDbIcon, - RestApiIcon, - JSTransformerIcon, -} from "@illa-design/icon" -import { ACTION_TYPE } from "@/page/App/components/ActionEditor/constant" - -export type ActionTypeCategory = "databases" | "apis" | "jsTransformer" - -type ValueOf = T[keyof T] -export type ActionType = ValueOf - -type ActionTypeNameKey = - | "my_sql" - | "postgres" - | "redis" - | "mongo_db" - | "rest_api" - | "js_transformer" - -export interface ResourceDataItem { - nameKey: ActionTypeNameKey - icon: ReactElement - actionType: ActionType - isDraft?: boolean -} - -export const databases: ResourceDataItem[] = [ - { - nameKey: "my_sql", - icon: , - actionType: ACTION_TYPE.MYSQL, - }, - { - nameKey: "postgres", - icon: , - isDraft: true, - actionType: ACTION_TYPE.POSTGRES, - }, - { - nameKey: "redis", - icon: , - isDraft: true, - actionType: ACTION_TYPE.REDIS, - }, - { - nameKey: "mongo_db", - icon: , - isDraft: true, - actionType: ACTION_TYPE.MONGO_DB, - }, -] - -export const apis: ResourceDataItem[] = [ - { - nameKey: "rest_api", - icon: , - actionType: ACTION_TYPE.REST_API, - }, -] - -export const jsTransformer: ResourceDataItem[] = [ - { - nameKey: "js_transformer", - icon: , - actionType: ACTION_TYPE.TRANSFORMER, - }, -] diff --git a/src/page/App/components/ActionEditor/Resource/index.ts b/src/page/App/components/ActionEditor/Resource/index.ts deleted file mode 100644 index cf4d59d99f..0000000000 --- a/src/page/App/components/ActionEditor/Resource/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from "./MySQL" -export * from "./RESTAPI" -export * from "./interface" -export * from "./data" diff --git a/src/page/App/components/ActionEditor/Resource/interface.ts b/src/page/App/components/ActionEditor/Resource/interface.ts deleted file mode 100644 index 0995156a26..0000000000 --- a/src/page/App/components/ActionEditor/Resource/interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { MySQLConfigureValues, MySQLParamValues } from "./MySQL" -import { RESTAPIConfigureValues, RESTAPIParamValues } from "./RESTAPI" - -export type ConfigureValues = MySQLConfigureValues | RESTAPIConfigureValues -export type ParamValues = MySQLParamValues | RESTAPIParamValues diff --git a/src/page/App/components/ActionEditor/Resource/style.tsx b/src/page/App/components/ActionEditor/Resource/style.tsx deleted file mode 100644 index c15cead6b3..0000000000 --- a/src/page/App/components/ActionEditor/Resource/style.tsx +++ /dev/null @@ -1,231 +0,0 @@ -/* Common CSS for all form */ -import { css } from "@emotion/react" -import { SerializedStyles } from "@emotion/serialize" -import { globalColor, illaPrefix } from "@illa-design/theme" -import { LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH } from "@/style" - -export const formStyle = css` - overflow: auto; - padding: 0 24px; - max-height: 716px; -` - -/* form grid */ -export const gridContainerStyle = css` - display: grid; - grid: auto/repeat(auto-fit, 152px minmax(280px, 1fr)); - grid-gap: 16px; - white-space: nowrap; - overflow: auto; -` - -export const gridRowContainerStyle = css` - grid-gap: 8px 16px; - grid-column: span 2; - grid: auto/repeat(auto-fit, 152px minmax(280px, 1fr)); - display: grid; -` - -export const paramGridRowContainerStyle = css` - grid-gap: 8px 16px; - display: grid; - grid: auto/repeat(auto-fit, minmax(15%, min-content) minmax(280px, 1fr)); -` - -export function applyGridRowContainerInSmallWidthStyle( - leftPanelVisible: boolean, - rightPanelVisible: boolean, -): SerializedStyles { - return applyMediaQueryStyle( - leftPanelVisible, - rightPanelVisible, - css` - display: grid; - gap: 8px; - grid: auto/auto; - `, - ) -} - -export function applyLabelTextInSmallWidthStyle( - leftPanelVisible: boolean, - rightPanelVisible: boolean, -): SerializedStyles { - return applyMediaQueryStyle( - leftPanelVisible, - rightPanelVisible, - css` - text-align: left; - justify-content: start; - `, - ) -} - -function applyMediaQueryStyle( - leftPanelVisible: boolean, - rightPanelVisible: boolean, - style: SerializedStyles, -): SerializedStyles { - const MEDIA_QUERY_WIDTH = 1600 - const WIDTH_THRESHOLD = 1000 - - const active = - MEDIA_QUERY_WIDTH - - (leftPanelVisible ? LEFT_PANEL_WIDTH : 0) - - (rightPanelVisible ? RIGHT_PANEL_WIDTH : 0) <= - WIDTH_THRESHOLD - - if (!active) { - return css`` - } - - return css` - @media screen and (max-width: ${MEDIA_QUERY_WIDTH}px) { - ${style} - } - ` -} - -export const gridRowCenterItemStyle = css` - align-items: center; -` - -export function applyGridColIndex(index: number): SerializedStyles { - return css` - grid-column-start: ${index}; - ` -} - -export const emptyFillingStyle = css` - grid-column: span 2; -` - -export const splitLineStyle = css` - display: inline-block; - grid-column: span 2; - height: 1px; - width: 100%; - background-color: ${globalColor(`--${illaPrefix}-grayBlue-08`)}; -` - -export const labelTextStyle = css` - display: flex; - justify-content: end; - align-items: center; - font-size: 14px; - font-weight: 500; - text-align: right; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; - white-space: pre; -` - -export const labelTextAlignSelfStartStyle = css` - align-self: flex-start; - /* vertical center to input, lineHeight same with input */ - line-height: 30px; -` - -export const dynamicLabelTextStyle = css` - display: flex; - justify-content: end; - padding-top: 5px; - font-size: 14px; - font-weight: 500; - text-align: right; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; - white-space: pre; -` - -export const connectTextStyle = css` - display: flex; - justify-content: start; - align-items: center; - font-size: 14px; - text-align: right; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; - white-space: pre; -` - -export const requiredLabelTextStyle = css` - ${labelTextStyle}; - position: relative; - - &:before { - content: "*"; - margin-right: 5px; - margin-top: 3px; - font-weight: bold; - color: ${globalColor(`--${illaPrefix}-red-03`)}; - } -` - -export const groupTitleStyle = css` - display: flex; - align-items: center; - font-size: 14px; - line-height: 1.57; - font-weight: 500; - text-align: right; - margin: 0; - color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; - grid-column: span 2; -` - -export const actionTextStyle = css` - cursor: pointer; - color: ${globalColor(`--${illaPrefix}-techPurple-01`)}; - transition: color 0.2s ease-in-out; - justify-self: start; - background-color: transparent; - border: 0; - padding: 0; - margin: 0; - - &:hover { - color: ${globalColor(`--${illaPrefix}-techPurple-03`)}; - } -` - -export const checkboxStyle = css` - justify-content: flex-start !important; - - & > input { - margin: 0; - } -` - -export const labelTextVerticalStyle = css` - flex-direction: column; - align-items: normal; -` - -export const labelTextSmallSizeStyle = css` - font-size: 12px; - line-height: 1; - color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; -` -export const displayNoneStyle = css` - display: none; -` -export const descriptionStyle = css` - display: grid; - align-items: center; - font-size: 14px; - line-height: 1.57; - color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; - margin: 0; -` - -export const errorMessageStyle = css` - font-size: 14px; - color: ${globalColor(`--${illaPrefix}-red-03`)}; - line-height: 1.57; -` - -export const configContainerStyle = css` - padding: 16px; - display: flex; - flex-direction: column; - gap: 16px; - white-space: nowrap; -` diff --git a/src/page/App/components/ActionEditor/ResourceForm/Editor/index.tsx b/src/page/App/components/ActionEditor/ResourceForm/Editor/index.tsx deleted file mode 100644 index ae385e1dbe..0000000000 --- a/src/page/App/components/ActionEditor/ResourceForm/Editor/index.tsx +++ /dev/null @@ -1,212 +0,0 @@ -import { FC, useRef, cloneElement, RefObject, useState } from "react" -import { useTranslation } from "react-i18next" -import { useSelector, useDispatch } from "react-redux" -import { Button } from "@illa-design/button" -import { PaginationPreIcon } from "@illa-design/icon" -import { Notification } from "@illa-design/notification" -import { Api } from "@/api/base" -import { Resource } from "@/redux/resource/resourceState" -import { resourceActions } from "@/redux/resource/resourceSlice" -import { selectAllResource } from "@/redux/resource/resourceSelector" -import { - MySQLConfigure, - RESTAPIConfigure, -} from "@/page/App/components/ActionEditor/Resource" -import { ResourceType } from "@/page/App/components/ActionEditor/interface" -import { ACTION_TYPE } from "@/page/App/components/ActionEditor/constant" -import { ResourceFormEditorProps, ConnectionRef } from "./interface" -import { - formContainerStyle, - formFooterStyle, - backIconStyle, - formFooterFillingStyle, - createResourceBtnStyle, - formTitleStyle, -} from "./style" - -const renderResourceNode = ( - resourceType: ResourceType | undefined, - connectionRef: RefObject, - formRef: RefObject, - onSubmitForm: (data: any, resourceId?: string) => void, - onTestConnection: (data: any) => void, - props: ResourceFormEditorProps, -) => { - let node: JSX.Element - const { resourceId } = props - switch (resourceType) { - case ACTION_TYPE.REST_API: - node = ( - onSubmitForm(data, resourceId)} - /> - ) - break - case ACTION_TYPE.MYSQL: - node = ( - onSubmitForm(data, resourceId)} - onTestConnection={onTestConnection} - /> - ) - break - default: - node =
    No Config
    - break - } - - return cloneElement(node, { ref: formRef }) || null -} - -const getResourceTypeNameKey = (resourceType: string) => { - switch (resourceType) { - case ACTION_TYPE.REST_API: - return "rest_api" - case ACTION_TYPE.MYSQL: - return "my_sql" - default: - return "" - } -} - -export const ResourceFormEditor: FC = (props) => { - const { resourceId, back, onSubmit, resourceType: resourceTypeProps } = props - const { t } = useTranslation() - const dispatch = useDispatch() - const resource = useSelector(selectAllResource).find( - (i) => i.resourceId === resourceId, - ) - // if receive `resourceTypeProps` means add new - const resourceType = resourceTypeProps || resource?.resourceType - - const connectionRef = useRef(null) - const formRef = useRef(null) - - const [createBtnLoading, setCreateBtnLoading] = useState(false) - const [testConnectionLoading, setTestConnectionLoading] = useState(false) - - const resourceTypeNameKey = getResourceTypeNameKey(resourceType as string) - const resourceTitle = resourceTypeNameKey - ? t(`editor.action.resource.${resourceTypeNameKey}.name`) - : "" - - function submitForm() { - formRef.current?.requestSubmit() - } - - function onSubmitForm(data: any, resourceId?: string) { - if (resourceId) { - Api.request( - { - url: `/resources/${resourceId}`, - method: "PUT", - data, - }, - ({ data }) => { - dispatch(resourceActions.updateResourceItemReducer(data)) - onSubmit?.(resourceId) - }, - () => {}, - () => {}, - (loading) => setCreateBtnLoading(loading), - ) - return - } - - Api.request( - { - url: "/resources", - method: "POST", - data, - }, - ({ data }) => { - dispatch(resourceActions.addResourceItemReducer(data)) - onSubmit?.(data.resourceId) - }, - () => {}, - () => {}, - (loading) => setCreateBtnLoading(loading), - ) - } - - function onTestConnection(data: any) { - Api.request<{ message: string }>( - { - url: "/resources/testConnection", - method: "POST", - data, - }, - ({ data }) => { - Notification.success({ title: {data.message} }) - }, - ({ data }) => { - Notification.error({ title: {data.errorMessage} }) - }, - () => {}, - (loading) => setTestConnectionLoading(loading), - ) - } - - return ( -
    -
    - {t("editor.action.form.title.configure", { name: resourceTitle })} -
    -
    - {renderResourceNode( - resourceType, - connectionRef, - formRef, - onSubmitForm, - onTestConnection, - props, - )} -
    -
    - {back && ( - - )} - -
    - - - - -
    -
    - ) -} - -ResourceFormEditor.displayName = "ResourceFormEditor" diff --git a/src/page/App/components/ActionEditor/ResourceForm/Editor/interface.tsx b/src/page/App/components/ActionEditor/ResourceForm/Editor/interface.tsx deleted file mode 100644 index b93aba2caa..0000000000 --- a/src/page/App/components/ActionEditor/ResourceForm/Editor/interface.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ActionType } from "@/page/App/components/ActionEditor/ResourceForm/interface" - -export type ConnectionRef = { - testConnection: () => void -} - -export interface ResourceFormEditorProps { - actionType: ActionType - resourceId?: string - resourceType?: string - ResourceFormEditor?: boolean - back?: () => void - onSubmit?: (resourceId: string) => void -} diff --git a/src/page/App/components/ActionEditor/ResourceForm/Editor/style.tsx b/src/page/App/components/ActionEditor/ResourceForm/Editor/style.tsx deleted file mode 100644 index 63f04e1fb6..0000000000 --- a/src/page/App/components/ActionEditor/ResourceForm/Editor/style.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { css } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const formContainerStyle = css`` - -export const formTitleStyle = css` - padding: 24px 0 16px 0; - font-size: 20px; - font-weight: 500; - text-align: center; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; -` - -export const formFooterStyle = css` - display: flex; - padding: 24px; - max-height: 80px; -` - -export const formFooterFillingStyle = css` - flex: 1; -` - -export const backIconStyle = css` - display: inline-block; - font-size: 12px; - margin-right: 4px; - margin-bottom: 2px; -` - -export const createResourceBtnStyle = css` - margin-left: 8px; -` diff --git a/src/page/App/components/ActionEditor/ResourceForm/Selector/index.tsx b/src/page/App/components/ActionEditor/ResourceForm/Selector/index.tsx deleted file mode 100644 index 2fee8875f7..0000000000 --- a/src/page/App/components/ActionEditor/ResourceForm/Selector/index.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { FC } from "react" -import { useTranslation } from "react-i18next" -import { databases, apis } from "@/page/App/components/ActionEditor/Resource" -import { ResourceFormSelectorProps } from "./interface" -import { - categoryStyle, - categoryTitleStyle, - applyResourceListStyle, - applyResourceItemStyle, - resourceIconStyle, - resourceNameStyle, - selectLayoutStyle, -} from "./style" - -export const ResourceFormSelector: FC = (props) => { - const { onSelect } = props - const { t } = useTranslation() - const draftTip = t("editor.action.resource.label.comming_soon") - - return ( -
    -
    Select Resource Type
    -
    -
    {t("editor.action.form.title.database")}
    -
    - {databases.map((database) => ( -
    { - !database.isDraft && onSelect(database.actionType) - }} - data-draft-tip={draftTip} - > - {database.icon} -
    - {t(`editor.action.resource.${database.nameKey}.name`)} -
    -
    - ))} -
    -
    -
    -
    {t("editor.action.form.title.api")}
    -
    - {apis.map((api) => ( -
    { - !api.isDraft && onSelect(api.actionType) - }} - data-draft-tip={draftTip} - > - {api.icon} -
    - {t(`editor.action.resource.${api.nameKey}.name`)} -
    -
    - ))} -
    -
    -
    - ) -} - -ResourceFormSelector.displayName = "ResourceFormSelector" diff --git a/src/page/App/components/ActionEditor/ResourceForm/Selector/interface.tsx b/src/page/App/components/ActionEditor/ResourceForm/Selector/interface.tsx deleted file mode 100644 index 667b65c65c..0000000000 --- a/src/page/App/components/ActionEditor/ResourceForm/Selector/interface.tsx +++ /dev/null @@ -1,17 +0,0 @@ -export interface ApiItemProps { - title: string - img: JSX.Element - draft?: boolean - type: string -} - -export interface DatabaseItemProps { - title: string - img: JSX.Element - draft?: boolean - type: string -} - -export interface ResourceFormSelectorProps { - onSelect: (type: string) => void -} diff --git a/src/page/App/components/ActionEditor/ResourceForm/Selector/style.tsx b/src/page/App/components/ActionEditor/ResourceForm/Selector/style.tsx deleted file mode 100644 index 89ced00c08..0000000000 --- a/src/page/App/components/ActionEditor/ResourceForm/Selector/style.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { css } from "@emotion/react" -import { SerializedStyles } from "@emotion/serialize" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const categoryStyle = css` - font-size: 14px; - font-weight: 500; - line-height: 1.57; - font-family: HelveticaNeue; - color: ${globalColor(`--${illaPrefix}-grayBlue-06`)}; - padding-top: 8px; -` - -export const categoryTitleStyle = css` - padding: 24px 0 16px 0; - font-size: 20px; - font-weight: 500; - text-align: center; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; -` - -export function applyResourceListStyle(last?: boolean): SerializedStyles { - return css` - display: grid; - grid-gap: 8px 24px; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - padding-bottom: ${last ? `0` : `8px`}; - padding-top: 8px; - ` -} - -export function applyResourceItemStyle(isDraft?: boolean): SerializedStyles { - const draftStyle = css` - cursor: not-allowed; - &:after { - top: 0; - position: absolute; - content: attr(data-draft-tip); - padding: 0 8px; - line-height: 16px; - font-size: 12px; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - background: ${globalColor(`--${illaPrefix}-techPurple-07`)}; - color: ${globalColor(`--${illaPrefix}-techPurple-02`)}; - } - ` - const hoverStyle = css` - &:hover { - box-shadow: 0 4px 10px 0 ${globalColor(`--${illaPrefix}-blackAlpha-07`)}; - background-color: ${globalColor(`--${illaPrefix}-techPurple-07`)}; - border-color: ${globalColor(`--${illaPrefix}-techPurple-01`)}; - } - ` - - return css` - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - border-radius: 8px; - border: solid 1px ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - background-color: ${globalColor(`--${illaPrefix}-white-01`)}; - padding: 24px; - text-align: center; - cursor: pointer; - transition: all 0.2s ease-in-out; - ${!isDraft && hoverStyle} - ${isDraft && draftStyle} - ` -} - -export const resourceIconStyle = css` - font-size: 32px; -` - -export const resourceNameStyle = css` - margin-top: 8px; - font-size: 14px; - font-family: HelveticaNeue; - font-weight: 500; - line-height: 1.57; - color: ${globalColor(`--${illaPrefix}-gray-01`)}; ; -` - -export const selectLayoutStyle = css` - overflow: auto; - padding: 0 24px 24px; - max-height: 812px; -` diff --git a/src/page/App/components/ActionEditor/ResourceForm/index.tsx b/src/page/App/components/ActionEditor/ResourceForm/index.tsx deleted file mode 100644 index 57d3bd2ce6..0000000000 --- a/src/page/App/components/ActionEditor/ResourceForm/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { FC, useState, useMemo, useLayoutEffect } from "react" -import { Modal } from "@illa-design/modal" -import { ResourceFormSelector } from "./Selector" -import { ResourceFormEditor } from "./Editor" -import { ResourceFormProps, ActionType } from "./interface" -import { modalStyle } from "./style" - -export const ResourceForm: FC = (props) => { - const { actionType: propActionType, visible, onCancel, resourceId } = props - const [configureType, setConfigureType] = useState() - const [actionType, setActionType] = useState(propActionType) - - useLayoutEffect(() => { - setActionType(propActionType) - }, [propActionType]) - - const handleClose = () => { - onCancel?.() - setActionType(propActionType) - } - - const renderForm = useMemo(() => { - switch (actionType) { - case "select": - return ( - { - setConfigureType(type) - setActionType("configure") - }} - /> - ) - case "edit": - return ( - { - setActionType("select") - }} - /> - ) - case "configure": - return ( - { - setActionType("select") - }} - /> - ) - default: - return null - } - }, [actionType, resourceId]) - - return ( - - {renderForm} - - ) -} - -ResourceForm.displayName = "ResourceForm" diff --git a/src/page/App/components/ActionEditor/ResourceForm/interface.tsx b/src/page/App/components/ActionEditor/ResourceForm/interface.tsx deleted file mode 100644 index 85e0dfc798..0000000000 --- a/src/page/App/components/ActionEditor/ResourceForm/interface.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { - ApiType, - DatabaseType, -} from "@/page/App/components/ActionEditor/interface" - -export type ActionType = "select" | "configure" | "edit" - -export interface ResourceFormProps { - actionType: ActionType - visible: boolean - resourceId: string - databaseType?: DatabaseType - apiType?: ApiType - onCancel?: () => void -} diff --git a/src/page/App/components/ActionEditor/ResourceForm/style.tsx b/src/page/App/components/ActionEditor/ResourceForm/style.tsx deleted file mode 100644 index 662b669f38..0000000000 --- a/src/page/App/components/ActionEditor/ResourceForm/style.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { css } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const modalStyle = css` - width: 696px; - border-radius: 8px; -` - -export const titleStyle = css` - font-size: 20px; - font-weight: 500; - line-height: 1.4; - padding: 24px 24px 16px; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; - text-align: center; -` diff --git a/src/page/App/components/ActionEditor/components/ActionTypeIcon/index.tsx b/src/page/App/components/ActionEditor/components/ActionTypeIcon/index.tsx deleted file mode 100644 index 50e41c6cd6..0000000000 --- a/src/page/App/components/ActionEditor/components/ActionTypeIcon/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { FC } from "react" -import { - MySqlIcon, - RedisIcon, - PostgresIcon, - MongoDbIcon, - RestApiIcon, - JSTransformerIcon, -} from "@illa-design/icon" -import { ACTION_TYPE } from "@/page/App/components/ActionEditor/constant" -import { ActionTypeIconProps } from "./interface" - -export const ActionTypeIcon: FC = (props) => { - const { actionType, className } = props - - switch (actionType) { - case ACTION_TYPE.MYSQL: - return - case ACTION_TYPE.POSTGRES: - return - case ACTION_TYPE.REDIS: - return - case ACTION_TYPE.MONGO_DB: - return - case ACTION_TYPE.REST_API: - return - case ACTION_TYPE.TRANSFORMER: - return - default: - return null - } -} - -ActionTypeIcon.displayName = "ActionTypeIcon" diff --git a/src/page/App/components/ActionEditor/components/ActionTypeIcon/interface.ts b/src/page/App/components/ActionEditor/components/ActionTypeIcon/interface.ts deleted file mode 100644 index 586e192d98..0000000000 --- a/src/page/App/components/ActionEditor/components/ActionTypeIcon/interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { HTMLAttributes } from "react" - -export interface ActionTypeIconProps extends HTMLAttributes { - actionType: string -} diff --git a/src/page/App/components/ActionEditor/constant.ts b/src/page/App/components/ActionEditor/constant.ts deleted file mode 100644 index d824482c8c..0000000000 --- a/src/page/App/components/ActionEditor/constant.ts +++ /dev/null @@ -1,8 +0,0 @@ -export enum ACTION_TYPE { - TRANSFORMER = "transformer", - REST_API = "restapi", - MYSQL = "mysql", - MONGO_DB = "mongodb", - REDIS = "redis", - POSTGRES = "postgres", -} diff --git a/src/page/App/components/ActionEditor/context.ts b/src/page/App/components/ActionEditor/context.ts deleted file mode 100644 index 7b04305d3b..0000000000 --- a/src/page/App/components/ActionEditor/context.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createContext } from "react" -import { ActionEditorContextProps } from "./interface" - -export const ActionEditorContext = createContext({ - editorHeight: 0, - baseActionApi: "", - isActionDirty: false, -}) diff --git a/src/page/App/components/ActionEditor/index.tsx b/src/page/App/components/ActionEditor/index.tsx deleted file mode 100644 index 4bc3f75798..0000000000 --- a/src/page/App/components/ActionEditor/index.tsx +++ /dev/null @@ -1,334 +0,0 @@ -import { FC, useState, useEffect, useMemo } from "react" -import { useSelector, useDispatch } from "react-redux" -import { useTranslation } from "react-i18next" -import { useParams } from "react-router-dom" -import { Modal } from "@illa-design/modal" -import { Api } from "@/api/base" -import { Message } from "@illa-design/message" -import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName" -import { selectAllActionItem } from "@/redux/currentApp/action/actionSelector" -import { getSelectedAction } from "@/redux/config/configSelector" -import { actionActions } from "@/redux/currentApp/action/actionSlice" -import { configActions } from "@/redux/config/configSlice" -import { ActionItem } from "@/redux/currentApp/action/actionState" -import { resourceActions } from "@/redux/resource/resourceSlice" -import { Resource } from "@/redux/resource/resourceState" -import { ActionType } from "@/page/App/components/ActionEditor/ResourceForm/interface" -import { ActionList } from "@/page/App/components/ActionEditor/ActionList" -import { ActionEditorPanel } from "@/page/App/components/ActionEditor/ActionEditorPanel" -import { ResourceForm } from "./ResourceForm" -import { ActionEditorLayout } from "./Layout" -import { ActionEditorProps } from "./interface" -import { ActionEditorContext } from "./context" - -export const ActionEditor: FC = (props) => { - const { className } = props - const { t } = useTranslation() - const dispatch = useDispatch() - const params = useParams() - const [formVisible, setFormVisible] = useState(false) - const [actionType, setActionType] = useState("select") - const [isActionDirty, setIsActionDirty] = useState(false) - const [editorHeight, setEditorHeight] = useState(300) - const [actionListLoading, setActionListLoading] = useState(false) - const [resourceLoading, setResourceLoading] = useState(false) - const [activeActionItemId, setActiveActionItemId] = useState("") - const actionItems = useSelector(selectAllActionItem) - const { resourceId = "" } = useSelector(getSelectedAction) - const baseActionApi = `/apps/${params.appId}/actions` - - const loading = useMemo( - () => actionListLoading || resourceLoading, - [actionListLoading, resourceLoading], - ) - - function updateSelectedItemId(id: string) { - const { length } = actionItems - - if (id !== activeActionItemId) { - return - } - - const lastItemId = actionItems[length - 1].actionId - - if (id === lastItemId) { - if (length === 1) { - dispatch( - configActions.updateSelectedAction({ - actionId: "", - displayName: "", - actionType: "", - actionTemplate: {}, - }), - ) - } else { - updateActiveActionItemId(actionItems[length - 2].actionId) - } - } else { - updateActiveActionItemId(lastItemId) - } - } - - function updateActiveActionItemId(id: string) { - if (isActionDirty) { - Modal.confirm({ - content: t("editor.action.action_list.message.confirm_switch"), - onOk: () => { - setIsActionDirty(false) - setActiveActionItemId(id) - }, - }) - - return - } - - setIsActionDirty(false) - setActiveActionItemId(id) - } - - function onAddActionItem(data: Omit) { - Api.request( - { - url: baseActionApi, - method: "POST", - data, - }, - ({ data }: { data: ActionItem }) => { - dispatch(actionActions.addActionItemReducer(data)) - updateActiveActionItemId(data.actionId) - }, - () => { - DisplayNameGenerator.removeDisplayName(data.displayName) - }, - () => {}, - (loading) => { - setActionListLoading(loading) - }, - ) - } - - function onUpdateActionItem( - actionId: string, - data: ActionItem & { oldDisplayName?: string }, - ) { - const { - resourceId, - actionType, - displayName, - actionTemplate = {}, - oldDisplayName, - } = data - - // cache new name - DisplayNameGenerator.updateDisplayName(displayName) - - Api.request( - { - url: `${baseActionApi}/${actionId}`, - method: "PUT", - data: { - resourceId, - actionType, - displayName, - actionTemplate, - }, - }, - ({ data }: { data: ActionItem }) => { - dispatch( - actionActions.updateActionItemReducer({ - ...data, - }), - ) - - // remove old name from cache - oldDisplayName && DisplayNameGenerator.removeDisplayName(oldDisplayName) - }, - () => { - // remove new name from cache - oldDisplayName && DisplayNameGenerator.removeDisplayName(displayName) - }, - () => {}, - (loading) => { - setActionListLoading(loading) - }, - ) - } - - function onDuplicateActionItem(actionId: string = activeActionItemId) { - const targetItem = actionItems.find((i) => i.actionId === actionId) - - if (targetItem) { - const { resourceId, actionType, actionTemplate = {} } = targetItem - const displayName = DisplayNameGenerator.getDisplayName(actionType) - - Api.request( - { - url: baseActionApi, - method: "POST", - data: { - resourceId, - actionType, - actionTemplate, - displayName, - }, - }, - ({ data }: { data: ActionItem }) => { - dispatch(actionActions.addActionItemReducer(data)) - onDuplicateActionItem(data?.actionId) - }, - () => { - DisplayNameGenerator.removeDisplayName(displayName) - }, - () => {}, - (loading) => { - setActionListLoading(loading) - }, - ) - } - } - - function onDeleteActionItem(actionId: string = activeActionItemId) { - Api.request( - { - url: `${baseActionApi}/${actionId}`, - method: "DELETE", - }, - ({ data }: { data: { actionId: string } }) => { - const removedActionId = data.actionId - const removedActionName = actionItems.find( - ({ actionId }) => actionId === removedActionId, - )?.displayName - - removedActionName && - DisplayNameGenerator.removeDisplayName(removedActionName) - dispatch(actionActions.removeActionItemReducer(removedActionId)) - setIsActionDirty(false) - updateSelectedItemId(removedActionId) - }, - () => {}, - () => {}, - (loading) => { - setActionListLoading(loading) - }, - ) - } - - useEffect(() => { - const controller = new AbortController() - Api.request( - { - method: "GET", - url: "/resources", - signal: controller.signal, - }, - ({ data }: { data: Resource[] }) => { - dispatch(resourceActions.updateResourceListReducer(data)) - }, - (response) => { - Message.error( - t("editor.action.action_list.message.load_resource_fail", { - message: response.data.errorMessage, - }), - ) - }, - () => {}, - (loading) => { - setResourceLoading(loading) - }, - ) - - Api.request( - { - method: "GET", - url: baseActionApi, - signal: controller.signal, - }, - ({ data }: { data: ActionItem[] }) => { - dispatch(actionActions.updateActionListReducer(data)) - - if (data.length) { - setActiveActionItemId(data[0].actionId) - } - }, - (response) => { - Message.error( - t("editor.action.action_list.message.load_action_list_fail", { - message: response.data.errorMessage, - }), - ) - }, - () => {}, - (loading) => { - setActionListLoading(loading) - }, - ) - - return () => { - controller.abort() - } - }, []) - - useEffect(() => { - const selectedAction = actionItems.find( - ({ actionId }) => actionId === activeActionItemId, - ) - selectedAction && - dispatch(configActions.updateSelectedAction(selectedAction)) - }, [activeActionItemId, actionItems]) - - return ( - -
    - { - setEditorHeight(val) - }} - actionList={ - - } - actionEditorPanel={ - { - setActionType("select") - setFormVisible(true) - }} - onEditResource={() => { - setActionType("edit") - setFormVisible(true) - }} - /> - } - /> - - setFormVisible(false)} - /> -
    -     - ) -} - -ActionEditor.displayName = "ActionEditor" diff --git a/src/page/App/components/ActionEditor/interface.tsx b/src/page/App/components/ActionEditor/interface.tsx deleted file mode 100644 index 78cce18f8a..0000000000 --- a/src/page/App/components/ActionEditor/interface.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { HTMLAttributes, ReactNode } from "react" -import { ACTION_TYPE } from "./constant" - -export interface ActionEditorProps extends HTMLAttributes { - className?: string -} - -export interface ActionEditorLayoutProps - extends HTMLAttributes { - actionList: ReactNode - actionEditorPanel: ReactNode - updateEditorHeight?: (val: number) => void -} - -export type ApiType = ACTION_TYPE.REST_API - -export type DatabaseType = - | ACTION_TYPE.MYSQL - | ACTION_TYPE.MONGO_DB - | ACTION_TYPE.POSTGRES - | ACTION_TYPE.REDIS - -export type ResourceType = DatabaseType | ApiType | string - -export interface ActionEditorContextProps { - editorHeight: number - isActionDirty: boolean - baseActionApi: string - setIsActionDirty?: (isDirty: boolean) => void - setActionListLoading?: (loading: boolean) => void -} - -export interface ActionDisplayNameValidateResult { - error: boolean - errorMsg?: string -} diff --git a/src/page/App/components/ActionEditor/layout.tsx b/src/page/App/components/ActionEditor/layout.tsx deleted file mode 100644 index 07ec14d800..0000000000 --- a/src/page/App/components/ActionEditor/layout.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { FC, useState, useRef, useEffect } from "react" -import { css } from "@emotion/react" -import { useResize } from "@/utils/hooks/useResize" -import { - applyContainerHeight, - applyResizerStyle, - actionEditorContainer, - actionEditorPanelLayoutWrapper, -} from "./style" -import { ActionEditorLayoutProps } from "./interface" - -export const ActionEditorLayout: FC = (props) => { - const { actionList, actionEditorPanel, updateEditorHeight } = props - const [containerHeight, setContainerHeight] = useState(300) - const editorRef = useRef(null) - const onHeightChange = (height: number) => { - setContainerHeight(height) - } - - const resizer = useResize("vertical", editorRef, onHeightChange) - - useEffect(() => { - updateEditorHeight?.(containerHeight) - }, [containerHeight]) - - return ( -
    -
    -
    - {actionList} - {actionEditorPanel} -
    -
    - ) -} - -ActionEditorLayout.displayName = "ActionEditorLayout" diff --git a/src/page/App/components/ActionEditor/style.tsx b/src/page/App/components/ActionEditor/style.tsx deleted file mode 100644 index 67fac809a4..0000000000 --- a/src/page/App/components/ActionEditor/style.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { css, SerializedStyles } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -type IllaColor = - | "white" - | "blackAlpha" - | "gray" - | "grayBlue" - | "red" - | "orange" - | "yellow" - | "green" - | "blue" - | "cyan" - | "purple" - | "techPink" - | "techPurple" - -export const actionEditorContainer = css` - display: flex; - height: 100%; - border-top: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - min-height: 300px; - overflow: auto; -` - -export const actionEditorPanelLayoutWrapper = css` - display: flex; - flex-direction: column; - position: relative; - flex: 0 0 auto; -` - -export function applyContainerHeight(height: number): SerializedStyles { - return css({ - height, - }) -} - -export function applyResizerStyle( - isResizing: boolean, - bottom: number, -): SerializedStyles { - const bgColor = css` - background-color: ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - ` - return css` - bottom: ${bottom}px; - height: 5px; - width: 100%; - position: absolute; - cursor: row-resize; - transition: background-color 0.2s ease-in-out; - ${isResizing && bgColor}; - &:hover { - background-color: ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - } - ` -} - -export function applyIllaColor(color: IllaColor, serialNumber: string): string { - return globalColor(`--${illaPrefix}-${color}-${serialNumber}`) -} - -export function applyGridColIndex(index: number): SerializedStyles { - return css` - grid-column-start: ${index}; - ` -} diff --git a/src/page/App/components/ActionEditor/utils.ts b/src/page/App/components/ActionEditor/utils.ts deleted file mode 100644 index d41760e444..0000000000 --- a/src/page/App/components/ActionEditor/utils.ts +++ /dev/null @@ -1,32 +0,0 @@ -import i18n from "@/i18n/config" -import { isAlreadyGenerate } from "@/redux/currentApp/displayName/displayNameReducer" -import { isValidDisplayName } from "@/utils/typeHelper" -import { ActionDisplayNameValidateResult } from "./interface" - -export function isValidActionDisplayName( - name: string, -): ActionDisplayNameValidateResult { - if (name === "") { - return { - error: true, - errorMsg: i18n.t("editor.action.action_list.message.please_input_name"), - } - } - - if (!isValidDisplayName(name)) { - return { - error: true, - errorMsg: i18n.t("editor.action.action_list.message.valid_name"), - } - } - - // check if unique in all actions and cache map - if (isAlreadyGenerate(name)) { - return { - error: true, - errorMsg: i18n.t("editor.action.action_list.message.name_already_exist"), - } - } - - return { error: false } -} diff --git a/src/page/App/components/Actions/ActionList/index.tsx b/src/page/App/components/Actions/ActionList/index.tsx new file mode 100644 index 0000000000..e6c15c992e --- /dev/null +++ b/src/page/App/components/Actions/ActionList/index.tsx @@ -0,0 +1,120 @@ +import { FC, HTMLAttributes, useState } from "react" +import { List } from "@illa-design/list" +import { useDispatch, useSelector } from "react-redux" +import { ActionListItem } from "@/page/App/components/Actions/ActionListItem" +import { SearchHeader } from "@/page/App/components/Actions/SearchHeader" +import { + actionListEmptyStyle, + addNewActionButtonStyle, + listContainerStyle, + listStyle, + searchHeaderContainerStyle, +} from "./style" +import { Button } from "@illa-design/button" +import { useTranslation } from "react-i18next" +import store, { RootState } from "@/store" +import { configActions } from "@/redux/config/configSlice" +import { Modal } from "@illa-design/modal" +import { Empty } from "@illa-design/empty" +import { ReactComponent as ActionListEmptyState } from "@assets/action-list-empty-state.svg" + +export const ActionList: FC> = (props) => { + const { className } = props + + const [searchActionValue, setSearchActionValue] = useState("") + const actionList = useSelector((state: RootState) => { + return state.currentApp.action.filter((value) => { + return value.displayName + .toLowerCase() + .includes(searchActionValue.toLowerCase()) + }) + }) + + const { t } = useTranslation() + const dispatch = useDispatch() + + return ( +
    + { + setSearchActionValue(value) + }} + /> + +
    + {actionList.length != 0 && ( + { + return ( + { + const selectedAction = + store.getState().config.selectedAction + if (selectedAction === null) { + dispatch(configActions.updateSelectedAction(action)) + return + } + // is a change action + if (selectedAction?.displayName !== action.displayName) { + // find last action + const lastAction = store + .getState() + .currentApp.action.find((value) => { + return ( + value.displayName === selectedAction?.displayName + ) + }) + // if changed + if (lastAction === selectedAction) { + dispatch(configActions.updateSelectedAction(action)) + } else { + // show dialog + Modal.confirm({ + content: t( + "editor.action.action_list.message.confirm_switch", + ), + onOk: () => { + dispatch(configActions.updateSelectedAction(action)) + }, + }) + } + } + }} + /> + ) + }} + renderRaw + renderKey={(data) => { + return data.displayName + }} + /> + )} + {actionList.length == 0 && searchActionValue !== "" && ( + } + description={t("editor.action.action_list.tips.not_found")} + /> + )} + {actionList.length == 0 && searchActionValue == "" && ( +
    + {t("editor.action.action_list.tips.empty")} +
    + )} +
    +
    + ) +} + +ActionList.displayName = "ActionList" diff --git a/src/page/App/components/Actions/ActionList/style.ts b/src/page/App/components/Actions/ActionList/style.ts new file mode 100644 index 0000000000..04c47dad60 --- /dev/null +++ b/src/page/App/components/Actions/ActionList/style.ts @@ -0,0 +1,37 @@ +import { css } from "@emotion/react" +import { globalColor, illaPrefix } from "@illa-design/theme" + +export const searchHeaderContainerStyle = css` + width: 255px; + display: flex; + flex-direction: column; + border-right: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; +` + +export const addNewActionButtonStyle = css` + flex-shrink: 1; + margin-left: 16px; + margin-right: 16px; + margin-bottom: 8px; +` + +export const listContainerStyle = css` + flex-grow: 1; + width: 100%; + height: 0; + flex-shrink: 0; + overflow-y: auto; +` + +export const listStyle = css` + width: 100%; +` + +export const actionListEmptyStyle = css` + margin: 8px 16px; + padding: 8px 12px; + font-size: 12px; + color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; + border-radius: 4px; + border: dashed 1px ${globalColor(`--${illaPrefix}-grayBlue-08`)}; +` diff --git a/src/page/App/components/Actions/ActionListItem/index.tsx b/src/page/App/components/Actions/ActionListItem/index.tsx new file mode 100644 index 0000000000..ce1fd4c976 --- /dev/null +++ b/src/page/App/components/Actions/ActionListItem/index.tsx @@ -0,0 +1,88 @@ +import { forwardRef } from "react" +import { Dropdown, DropList } from "@illa-design/dropdown" +import { globalColor, illaPrefix } from "@illa-design/theme" +import { + actionIconContainer, + actionItemDotStyle, + actionItemLeftStyle, + applyActionItemContainerStyle, + applyActionItemTitleStyle, + timeStyle, + warningCircleStyle, +} from "./style" +import { WarningCircleIcon } from "@illa-design/icon" +import { useTranslation } from "react-i18next" +import { ActionListItemProps } from "@/page/App/components/Actions/ActionListItem/interface" +import { useDispatch, useSelector } from "react-redux" +import { RootState } from "@/store" +import { configActions } from "@/redux/config/configSlice" +import { getSelectedAction } from "@/redux/config/configSelector" +import { getIconFromActionType } from "@/page/App/components/Actions/getIcon" + +const Item = DropList.Item + +export const ActionListItem = forwardRef( + (props, ref) => { + const { action, onItemClick } = props + + const { t } = useTranslation() + const selectedAction = useSelector(getSelectedAction) + + const error = useSelector((state: RootState) => { + return state.currentApp.executionTree.execution.error[action.displayName] + }) + + const isChanged = useSelector((state: RootState) => { + return ( + state.config.selectedAction?.displayName === action.displayName && + selectedAction !== action + ) + }) + + return ( + + + + + + } + > +
    { + onItemClick(action) + }} + > +
    +
    + {getIconFromActionType(action.actionType, "16px")} + {error && } +
    +
    + {action.displayName} +
    + {isChanged &&
    } +
    +
    0.7s
    +
    + + ) + }, +) diff --git a/src/page/App/components/Actions/ActionListItem/interface.ts b/src/page/App/components/Actions/ActionListItem/interface.ts new file mode 100644 index 0000000000..0c88351ba0 --- /dev/null +++ b/src/page/App/components/Actions/ActionListItem/interface.ts @@ -0,0 +1,7 @@ +import { ActionItem } from "@/redux/currentApp/action/actionState" +import { HTMLAttributes } from "react" + +export interface ActionListItemProps extends HTMLAttributes { + action: ActionItem + onItemClick: (action: ActionItem) => void +} diff --git a/src/page/App/components/Actions/ActionListItem/style.ts b/src/page/App/components/Actions/ActionListItem/style.ts new file mode 100644 index 0000000000..ae1ea73f47 --- /dev/null +++ b/src/page/App/components/Actions/ActionListItem/style.ts @@ -0,0 +1,80 @@ +import { css, SerializedStyles } from "@emotion/react" +import { globalColor, illaPrefix } from "@illa-design/theme" + +export const actionIconContainer = css` + display: flex; + justify-content: center; + align-items: center; + position: relative; + flex-shrink: 0; + width: 16px; + height: 16px; +` + +export const actionItemDotStyle = css` + flex-shrink: 0; + width: 8px; + margin-left: 9px; + height: 8px; + margin-right: 9px; + box-sizing: border-box; + border-radius: 50%; + background: ${globalColor(`--${illaPrefix}-blue-03`)}; +` + +export function applyActionItemTitleStyle(error: boolean): SerializedStyles { + return css` + flex-shrink: 1; + font-weight: 500; + margin-left: 8px; + overflow: hidden; + color: ${error + ? globalColor(`--${illaPrefix}-red-03`) + : globalColor(`--${illaPrefix}-grayBlue-02`)}; + text-overflow: ellipsis; + white-space: nowrap; + ` +} + +export const timeStyle = css` + color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; +` + +export const warningCircleStyle = css` + position: absolute; + color: ${globalColor(`--${illaPrefix}-red-03`)}; + font-size: 8px; + bottom: 0; + right: 0; +` + +export function applyActionItemContainerStyle( + selected: boolean, +): SerializedStyles { + return css` + background: ${selected + ? globalColor(`--${illaPrefix}-techPurple-07`) + : "transparent"}; + width: 100%; + align-items: center; + display: flex; + flex-direction: row; + padding: 9px 16px 9px 16px; + font-size: 14px; + + &:hover { + background: ${selected + ? globalColor(`--${illaPrefix}-techPurple-07`) + : globalColor(`--${illaPrefix}-grayBlue-09`)}; + } + ` +} + +export const actionItemLeftStyle = css` + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; + display: flex; + overflow: hidden; + flex-direction: row; + align-items: center; + flex-grow: 1; +` diff --git a/src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx b/src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx new file mode 100644 index 0000000000..d615523a89 --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx @@ -0,0 +1,64 @@ +import { FC } from "react" +import { CaretRightIcon, MoreIcon } from "@illa-design/icon" +import { + actionTitleBarDisplayNameStyle, + actionTitleBarRunStyle, + actionTitleBarSpaceStyle, + actionTitleBarStyle, +} from "@/page/App/components/Actions/ActionPanel/style" +import { Button } from "@illa-design/button" +import { WrappedEditableText } from "@/widgetLibrary/EditableWidget" +import { ActionTitleBarProps } from "@/page/App/components/Actions/ActionPanel/ActionTitleBar/interface" +import { useTranslation } from "react-i18next" +import { Dropdown, DropList } from "@illa-design/dropdown" +import { globalColor, illaPrefix } from "@illa-design/theme" + +const Item = DropList.Item + +export const ActionTitleBar: FC = (props) => { + const { action } = props + + const { t } = useTranslation() + + return ( +
    + {}} + /> +
    + + + + + } + > + +
    + ) +} + +ActionTitleBar.displayName = "ActionTitleBar" diff --git a/src/page/App/components/Actions/ActionPanel/ActionTitleBar/interface.ts b/src/page/App/components/Actions/ActionPanel/ActionTitleBar/interface.ts new file mode 100644 index 0000000000..65d42f5c20 --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/ActionTitleBar/interface.ts @@ -0,0 +1,6 @@ +import { HTMLAttributes } from "react" +import { ActionItem } from "@/redux/currentApp/action/actionState" + +export interface ActionTitleBarProps extends HTMLAttributes { + action: ActionItem +} diff --git a/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx b/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx new file mode 100644 index 0000000000..685de096cc --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx @@ -0,0 +1,9 @@ +import { FC } from "react" +import { ActionPanelProps } from "@/page/App/components/Actions/ActionPanel/interface" +import { mysqlContainerStyle } from "@/page/App/components/Actions/ActionPanel/MysqlPanel/style" + +export const MysqlPanel: FC = () => { + return
    +} + +MysqlPanel.displayName = "MysqlPanel" diff --git a/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts b/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts new file mode 100644 index 0000000000..aa78dea2d9 --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts @@ -0,0 +1,3 @@ +import { css } from "@emotion/react" + +export const mysqlContainerStyle = css`` diff --git a/src/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx b/src/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx new file mode 100644 index 0000000000..a07f503732 --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx @@ -0,0 +1,8 @@ +import { FC } from "react" +import { ActionPanelProps } from "@/page/App/components/Actions/ActionPanel/interface" + +export const RestApiPanel: FC = () => { + return
    +} + +RestApiPanel.displayName = "RestApiPanel" diff --git a/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx b/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx new file mode 100644 index 0000000000..dfb1d7f268 --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx @@ -0,0 +1,8 @@ +import { FC } from "react" +import { ActionPanelProps } from "@/page/App/components/Actions/ActionPanel/interface" + +export const TransformerPanel: FC = () => { + return
    +} + +TransformerPanel.displayName = "TransformerPanel" diff --git a/src/page/App/components/Actions/ActionPanel/index.tsx b/src/page/App/components/Actions/ActionPanel/index.tsx new file mode 100644 index 0000000000..9422d7671b --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/index.tsx @@ -0,0 +1,43 @@ +import { FC, ReactNode } from "react" +import { actionPanelStyle } from "@/page/App/components/Actions/ActionPanel/style" +import { useSelector } from "react-redux" +import { getSelectedAction } from "@/redux/config/configSelector" +import { ActionTitleBar } from "@/page/App/components/Actions/ActionPanel/ActionTitleBar" +import { MysqlPanel } from "./MysqlPanel" +import { RestApiPanel } from "@/page/App/components/Actions/ActionPanel/RestApiPanel" +import { TransformerPanel } from "@/page/App/components/Actions/ActionPanel/TransformerPanel" + +export const ActionPanel: FC = () => { + const selectedAction = useSelector(getSelectedAction) + // null selected + if (selectedAction === null) { + return null + } + let actionPanel: ReactNode + switch (selectedAction.actionType) { + case "mysql": + actionPanel = + break + case "restapi": + actionPanel = + break + case "mongodb": + break + case "redis": + break + case "postgresql": + break + case "transformer": + actionPanel = + break + default: + break + } + return ( +
    + +
    + ) +} + +ActionPanel.displayName = "ActionPanel" diff --git a/src/page/App/components/Actions/ActionPanel/interface.ts b/src/page/App/components/Actions/ActionPanel/interface.ts new file mode 100644 index 0000000000..0ce7d965ab --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/interface.ts @@ -0,0 +1,6 @@ +import { HTMLAttributes } from "react" +import { ActionItem } from "@/redux/currentApp/action/actionState" + +export interface ActionPanelProps extends HTMLAttributes { + action: ActionItem +} diff --git a/src/page/App/components/Actions/ActionPanel/style.ts b/src/page/App/components/Actions/ActionPanel/style.ts new file mode 100644 index 0000000000..04dc084817 --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/style.ts @@ -0,0 +1,35 @@ +import { css } from "@emotion/react" +import { globalColor, illaPrefix } from "@illa-design/theme" + +export const actionPanelStyle = css` + display: flex; + flex-grow: 1; + min-width: 670px; + height: 100%; + flex-direction: column; + overflow-x: auto; + overflow-y: hidden; +` + +export const actionTitleBarStyle = css` + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + padding: 0 16px; + border-bottom: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; + height: 48px; +` + +export const actionTitleBarDisplayNameStyle = css` + width: 280px; +` + +export const actionTitleBarSpaceStyle = css` + flex-grow: 1; + min-width: 8px; +` + +export const actionTitleBarRunStyle = css` + margin-left: 8px; +` diff --git a/src/page/App/components/Actions/SearchHeader/index.tsx b/src/page/App/components/Actions/SearchHeader/index.tsx new file mode 100644 index 0000000000..02af2dbdf4 --- /dev/null +++ b/src/page/App/components/Actions/SearchHeader/index.tsx @@ -0,0 +1,94 @@ +import { FC, useState } from "react" +import { css } from "@emotion/react" +import { AnimatePresence, motion } from "framer-motion" +import { useTranslation } from "react-i18next" +import { Input } from "@illa-design/input" +import { Button } from "@illa-design/button" +import { SearchIcon } from "@illa-design/icon" +import { + searchHeaderStyle, + searchHeaderTitleIconStyle, + searchHeaderTitleStyle, + searchHeaderTitleTextStyle, + searchInputContainerStyle, + searchInputIconStyle, + searchInputStyle, +} from "./style" +import { SearchHeaderProps } from "./interface" + +export const SearchHeader: FC = (props) => { + const { onSearch } = props + const { t } = useTranslation() + const [inSearchState, setInSearchState] = useState(false) + + const searchTitle = ( + + + {t("editor.action.action_list.title")} + + setInSearchState(true)} + css={searchHeaderTitleIconStyle} + /> + + ) + + const searchInput = ( +
    + + , + }} + placeholder={t("editor.action.action_list.placeholder.search")} + onChange={onSearch} + onClear={() => onSearch("")} + css={searchInputStyle} + allowClear + /> + + + + + +
    + ) + + const headerContent = inSearchState ? searchInput : searchTitle + + return {headerContent} +} + +SearchHeader.displayName = "SearchHeader" diff --git a/src/page/App/components/Actions/SearchHeader/interface.tsx b/src/page/App/components/Actions/SearchHeader/interface.tsx new file mode 100644 index 0000000000..8ed76e046e --- /dev/null +++ b/src/page/App/components/Actions/SearchHeader/interface.tsx @@ -0,0 +1,5 @@ +import { HTMLAttributes } from "react" + +export interface SearchHeaderProps extends HTMLAttributes { + onSearch: (value: string) => void +} diff --git a/src/page/App/components/Actions/SearchHeader/style.tsx b/src/page/App/components/Actions/SearchHeader/style.tsx new file mode 100644 index 0000000000..f621d0de4e --- /dev/null +++ b/src/page/App/components/Actions/SearchHeader/style.tsx @@ -0,0 +1,54 @@ +import chroma from "chroma-js" +import { css } from "@emotion/react" +import { globalColor, illaPrefix } from "@illa-design/theme" + +export const searchHeaderStyle = css` + width: 100%; + height: 48px; + display: flex; + flex-direction: row; + padding: 0 16px; + align-items: center; + color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; +` + +export const searchInputContainerStyle = css` + display: flex; + flex-direction: row; + justify-content: flex-end; +` + +export const searchHeaderTitleStyle = css` + justify-content: flex-start; +` + +export const searchHeaderTitleTextStyle = css` + white-space: nowrap; + font-size: 14px; + color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; + flex: 1; +` + +export const searchHeaderTitleIconStyle = css` + cursor: pointer; + + &:hover { + color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; + } +` +export const searchInputStyle = css` + margin-right: 8px; + + & > span { + border-radius: 8px !important; + border-color: ${globalColor(`--${illaPrefix}-techPurple-01`)} !important; + box-shadow: 0 0 8px 0 + ${chroma(globalColor(`--${illaPrefix}-techPurple-01`)) + .alpha(0.2) + .hex()}; + } +` + +export const searchInputIconStyle = css` + color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; +` diff --git a/src/page/App/components/Actions/getIcon.tsx b/src/page/App/components/Actions/getIcon.tsx new file mode 100644 index 0000000000..da502ab06a --- /dev/null +++ b/src/page/App/components/Actions/getIcon.tsx @@ -0,0 +1,46 @@ +import { ResourceType } from "@/redux/resource/resourceState" +import { ReactElement } from "react" +import { ActionType } from "@/redux/currentApp/action/actionState" +import { + JSTransformerIcon, + MongoDbIcon, + MySqlIcon, + RedisIcon, + RestApiIcon, +} from "@illa-design/icon" + +export function getIconFromResourceType( + type: ResourceType, + size: string, +): ReactElement | null { + switch (type) { + case "mysql": + return + case "restapi": + return + case "mongodb": + return + case "redis": + return + } + return null +} + +export function getIconFromActionType( + type: ActionType, + size: string, +): ReactElement | null { + switch (type) { + case "mysql": + return + case "restapi": + return + case "mongodb": + return + case "redis": + return + case "transformer": + return + } + return null +} diff --git a/src/page/App/components/Actions/index.tsx b/src/page/App/components/Actions/index.tsx new file mode 100644 index 0000000000..51979e0546 --- /dev/null +++ b/src/page/App/components/Actions/index.tsx @@ -0,0 +1,24 @@ +import { FC, HTMLAttributes } from "react" +import { ActionList } from "./ActionList" +import { ActionPanel } from "./ActionPanel" +import { + actionEditorDragBarStyle, + applyActionEditorStyle, + contentContainerStyle, +} from "./styles" +import { Divider } from "@illa-design/divider" + +export const ActionEditor: FC> = (props) => { + return ( +
    +
    + +
    + + +
    +
    + ) +} + +ActionEditor.displayName = "ActionEditor" diff --git a/src/page/App/components/Actions/styles.ts b/src/page/App/components/Actions/styles.ts new file mode 100644 index 0000000000..7d4da8e711 --- /dev/null +++ b/src/page/App/components/Actions/styles.ts @@ -0,0 +1,31 @@ +import { css } from "@emotion/react" +import { globalColor, illaPrefix } from "@illa-design/theme" + +export function applyActionEditorStyle(h: number) { + return css` + position: relative; + width: 100%; + height: ${h}px; + ` +} + +export const actionEditorDragBarStyle = css` + top: -5px; + cursor: row-resize; + width: 100%; + position: absolute; + transition: all 0.2s; + height: 5px; + + &:hover { + background: ${globalColor(`--${illaPrefix}-grayBlue-08`)}; + } +` + +export const contentContainerStyle = css` + width: 100%; + display: flex; + flex-direction: row; + overflow-y: hidden; + height: 100%; +` diff --git a/src/page/App/components/DataWorkspace/index.tsx b/src/page/App/components/DataWorkspace/index.tsx index 98e268e5dc..cd67602415 100644 --- a/src/page/App/components/DataWorkspace/index.tsx +++ b/src/page/App/components/DataWorkspace/index.tsx @@ -7,7 +7,6 @@ import { searchDsl, } from "@/redux/currentApp/editor/components/componentsSelector" import { configActions } from "@/redux/config/configSlice" -import { selectAllActionItem } from "@/redux/currentApp/action/actionSelector" import { getActionExecutionResultArray, getGlobalInfoExecutionResult, @@ -18,6 +17,7 @@ import { getSelectedComponentsDisplayName, } from "@/redux/config/configSelector" import { WorkSpaceTree } from "@/page/App/components/DataWorkspace/components/WorkSpaceTree" +import { getActionList } from "@/redux/currentApp/action/actionSelector" interface DataWorkspaceProps extends HTMLAttributes {} @@ -25,7 +25,7 @@ export const DataWorkspace: FC = (props) => { const { className } = props const { t } = useTranslation() const dispatch = useDispatch() - const actionList = useSelector(selectAllActionItem) + const actionList = useSelector(getActionList) const widgetExecutionArray = useSelector(getWidgetExecutionResultArray) const actionExecutionArray = useSelector(getActionExecutionResultArray) const globalInfoList = useSelector(getGlobalInfoExecutionResult) @@ -57,7 +57,7 @@ export const DataWorkspace: FC = (props) => { actionExecutionArray.length })`} dataList={actionExecutionArray} - selectedKeys={[selectedAction.displayName]} + selectedKeys={[selectedAction?.displayName ?? ""]} handleSelect={handleActionSelect} /> = (props) => { const [deployLoading, setDeployLoading] = useState(false) const handleClickLeftWindowIcon = useCallback(() => { - console.log(!leftPanelVisible) dispatch(configActions.updateLeftPanel(!leftPanelVisible)) }, [leftPanelVisible]) const handleClickRightWindowIcon = useCallback(() => { diff --git a/src/page/App/components/PanelSetters/SelectSetter/eventTargetActionSelect.tsx b/src/page/App/components/PanelSetters/SelectSetter/eventTargetActionSelect.tsx index bf3fd996c3..b703364554 100644 --- a/src/page/App/components/PanelSetters/SelectSetter/eventTargetActionSelect.tsx +++ b/src/page/App/components/PanelSetters/SelectSetter/eventTargetActionSelect.tsx @@ -1,51 +1,52 @@ -import { FC, useEffect, useMemo } from "react" +import { FC, useContext, useEffect, useMemo } from "react" import { useSelector } from "react-redux" import { Select } from "@illa-design/select" import { applyBaseSelectWrapperStyle } from "@/page/App/components/PanelSetters/SelectSetter/style" -import { - getAllActionDisplayNameMapProps, - SELECTED_ACTION_DISPALY_NAME, -} from "@/redux/currentApp/action/actionSelector" import { BaseSelectSetterProps } from "./interface" +import { getActionList } from "@/redux/currentApp/action/actionSelector" +import { SelectedPanelContext } from "@/page/App/components/InspectPanel/context/selectedContext" +import { getSelectedAction } from "@/redux/config/configSelector" export const EventTargetActionSelect: FC = (props) => { const { isSetterSingleRow, attrName, handleUpdateDsl, value } = props - const actionDisplayNameMapProps = useSelector(getAllActionDisplayNameMapProps) + const actionList = useSelector(getActionList) - const finalOptions = useMemo(() => { - const tmpOptions: { label: string; value: string }[] = [] - Object.keys(actionDisplayNameMapProps).forEach((key) => { - if (key !== SELECTED_ACTION_DISPALY_NAME) { - tmpOptions.push({ - label: key, - value: key, - }) - } - }) - return tmpOptions - }, [actionDisplayNameMapProps]) - - const finalValue = useMemo(() => { - const index = finalOptions.findIndex((option) => { - return option.value === value - }) - if (index !== -1) return value - return undefined - }, [finalOptions, attrName, value]) + const selectedContext = useContext(SelectedPanelContext) + const selectedAction = useSelector(getSelectedAction) useEffect(() => { - if (finalValue === undefined) { + if (value === undefined) { handleUpdateDsl(attrName, undefined) } - }, [finalValue, attrName]) + }, [value]) + + const actionOptions = useMemo(() => { + if (selectedContext.widgetOrAction === "ACTION") { + const i = actionList.findIndex((value) => { + return value.displayName === selectedAction?.displayName + }) + if (i != -1) { + actionList.splice(i, 1) + } + return actionList.map((item) => { + return item.displayName + }) + } + if (selectedContext.widgetOrAction === "WIDGET") { + return actionList.map((item) => { + return item.displayName + }) + } + return [] + }, [actionList]) return (
    { showCharacterCount?: InputProps["showCount"] value?: string + className?: string prefixIcon?: InputProps["prefix"] prefixText?: InputProps["addonBefore"] suffixIcon?: InputProps["suffix"] From ecc44cf46075e62ef82d6ad890cd4e76e03d4e6d Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 22 Jul 2022 17:24:47 +0800 Subject: [PATCH 040/148] fix: fetch app --- .../ActionEditor/ActionList/index.tsx | 5 ++-- src/page/App/index.tsx | 3 --- src/page/Deploy/index.tsx | 3 --- .../editor/components/componentsReducer.ts | 26 +++++++++---------- .../editor/components/componentsSelector.ts | 2 +- .../editor/components/componentsState.ts | 9 ++----- 6 files changed, 18 insertions(+), 30 deletions(-) diff --git a/src/page/App/components/ActionEditor/ActionList/index.tsx b/src/page/App/components/ActionEditor/ActionList/index.tsx index 6c5404c770..b3217fda63 100644 --- a/src/page/App/components/ActionEditor/ActionList/index.tsx +++ b/src/page/App/components/ActionEditor/ActionList/index.tsx @@ -6,7 +6,7 @@ import { Trigger } from "@illa-design/trigger" import { DropList, Dropdown } from "@illa-design/dropdown" import { Input } from "@illa-design/input" import { illaPrefix, globalColor } from "@illa-design/theme" -import { AddIcon, WarningCircleIcon, EmptyStateIcon } from "@illa-design/icon" +import { AddIcon, WarningCircleIcon } from "@illa-design/icon" import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName" import { selectAllActionItem } from "@/redux/currentApp/action/actionSelector" import { getSelectedAction } from "@/redux/config/configSelector" @@ -34,6 +34,7 @@ import { nameErrorMsgStyle, } from "./style" import { ActionListProps } from "./interface" +import { ReactComponent as EmptySearchIcon } from "@/assets/empty-search-icon.svg" const DropListItem = DropList.Item @@ -187,7 +188,7 @@ export const ActionList: FC = (props) => { const NoMatchFound = (
    - + {t("editor.action.action_list.tips.not_found")}
    ) diff --git a/src/page/App/index.tsx b/src/page/App/index.tsx index 5c695a24b4..6dad8a5939 100644 --- a/src/page/App/index.tsx +++ b/src/page/App/index.tsx @@ -103,9 +103,6 @@ export const Editor: FC = () => { dispatch( componentsActions.updateComponentReducer(response.data.components), ) - dispatch( - componentsActions.updateComponentReducer(response.data.components), - ) dispatch(actionActions.updateActionListReducer(response.data.actions)) dispatch( diff --git a/src/page/Deploy/index.tsx b/src/page/Deploy/index.tsx index fd6419b0c2..da5dffecbe 100644 --- a/src/page/Deploy/index.tsx +++ b/src/page/Deploy/index.tsx @@ -36,9 +36,6 @@ export const Deploy: FC = () => { dispatch( componentsActions.updateComponentReducer(response.data.components), ) - dispatch( - componentsActions.updateComponentReducer(response.data.components), - ) dispatch(actionActions.updateActionListReducer(response.data.actions)) dispatch( dependenciesActions.setDependenciesReducer( diff --git a/src/redux/currentApp/editor/components/componentsReducer.ts b/src/redux/currentApp/editor/components/componentsReducer.ts index e17b4a3f43..c501b5d7c3 100644 --- a/src/redux/currentApp/editor/components/componentsReducer.ts +++ b/src/redux/currentApp/editor/components/componentsReducer.ts @@ -28,7 +28,7 @@ export const updateComponentDraggingState: CaseReducer< ComponentsState, PayloadAction > = (state, action) => { - const node = searchDsl(state.rootDsl, action.payload.displayName) + const node = searchDsl(state, action.payload.displayName) if (node != null) { node.isDragging = action.payload.isDragging } @@ -38,7 +38,7 @@ export const updateComponentResizeState: CaseReducer< ComponentsState, PayloadAction > = (state, action) => { - const node = searchDsl(state.rootDsl, action.payload.displayName) + const node = searchDsl(state, action.payload.displayName) if (node != null) { node.isResizing = action.payload.isResizing } @@ -48,10 +48,7 @@ export const copyComponentNodeReducer: CaseReducer< ComponentsState, PayloadAction > = (state, action) => { - const parentNode = searchDsl( - state.rootDsl, - action.payload.componentNode.parentNode, - ) + const parentNode = searchDsl(state, action.payload.componentNode.parentNode) if (parentNode != null) { parentNode.childrenNode.push({ ...action.payload.componentNode, @@ -66,10 +63,11 @@ export const addComponentReducer: CaseReducer< PayloadAction > = (state, action) => { const dealNode = action.payload - if (state.rootDsl == null || dealNode.parentNode == null) { - state.rootDsl = dealNode + if (state == null || dealNode.parentNode == null) { + state = dealNode + return state } else { - const parentNode = searchDsl(state.rootDsl, dealNode.parentNode) + const parentNode = searchDsl(state, dealNode.parentNode) if (parentNode != null) { parentNode.childrenNode.push(dealNode) } @@ -81,7 +79,7 @@ export const updateSingleComponentReducer: CaseReducer< PayloadAction > = (state, action) => { const dealNode = action.payload.componentNode - const parentNode = searchDsl(state.rootDsl, dealNode.parentNode) + const parentNode = searchDsl(state, dealNode.parentNode) if (parentNode != null) { const index = parentNode.childrenNode.findIndex((value, index, obj) => { return value.displayName === dealNode.displayName @@ -97,10 +95,10 @@ export const deleteComponentNodeReducer: CaseReducer< PayloadAction > = (state, action) => { const { displayNames } = action.payload - if (state.rootDsl == null) { + if (state == null) { return } - const rootNode = state.rootDsl + const rootNode = state displayNames.forEach((value, index) => { const searchNode = searchDsl(rootNode, value) if (searchNode != null) { @@ -130,7 +128,7 @@ export const updateComponentPropsReducer: CaseReducer< if (!isObject(updateSlice) || !displayName) { return } - const node = searchDsl(state.rootDsl, displayName) + const node = searchDsl(state, displayName) if (!node) return const widgetProps = node.props || {} const clonedWidgetProps = cloneDeep(widgetProps) @@ -149,7 +147,7 @@ export const resetComponentPropsReducer: CaseReducer< if (!isObject(resetSlice) || !displayName) { return } - const node = searchDsl(state.rootDsl, displayName) + const node = searchDsl(state, displayName) if (!node) return const widgetProps = resetSlice || {} const clonedWidgetProps = cloneDeep(widgetProps) diff --git a/src/redux/currentApp/editor/components/componentsSelector.ts b/src/redux/currentApp/editor/components/componentsSelector.ts index dae5dd4b68..89a43b2156 100644 --- a/src/redux/currentApp/editor/components/componentsSelector.ts +++ b/src/redux/currentApp/editor/components/componentsSelector.ts @@ -53,7 +53,7 @@ export function flattenDsl(rootNode: ComponentNode): { } export const getCanvas = (state: RootState) => { - return state.currentApp.editor.components.rootDsl + return state.currentApp.editor.components } export const getComponentNodeBySingleSelected = createSelector( diff --git a/src/redux/currentApp/editor/components/componentsState.ts b/src/redux/currentApp/editor/components/componentsState.ts index b7a2dfe7fc..592b6d5488 100644 --- a/src/redux/currentApp/editor/components/componentsState.ts +++ b/src/redux/currentApp/editor/components/componentsState.ts @@ -29,13 +29,8 @@ export interface ComponentNode { } } -export interface ComponentsState { - rootDsl: ComponentNode | null -} - -export const ComponentsInitialState: ComponentsState = { - rootDsl: null, -} +export type ComponentsState = ComponentNode | null +export const ComponentsInitialState: ComponentsState = null export interface DeleteComponentNodePayload { displayNames: string[] From 94c4dc0e367e9fe9842797a37456101a0b15dc0a Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 22 Jul 2022 18:18:03 +0800 Subject: [PATCH 041/148] fix: text --- src/page/App/components/InspectPanel/label.tsx | 9 ++------- .../PanelSetters/ColorPickerSetter/style.ts | 13 ------------- .../components/ColorPicker/ColorPickerOperation.tsx | 7 ++----- .../components/ColorPicker/styles.tsx | 12 ++++++++++++ .../tests/{color-picker.e2e.tsx => .keep} | 0 src/widgetLibrary/TextWidget/text.tsx | 4 ++++ 6 files changed, 20 insertions(+), 25 deletions(-) rename src/page/App/components/WidgetPickerEditor/components/ColorPicker/tests/{color-picker.e2e.tsx => .keep} (100%) diff --git a/src/page/App/components/InspectPanel/label.tsx b/src/page/App/components/InspectPanel/label.tsx index 0892fe7042..bbffc2ee89 100644 --- a/src/page/App/components/InspectPanel/label.tsx +++ b/src/page/App/components/InspectPanel/label.tsx @@ -10,16 +10,11 @@ export const PanelLabel: FC = (props) => { return ( - } + content={} trigger="hover" position="left" maxWidth="240px" + colorScheme="white" disabled={!labelDesc} > {labelName} diff --git a/src/page/App/components/PanelSetters/ColorPickerSetter/style.ts b/src/page/App/components/PanelSetters/ColorPickerSetter/style.ts index 06efbd56e1..9594d406ba 100644 --- a/src/page/App/components/PanelSetters/ColorPickerSetter/style.ts +++ b/src/page/App/components/PanelSetters/ColorPickerSetter/style.ts @@ -1,20 +1,7 @@ import { css } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" export function applyColorSetterStyle(isSingleRow: boolean = false) { return css` width: ${isSingleRow ? "100%" : "154px"}; ` } - -export const titleStyle = css` - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; - font-size: 12px; - font-weight: 500; -` - -export const closeIconStyle = css` - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; - font-size: 14px; - cursor: pointer; -` diff --git a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/ColorPickerOperation.tsx b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/ColorPickerOperation.tsx index f45688a877..d9083a5f6b 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/ColorPickerOperation.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/ColorPickerOperation.tsx @@ -14,6 +14,8 @@ import { swatchContainerCss, swatchWrapperStyle, titleCss, + closeIconStyle, + titleStyle, } from "./styles" import Alpha from "@uiw/react-color-alpha" import Hue from "@uiw/react-color-hue" @@ -23,10 +25,6 @@ import { ColorPickerOperationProps } from "./interface" import { CloseIcon } from "@illa-design/icon" import { FC, useCallback } from "react" import { useTranslation } from "react-i18next" -import { - closeIconStyle, - titleStyle, -} from "@/page/App/components/PanelSetters/ColorPickerSetter/style" const HueBar = (props: PointerProps) => (
    @@ -86,7 +84,6 @@ const ColorPickerOperation: FC = ( ...newColor, a: color.a, } - console.log("newColors", newColors) props.handleColorPick && props.handleColorPick(newColors) }} /> diff --git a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx index 864748a8be..95947b1162 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx @@ -194,3 +194,15 @@ export const swatchWrapperStyle = css` width: 100%; padding: 8px 12px; ` + +export const titleStyle = css` + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; + font-size: 12px; + font-weight: 500; +` + +export const closeIconStyle = css` + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; + font-size: 14px; + cursor: pointer; +` diff --git a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/tests/color-picker.e2e.tsx b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/tests/.keep similarity index 100% rename from src/page/App/components/WidgetPickerEditor/components/ColorPicker/tests/color-picker.e2e.tsx rename to src/page/App/components/WidgetPickerEditor/components/ColorPicker/tests/.keep diff --git a/src/widgetLibrary/TextWidget/text.tsx b/src/widgetLibrary/TextWidget/text.tsx index 32f6a1d48a..0d53474e8b 100644 --- a/src/widgetLibrary/TextWidget/text.tsx +++ b/src/widgetLibrary/TextWidget/text.tsx @@ -37,6 +37,10 @@ export const Text: FC = (props) => { backgroundColor ?? "transparent", )}, ${alignCss} `} + options={{ + simplifiedAutoLink: true, + openLinksInNewWindow: true, + }} markdown={value ?? ""} extensions={[transLink]} /> From 9a57a0b395af6b3aa014808ebd6fbb6bb454726c Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 22 Jul 2022 19:00:21 +0800 Subject: [PATCH 042/148] feat: update design --- illa-design | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/illa-design b/illa-design index 625b91c1a6..94734d1921 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit 625b91c1a6e07ae0cf3991cc601119938405aaae +Subproject commit 94734d1921fbd51d81395ae6ac364783fe24debd From a810aae70bda37abd0ebbba66becff3dfcac8c35 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 22 Jul 2022 19:04:13 +0800 Subject: [PATCH 043/148] fix: button bugs --- illa-design | 2 +- .../components/ColorPicker/styles.tsx | 1 - src/widgetLibrary/ButtonWidget/button.tsx | 2 +- .../CheckboxGroupWidget/panelConfig.tsx | 28 ------------------- .../RadioButtonWidget/panelConfig.tsx | 28 ------------------- .../RadioGroupWidget/panelConfig.tsx | 28 ------------------- .../SelectWidget/panelConfig.tsx | 28 ------------------- 7 files changed, 2 insertions(+), 115 deletions(-) diff --git a/illa-design b/illa-design index 625b91c1a6..94734d1921 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit 625b91c1a6e07ae0cf3991cc601119938405aaae +Subproject commit 94734d1921fbd51d81395ae6ac364783fe24debd diff --git a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx index 95947b1162..21d70a46d2 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx @@ -86,7 +86,6 @@ export function applyAlphaPointCss(percent?: string) { } export function applyColorLumpRadioStyle(colorStr: RgbaColor) { - console.log("colorStr", colorStr) return css` ${applyColorLumpCss(colorStr)}; border-radius: 50%; diff --git a/src/widgetLibrary/ButtonWidget/button.tsx b/src/widgetLibrary/ButtonWidget/button.tsx index 2b8e5ed8d1..3b99b575f0 100644 --- a/src/widgetLibrary/ButtonWidget/button.tsx +++ b/src/widgetLibrary/ButtonWidget/button.tsx @@ -21,12 +21,12 @@ export const WrappedButton: FC = (props) => { -
    - {resourcesList?.length ? ( -
    - ) : null} - {!resourcesList?.length ? : null} +
    +
    + {t("resources")} +
    - + {resourcesList?.length ? ( +
    + ) : null} + {!resourcesList?.length ? : null} + ) } diff --git a/src/page/User/Login/index.tsx b/src/page/User/Login/index.tsx index 420c4952f8..03989d9de2 100644 --- a/src/page/User/Login/index.tsx +++ b/src/page/User/Login/index.tsx @@ -54,7 +54,6 @@ export const Login: FC = () => { userId: res.data.userId, nickname: res.data.nickname, language: res.data.language || "en-US", - userAvatar: "", email: res.data.email, }), ) diff --git a/src/page/User/Register/index.tsx b/src/page/User/Register/index.tsx index d1a43e3821..9f693acd47 100644 --- a/src/page/User/Register/index.tsx +++ b/src/page/User/Register/index.tsx @@ -71,7 +71,6 @@ export const Register: FC = () => { userId: res.data.userId, nickname: res.data.nickname, language: "English", - userAvatar: "", email: res.data.email, }), ) diff --git a/src/redux/currentUser/currentUserState.ts b/src/redux/currentUser/currentUserState.ts index a9b8cc9a04..7dddb7f8ce 100644 --- a/src/redux/currentUser/currentUserState.ts +++ b/src/redux/currentUser/currentUserState.ts @@ -1,7 +1,6 @@ export interface CurrentUser { userId: number nickname: string - userAvatar: string language: string email: string } @@ -9,7 +8,6 @@ export interface CurrentUser { export const CurrentUserInitialState: CurrentUser = { userId: 0, nickname: "", - userAvatar: "", language: "", email: "", } From 3684d983aae793c223a29cd1c81eedfa5abe5a4b Mon Sep 17 00:00:00 2001 From: smallSohoSolo Date: Mon, 25 Jul 2022 15:08:06 +0800 Subject: [PATCH 048/148] fix: english wording --- src/i18n/locale/zh-CN.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index 3e88d33d67..669b9a1e7e 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -177,7 +177,7 @@ }, "tips": { "not_found": "抱歉，没有搜索结果", - "empty": "添加 action 以开始处理连接资源中的数据" + "empty": "添加 Action 以开始处理连接资源中的数据" }, "message": { "confirm_switch": "您没有保存查询。确定要放弃更改吗？", From 5b58f4661c31f12d72b3f00cf381d5f4791a0404 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 25 Jul 2022 16:33:37 +0800 Subject: [PATCH 049/148] fix: config fix --- .../BarProgressWidget/panelConfig.tsx | 16 ++++++++-- .../ButtonWidget/panelConfig.tsx | 8 ++--- .../CheckboxGroupWidget/panelConfig.tsx | 2 +- .../CircleProgressWidget/panelConfig.tsx | 16 ++++++++-- .../DateRangeWidget/panelConfig.tsx | 2 +- .../DateTimeWidget/panelConfig.tsx | 2 +- src/widgetLibrary/DateWidget/panelConfig.tsx | 2 +- .../DividerWidget/panelConfig.tsx | 2 +- .../EditableWidget/panelConfig.tsx | 2 +- src/widgetLibrary/ImageWidget/panelConfig.tsx | 17 ++--------- src/widgetLibrary/InputWidget/panelConfig.tsx | 2 +- .../NumberInputWidget/panelConfig.tsx | 2 +- .../RadioButtonWidget/panelConfig.tsx | 2 +- .../RadioGroupWidget/panelConfig.tsx | 2 +- .../SelectWidget/panelConfig.tsx | 2 +- .../SwitchWidget/panelConfig.tsx | 30 +------------------ src/widgetLibrary/TextWidget/panelConfig.tsx | 2 +- 17 files changed, 43 insertions(+), 68 deletions(-) diff --git a/src/widgetLibrary/BarProgressWidget/panelConfig.tsx b/src/widgetLibrary/BarProgressWidget/panelConfig.tsx index 4b32132cda..499ddde019 100644 --- a/src/widgetLibrary/BarProgressWidget/panelConfig.tsx +++ b/src/widgetLibrary/BarProgressWidget/panelConfig.tsx @@ -112,9 +112,9 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { - id: "bar-progress-style-list", + id: "bar-progress-color-list", setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ @@ -134,10 +134,20 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ defaultValue: "gray", options: colorSchemeOptions, }, + ], + }, + { + id: "bar-progress-style-list", + setterType: "LIST_SETTER", + labelName: i18n.t("editor.inspect.setter_label.styles"), + attrName: "styles", + useCustomLayout: true, + childrenSetter: [ { id: "bar-progress-strokeWidth", labelName: i18n.t("editor.inspect.setter_label.stroke_width"), - setterType: "INPUT_SETTER", + setterType: "EDITABLE_INPUT_SETTER", + iconName: "strokeWidth", attrName: "strokeWidth", defaultValue: "4px", expectedType: VALIDATION_TYPES.STRING, diff --git a/src/widgetLibrary/ButtonWidget/panelConfig.tsx b/src/widgetLibrary/ButtonWidget/panelConfig.tsx index 6344a17ba7..a477855dcf 100644 --- a/src/widgetLibrary/ButtonWidget/panelConfig.tsx +++ b/src/widgetLibrary/ButtonWidget/panelConfig.tsx @@ -1,10 +1,4 @@ import { PanelConfig } from "@/page/App/components/InspectPanel/interface" -import { - HorizontalCenterIcon, - HorizontalEndIcon, - HorizontalFullIcon, - HorizontalStartIcon, -} from "@illa-design/react" import { colorSchemeOptions } from "@/widgetLibrary/PublicSector/colorSchemeOptions" import { VALIDATION_TYPES } from "@/utils/validationFactory" import i18n from "@/i18n/config" @@ -249,6 +243,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ labelName: i18n.t("editor.inspect.setter_label.loading"), labelDesc: i18n.t("editor.inspect.setter_tooltip.loading"), attrName: "loading", + placeholder: "{{false}}", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, bindAttrName: "submit", @@ -260,6 +255,7 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ id: "button-interaction-disabled", labelName: i18n.t("editor.inspect.setter_label.disabled"), labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), + placeholder: "{{false}}", attrName: "disabled", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, diff --git a/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx b/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx index 7542cd2cbc..fc7e608435 100644 --- a/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx +++ b/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx @@ -233,7 +233,7 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-style`, setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ diff --git a/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx b/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx index 0ac128afb6..5923d2519a 100644 --- a/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx +++ b/src/widgetLibrary/CircleProgressWidget/panelConfig.tsx @@ -83,9 +83,9 @@ export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ groupName: i18n.t("editor.inspect.setter_group.style"), children: [ { - id: "circle-progress-style-list", + id: "circle-progress-color-list", setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ @@ -105,10 +105,20 @@ export const CIRCLE_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ defaultValue: "gray", options: colorSchemeOptions, }, + ], + }, + { + id: "circle-progress-style-list", + setterType: "LIST_SETTER", + labelName: i18n.t("editor.inspect.setter_label.styles"), + attrName: "styles", + useCustomLayout: true, + childrenSetter: [ { id: "circle-progress-strokeWidth", labelName: i18n.t("editor.inspect.setter_label.stroke_width"), - setterType: "INPUT_SETTER", + setterType: "EDITABLE_INPUT_SETTER", + iconName: "strokeWidth", attrName: "strokeWidth", defaultValue: "4px", expectedType: VALIDATION_TYPES.STRING, diff --git a/src/widgetLibrary/DateRangeWidget/panelConfig.tsx b/src/widgetLibrary/DateRangeWidget/panelConfig.tsx index 64788c1154..8708a4a380 100644 --- a/src/widgetLibrary/DateRangeWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateRangeWidget/panelConfig.tsx @@ -216,7 +216,7 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ id: "date-range-style-list", setterType: "LIST_SETTER", isSetterSingleRow: true, - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ diff --git a/src/widgetLibrary/DateTimeWidget/panelConfig.tsx b/src/widgetLibrary/DateTimeWidget/panelConfig.tsx index 00ecd2fba0..25c63393d0 100644 --- a/src/widgetLibrary/DateTimeWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateTimeWidget/panelConfig.tsx @@ -228,7 +228,7 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ id: "date_time-style-list", setterType: "LIST_SETTER", isSetterSingleRow: true, - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ diff --git a/src/widgetLibrary/DateWidget/panelConfig.tsx b/src/widgetLibrary/DateWidget/panelConfig.tsx index 6a3659fecb..10b122a302 100644 --- a/src/widgetLibrary/DateWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateWidget/panelConfig.tsx @@ -208,7 +208,7 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ id: "date-style-list", setterType: "LIST_SETTER", isSetterSingleRow: true, - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ diff --git a/src/widgetLibrary/DividerWidget/panelConfig.tsx b/src/widgetLibrary/DividerWidget/panelConfig.tsx index 1221357ac5..760cedc7cf 100644 --- a/src/widgetLibrary/DividerWidget/panelConfig.tsx +++ b/src/widgetLibrary/DividerWidget/panelConfig.tsx @@ -64,7 +64,7 @@ export const DIVIDER_PANEL_CONFIG: PanelConfig[] = [ id: "divider-style-list", setterType: "LIST_SETTER", attrName: "styles", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), useCustomLayout: true, childrenSetter: [ { diff --git a/src/widgetLibrary/EditableWidget/panelConfig.tsx b/src/widgetLibrary/EditableWidget/panelConfig.tsx index 55e8f8de8c..1dd93ca768 100644 --- a/src/widgetLibrary/EditableWidget/panelConfig.tsx +++ b/src/widgetLibrary/EditableWidget/panelConfig.tsx @@ -237,7 +237,7 @@ export const EDITABLE_TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "editable-text-style", setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ diff --git a/src/widgetLibrary/ImageWidget/panelConfig.tsx b/src/widgetLibrary/ImageWidget/panelConfig.tsx index c6edf8e3a1..8d631a9a55 100644 --- a/src/widgetLibrary/ImageWidget/panelConfig.tsx +++ b/src/widgetLibrary/ImageWidget/panelConfig.tsx @@ -56,20 +56,6 @@ export const IMAGE_PANEL_CONFIG: PanelConfig[] = [ id: "image-layout", groupName: i18n.t("editor.inspect.setter_group.layout"), children: [ - { - id: "image-layout-height", - labelName: i18n.t("editor.inspect.setter_label.img_height"), - attrName: "height", - expectedType: VALIDATION_TYPES.STRING, - setterType: "INPUT_SETTER", - }, - { - id: "image-layout-width", - labelName: i18n.t("editor.inspect.setter_label.img_width"), - attrName: "width", - expectedType: VALIDATION_TYPES.STRING, - setterType: "INPUT_SETTER", - }, { id: "image-layout-hidden", labelName: i18n.t("editor.inspect.setter_label.hidden"), @@ -96,8 +82,9 @@ export const IMAGE_PANEL_CONFIG: PanelConfig[] = [ { id: "image-style-radius", labelName: i18n.t("editor.inspect.setter_label.radius"), - setterType: "INPUT_SETTER", + setterType: "EDITABLE_INPUT_SETTER", attrName: "radius", + iconName: "radius", defaultValue: "0px", expectedType: VALIDATION_TYPES.STRING, }, diff --git a/src/widgetLibrary/InputWidget/panelConfig.tsx b/src/widgetLibrary/InputWidget/panelConfig.tsx index 31cf618481..9b8cb1cc93 100644 --- a/src/widgetLibrary/InputWidget/panelConfig.tsx +++ b/src/widgetLibrary/InputWidget/panelConfig.tsx @@ -237,7 +237,7 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: "input-style", setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ diff --git a/src/widgetLibrary/NumberInputWidget/panelConfig.tsx b/src/widgetLibrary/NumberInputWidget/panelConfig.tsx index 29cff79733..a4a2378ec4 100644 --- a/src/widgetLibrary/NumberInputWidget/panelConfig.tsx +++ b/src/widgetLibrary/NumberInputWidget/panelConfig.tsx @@ -230,7 +230,7 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ { id: `${widgetBaseName}-styles-styles`, setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ diff --git a/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx b/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx index 75d5873da6..d5df2e0033 100644 --- a/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx +++ b/src/widgetLibrary/RadioButtonWidget/panelConfig.tsx @@ -216,7 +216,7 @@ export const RADIO_BUTTON_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-style-styles`, setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ diff --git a/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx b/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx index 8b9ee9c6c8..da15cd0f69 100644 --- a/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx +++ b/src/widgetLibrary/RadioGroupWidget/panelConfig.tsx @@ -231,7 +231,7 @@ export const RADIO_GROUP_PANEL_CONFIG: PanelConfig[] = [ { id: "radioGroup-style", setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ diff --git a/src/widgetLibrary/SelectWidget/panelConfig.tsx b/src/widgetLibrary/SelectWidget/panelConfig.tsx index 1b92438acf..2cec72a113 100644 --- a/src/widgetLibrary/SelectWidget/panelConfig.tsx +++ b/src/widgetLibrary/SelectWidget/panelConfig.tsx @@ -255,7 +255,7 @@ export const SELECT_PANEL_CONFIG: PanelConfig[] = [ { id: `select-style-styles`, setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ diff --git a/src/widgetLibrary/SwitchWidget/panelConfig.tsx b/src/widgetLibrary/SwitchWidget/panelConfig.tsx index 40adb5ac3f..b4899a41d1 100644 --- a/src/widgetLibrary/SwitchWidget/panelConfig.tsx +++ b/src/widgetLibrary/SwitchWidget/panelConfig.tsx @@ -267,34 +267,6 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ }, ], }, - { - id: "switch-validation", - groupName: i18n.t("editor.inspect.setter_group.validation"), - children: [ - { - id: "switch-validation-required", - labelName: i18n.t("editor.inspect.setter_label.required_field"), - labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"), - setterType: "DYNAMIC_SWITCH_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - useCustomLayout: true, - attrName: "required", - }, - { - id: "switch-validation-hide-message", - labelName: i18n.t( - "editor.inspect.setter_label.hide_validation_message", - ), - labelDesc: i18n.t( - "editor.inspect.setter_tooltip.hide_validation_message", - ), - setterType: "DYNAMIC_SWITCH_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - useCustomLayout: true, - attrName: "hideValidationMessage", - }, - ], - }, { id: "switch-layout", groupName: i18n.t("editor.inspect.setter_group.layout"), @@ -318,7 +290,7 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ { id: "switch-style", setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ diff --git a/src/widgetLibrary/TextWidget/panelConfig.tsx b/src/widgetLibrary/TextWidget/panelConfig.tsx index 449eb6903f..259540623d 100644 --- a/src/widgetLibrary/TextWidget/panelConfig.tsx +++ b/src/widgetLibrary/TextWidget/panelConfig.tsx @@ -114,7 +114,7 @@ export const TEXT_PANEL_CONFIG: PanelConfig[] = [ { id: "text-style-list", setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.styles"), + labelName: i18n.t("editor.inspect.setter_label.colors"), attrName: "styles", useCustomLayout: true, childrenSetter: [ From ea19137a32358eb4c20378b4a8864e984d4371d2 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 25 Jul 2022 16:34:39 +0800 Subject: [PATCH 050/148] feat: new setter --- .../App/components/InspectPanel/interface.ts | 1 + .../InputSetter/editableInputSetter.tsx | 30 +++++++++++++++++++ .../PanelSetters/InputSetter/interface.ts | 4 +++ .../PanelSetters/InputSetter/style.ts | 11 +++++-- .../App/components/PanelSetters/index.tsx | 2 ++ .../components/ColorPicker/index.tsx | 5 ---- .../components/ColorPicker/styles.tsx | 2 +- 7 files changed, 47 insertions(+), 8 deletions(-) create mode 100644 src/page/App/components/PanelSetters/InputSetter/editableInputSetter.tsx diff --git a/src/page/App/components/InspectPanel/interface.ts b/src/page/App/components/InspectPanel/interface.ts index 602b800562..25a4a723ce 100644 --- a/src/page/App/components/InspectPanel/interface.ts +++ b/src/page/App/components/InspectPanel/interface.ts @@ -23,6 +23,7 @@ export interface PanelFieldConfig extends PanelLabelProps { isSetterSingleRow?: boolean defaultValue?: any placeholder?: string + iconName?: string shown?: (value: any | { [attrName: string]: any }) => boolean bindAttrName?: string | string[] } diff --git a/src/page/App/components/PanelSetters/InputSetter/editableInputSetter.tsx b/src/page/App/components/PanelSetters/InputSetter/editableInputSetter.tsx new file mode 100644 index 0000000000..ec87a06a3f --- /dev/null +++ b/src/page/App/components/PanelSetters/InputSetter/editableInputSetter.tsx @@ -0,0 +1,30 @@ +import { FC } from "react" +import { Input } from "@illa-design/input" +import { editableInputSetterStyle } from "@/page/App/components/PanelSetters/InputSetter/style" +import { ReactComponent as RadioIcon } from "@/assets/radius-icon.svg" +import { ReactComponent as StrokeWidthIcon } from "@/assets/stroke-width-icon.svg" +import { ReactComponent as TextSizeIcon } from "@/assets/text-size-icon.svg" +import { EditableInputSetterProps } from "@/page/App/components/PanelSetters/InputSetter/interface" + +const iconNameMapComp = { + radius: , + strokeWidth: , + textSize: , +} + +export const EditableInputSetter: FC = (props) => { + const { value, handleUpdateDsl, attrName, iconName } = props + return ( +
    + { + handleUpdateDsl(attrName, value) + }} + /> +
    + ) +} diff --git a/src/page/App/components/PanelSetters/InputSetter/interface.ts b/src/page/App/components/PanelSetters/InputSetter/interface.ts index c4269105ec..1eee37224e 100644 --- a/src/page/App/components/PanelSetters/InputSetter/interface.ts +++ b/src/page/App/components/PanelSetters/InputSetter/interface.ts @@ -3,3 +3,7 @@ import { BaseSetter } from "@/page/App/components/PanelSetters/interface" export interface BaseInputSetterProps extends BaseSetter { placeholder?: string } + +export interface EditableInputSetterProps extends BaseInputSetterProps { + iconName?: "radius" | "strokeWidth" | "textSize" +} diff --git a/src/page/App/components/PanelSetters/InputSetter/style.ts b/src/page/App/components/PanelSetters/InputSetter/style.ts index cf93e0428a..7e3d337dce 100644 --- a/src/page/App/components/PanelSetters/InputSetter/style.ts +++ b/src/page/App/components/PanelSetters/InputSetter/style.ts @@ -3,6 +3,7 @@ import { fixedWidthStyle, listSetterWidthStyle, } from "@/page/App/components/PanelSetters/style" +import { globalColor, illaPrefix } from "@illa-design/theme" export const applyInputSetterWrapperStyle = ( isSetterSingleRow: boolean = false, @@ -17,6 +18,12 @@ export const applyInputSetterWrapperStyle = ( : fixedWidthStyle } -export const applyInputSetterStyle = css` - width: 100%; +export const editableInputSetterStyle = css` + max-width: 104px; + display: flex; + align-items: center; + border-radius: 8px; + :hover { + background-color: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; + } ` diff --git a/src/page/App/components/PanelSetters/index.tsx b/src/page/App/components/PanelSetters/index.tsx index 09e7700819..45dc7e0007 100644 --- a/src/page/App/components/PanelSetters/index.tsx +++ b/src/page/App/components/PanelSetters/index.tsx @@ -21,6 +21,7 @@ import { ChartDataSetter } from "@/page/App/components/PanelSetters/ChartSetter/ import { RemoveDatasetButton } from "@/page/App/components/PanelSetters/ChartSetter/DatasetsSetter/removeDatasetButton" import { DataSetColorListSetter } from "@/page/App/components/PanelSetters/ChartSetter/DatasetsSetter/colorSetter" import { AllowClearSelectSetter } from "@/page/App/components/PanelSetters/SelectSetter/AllowClearSelectSetter" +import { EditableInputSetter } from "@/page/App/components/PanelSetters/InputSetter/editableInputSetter" const SetterTypeMapSetter = { INPUT_SETTER: BaseInput, @@ -46,6 +47,7 @@ const SetterTypeMapSetter = { CHART_LINE_COLOR_LIST_SETTER: DataSetColorListSetter, CHART_REMOVE_BUTTON: RemoveDatasetButton, ALLOW_CLEAR_SELECT_SETTER: AllowClearSelectSetter, + EDITABLE_INPUT_SETTER: EditableInputSetter, } export type SetterType = keyof typeof SetterTypeMapSetter diff --git a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/index.tsx b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/index.tsx index 2ec27113f5..821d49ebe1 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/index.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/index.tsx @@ -117,11 +117,6 @@ function ColorPicker(props: ColorPickerProps) { custom: true, }} requirePadding={false} - style={{ - width: "100%", - height: 40, - fontSize: 12, - }} borderColor="purple" value={inputValue} onChange={(value) => { diff --git a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx index 21d70a46d2..d958beacba 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx @@ -149,7 +149,7 @@ export const colorInputCss = css` export const triggerCss = css` width: fit-content; - margin-right: 4px; + margin-right: 8px; ` export const percentInputCss = css` From 685541485cb49fa5de05f3f663aac9f0c1b97794 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 25 Jul 2022 16:35:09 +0800 Subject: [PATCH 051/148] feat: i18n and assets --- src/assets/radius-icon.svg | 3 +++ src/assets/stroke-width-icon.svg | 3 +++ src/assets/text-size-icon.svg | 4 ++++ src/i18n/locale/en-US.json | 1 + src/i18n/locale/zh-CN.json | 1 + 5 files changed, 12 insertions(+) create mode 100644 src/assets/radius-icon.svg create mode 100644 src/assets/stroke-width-icon.svg create mode 100644 src/assets/text-size-icon.svg diff --git a/src/assets/radius-icon.svg b/src/assets/radius-icon.svg new file mode 100644 index 0000000000..702b15b201 --- /dev/null +++ b/src/assets/radius-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/stroke-width-icon.svg b/src/assets/stroke-width-icon.svg new file mode 100644 index 0000000000..d42142273b --- /dev/null +++ b/src/assets/stroke-width-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/text-size-icon.svg b/src/assets/text-size-icon.svg new file mode 100644 index 0000000000..39dfd564a0 --- /dev/null +++ b/src/assets/text-size-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/i18n/locale/en-US.json b/src/i18n/locale/en-US.json index 3f95c0721f..05b8086796 100644 --- a/src/i18n/locale/en-US.json +++ b/src/i18n/locale/en-US.json @@ -503,6 +503,7 @@ "time_format": "Time format", "step_size": "Step size", "hide_value_label": "Hide value label", + "colors": "Colors", "styles": "Styles", "trail_color": "Trail color", "stroke_width": "Stroke width", diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index 00b98b47ef..c79316ef7a 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -503,6 +503,7 @@ "time_format": "时间格式化", "step_size": "步长", "hide_value_label": "隐藏值标签", + "colors": "颜色", "styles": "样式", "trail_color": "描边颜色", "stroke_width": "描边宽度", From 00692fe016c88d643135d37c1a5fdba85034b9d4 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 25 Jul 2022 16:41:05 +0800 Subject: [PATCH 052/148] fix: rename index error --- .../ActionEditor/Resource/style.tsx | 1 - src/page/Dashboard/DashboardApps/index.tsx | 38 ++++++++++--------- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src/page/App/components/ActionEditor/Resource/style.tsx b/src/page/App/components/ActionEditor/Resource/style.tsx index c15cead6b3..a69acd1c9e 100644 --- a/src/page/App/components/ActionEditor/Resource/style.tsx +++ b/src/page/App/components/ActionEditor/Resource/style.tsx @@ -6,7 +6,6 @@ import { LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH } from "@/style" export const formStyle = css` overflow: auto; - padding: 0 24px; max-height: 716px; ` diff --git a/src/page/Dashboard/DashboardApps/index.tsx b/src/page/Dashboard/DashboardApps/index.tsx index 7bed18b398..8067dbac86 100644 --- a/src/page/Dashboard/DashboardApps/index.tsx +++ b/src/page/Dashboard/DashboardApps/index.tsx @@ -61,6 +61,16 @@ export const DashboardApps: FC = () => { const [duplicateModalLoading, setDuplicateModalLoading] = useState(false) + const sortedAppsList = useMemo(() => { + if (Array.isArray(appsList) && appsList.length > 0) { + const tmpAppList = cloneDeep(appsList) + return tmpAppList.sort((a, b) => { + return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime() + }) + } + return [] + }, [appsList]) + useEffect(() => { return () => { setCreateNewLoading(false) @@ -76,7 +86,7 @@ export const DashboardApps: FC = () => { const renameRequest = () => { Api.request( { - url: `/apps/${appsList[currentAppIdx].appId}`, + url: `/apps/${sortedAppsList[currentAppIdx].appId}`, method: "PUT", data: { appName: renameValue, @@ -85,7 +95,7 @@ export const DashboardApps: FC = () => { (response) => { dispatch( dashboardAppActions.renameDashboardAppReducer({ - appId: appsList[currentAppIdx].appId, + appId: sortedAppsList[currentAppIdx].appId, newName: renameValue, }), ) @@ -112,7 +122,7 @@ export const DashboardApps: FC = () => { const duplicateRequest = () => { Api.request( { - url: `/apps/${appsList[currentAppIdx].appId}/duplication`, + url: `/apps/${sortedAppsList[currentAppIdx].appId}/duplication`, method: "POST", data: { appName: duplicateValue, @@ -171,16 +181,6 @@ export const DashboardApps: FC = () => { ) } - const sortedAppsList = useMemo(() => { - if (Array.isArray(appsList) && appsList.length > 0) { - const tmpAppList = cloneDeep(appsList) - return tmpAppList.sort((a, b) => { - return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime() - }) - } - return [] - }, [appsList]) - return ( <>
    @@ -270,7 +270,7 @@ export const DashboardApps: FC = () => { }} /> )} - {appsList.length == 0 && } + {sortedAppsList.length == 0 && }
    { }} /> - {appsList.length !== 0 && ( + {sortedAppsList.length !== 0 && ( { )} {/* Duplicate Modal */} - {appsList.length !== 0 && ( + {sortedAppsList.length !== 0 && ( { Message.error(t("dashboard.app.name_empty")) return } - if (appsList.some((item) => item.appName === duplicateValue)) { + if ( + sortedAppsList.some((item) => item.appName === duplicateValue) + ) { Message.error(t("dashboard.app.name_existed")) return } duplicateRequest() }} - title={`${t("duplicate")} "${appsList[currentAppIdx].appName}"`} + title={`${t("duplicate")} "${sortedAppsList[currentAppIdx].appName}"`} okText={t("save")} > Date: Mon, 25 Jul 2022 16:43:42 +0800 Subject: [PATCH 053/148] fix: remove eventHandler --- src/widgetLibrary/ButtonWidget/panelConfig.tsx | 4 ---- src/widgetLibrary/SwitchWidget/panelConfig.tsx | 4 ---- 2 files changed, 8 deletions(-) diff --git a/src/widgetLibrary/ButtonWidget/panelConfig.tsx b/src/widgetLibrary/ButtonWidget/panelConfig.tsx index a477855dcf..193b9508c4 100644 --- a/src/widgetLibrary/ButtonWidget/panelConfig.tsx +++ b/src/widgetLibrary/ButtonWidget/panelConfig.tsx @@ -50,10 +50,6 @@ export const BUTTON_PANEL_CONFIG: PanelConfig[] = [ label: i18n.t("editor.inspect.setter_label.control_component"), value: "widget", }, - { - label: i18n.t("editor.inspect.setter_label.run_script"), - value: "script", - }, { label: i18n.t("editor.inspect.setter_label.go_to_url"), value: "openUrl", diff --git a/src/widgetLibrary/SwitchWidget/panelConfig.tsx b/src/widgetLibrary/SwitchWidget/panelConfig.tsx index b4899a41d1..a540188d07 100644 --- a/src/widgetLibrary/SwitchWidget/panelConfig.tsx +++ b/src/widgetLibrary/SwitchWidget/panelConfig.tsx @@ -99,10 +99,6 @@ export const SWITCH_PANEL_CONFIG: PanelConfig[] = [ label: i18n.t("editor.inspect.setter_label.control_component"), value: "widget", }, - { - label: i18n.t("editor.inspect.setter_label.run_script"), - value: "script", - }, { label: i18n.t("editor.inspect.setter_label.go_to_url"), value: "openUrl", From ee420e4c6131b98f2eddd096b4a5802392f8c5ef Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Mon, 25 Jul 2022 17:30:12 +0800 Subject: [PATCH 054/148] feat: add ActionGenerator --- .../ActionEditor/ActionGenerator/index.tsx | 27 +++++++++++++++++++ .../ActionEditor/ActionGenerator/interface.ts | 9 +++++++ 2 files changed, 36 insertions(+) create mode 100644 src/page/App/components/ActionEditor/ActionGenerator/index.tsx create mode 100644 src/page/App/components/ActionEditor/ActionGenerator/interface.ts diff --git a/src/page/App/components/ActionEditor/ActionGenerator/index.tsx b/src/page/App/components/ActionEditor/ActionGenerator/index.tsx new file mode 100644 index 0000000000..f89a178b62 --- /dev/null +++ b/src/page/App/components/ActionEditor/ActionGenerator/index.tsx @@ -0,0 +1,27 @@ +import { FC, useEffect, useState } from "react" +import { Modal } from "@illa-design/modal" +import { ActionGeneratorProps } from "./interface" + +export const ActionGenerator: FC = function (props) { + const { visible, onClose } = props + const [step, setStep] = useState<0 | 1 | 2>(0) + + useEffect(() => { + setStep(0) + console.log({visible}) + }, [visible]) + + return ( + + resource + + ) +} + +ActionGenerator.displayName = "ActionGenerator" diff --git a/src/page/App/components/ActionEditor/ActionGenerator/interface.ts b/src/page/App/components/ActionEditor/ActionGenerator/interface.ts new file mode 100644 index 0000000000..7d2e3a6a6d --- /dev/null +++ b/src/page/App/components/ActionEditor/ActionGenerator/interface.ts @@ -0,0 +1,9 @@ +export interface ActionInfo { + resourceId?: string +} + +export interface ActionGeneratorProps { + visible: boolean + onClose: () => void + onAddAction?: (info: ActionInfo) => void +} From bf62a05cbd74f394c0037dd3ed30e8c732ad33b4 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 25 Jul 2022 17:59:41 +0800 Subject: [PATCH 055/148] fix: tooltip style --- src/widgetLibrary/PublicSector/TooltipWrapper/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/widgetLibrary/PublicSector/TooltipWrapper/index.tsx b/src/widgetLibrary/PublicSector/TooltipWrapper/index.tsx index 50fee122a8..96dfa5e928 100644 --- a/src/widgetLibrary/PublicSector/TooltipWrapper/index.tsx +++ b/src/widgetLibrary/PublicSector/TooltipWrapper/index.tsx @@ -13,6 +13,7 @@ export const TooltipWrapper: FC = (props) => { value={tooltipText} disableMarkdown textColor={globalColor(`--${illaPrefix}-white-01`)} + linkColor="#8ab4f8" /> } disabled={disabled} From b543b0c190b07e0beee02da09e7292741c6da489 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Mon, 25 Jul 2022 18:20:56 +0800 Subject: [PATCH 056/148] fix: widget config --- src/i18n/locale/en-US.json | 1 + src/i18n/locale/zh-CN.json | 1 + .../components/ColorPicker/styles.tsx | 2 +- src/widgetLibrary/BarProgressWidget/panelConfig.tsx | 12 ++++++++++++ .../CheckboxGroupWidget/panelConfig.tsx | 12 ++++++++++++ src/widgetLibrary/DateRangeWidget/panelConfig.tsx | 12 ++++++++++++ src/widgetLibrary/DateTimeWidget/panelConfig.tsx | 12 ++++++++++++ src/widgetLibrary/DateWidget/panelConfig.tsx | 12 ++++++++++++ src/widgetLibrary/DividerWidget/panelConfig.tsx | 5 +++-- src/widgetLibrary/InputWidget/panelConfig.tsx | 12 ++++++++++++ src/widgetLibrary/NumberInputWidget/panelConfig.tsx | 12 ++++++++++++ src/widgetLibrary/PublicSector/Label/index.tsx | 4 ++-- src/widgetLibrary/PublicSector/Label/interface.ts | 2 +- .../PublicSector/TransformWidgetWrapper/index.tsx | 2 ++ src/widgetLibrary/RadioButtonWidget/panelConfig.tsx | 12 ++++++++++++ src/widgetLibrary/RadioGroupWidget/panelConfig.tsx | 12 ++++++++++++ src/widgetLibrary/RateWidget/panelConfig.tsx | 12 ++++++++++++ src/widgetLibrary/SelectWidget/panelConfig.tsx | 12 ++++++++++++ src/widgetLibrary/SwitchWidget/panelConfig.tsx | 10 ++++++++++ 19 files changed, 153 insertions(+), 6 deletions(-) diff --git a/src/i18n/locale/en-US.json b/src/i18n/locale/en-US.json index 05b8086796..d0bbe555a9 100644 --- a/src/i18n/locale/en-US.json +++ b/src/i18n/locale/en-US.json @@ -466,6 +466,7 @@ "min_date": "Min date", "label": "Label", "caption": "Caption", + "hidden_label": "Hidden label", "label_position": "Position", "label_alignment": "Alignment", "label_width": "Width(%)", diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index c79316ef7a..2a88cc7a48 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -466,6 +466,7 @@ "min_date": "最小日期", "label": "标签", "caption": "纵标题", + "hidden_label": "隐藏标签", "label_position": "位置", "label_alignment": "对齐", "label_width": "宽度(%)", diff --git a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx index d958beacba..faff9d3a09 100644 --- a/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx +++ b/src/page/App/components/WidgetPickerEditor/components/ColorPicker/styles.tsx @@ -171,7 +171,7 @@ export function applyColorCheckedItemContainer(isChecked?: boolean) { border-radius: 4px; box-sizing: border-box; border: 1px solid - ${isChecked ? globalColor(`--${illaPrefix}-grayBlue-07`) : "transparent"}; + ${isChecked ? globalColor(`--${illaPrefix}-grayBlue-06`) : "transparent"}; ` } diff --git a/src/widgetLibrary/BarProgressWidget/panelConfig.tsx b/src/widgetLibrary/BarProgressWidget/panelConfig.tsx index 499ddde019..89da103420 100644 --- a/src/widgetLibrary/BarProgressWidget/panelConfig.tsx +++ b/src/widgetLibrary/BarProgressWidget/panelConfig.tsx @@ -37,11 +37,19 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, + { + id: "select-label-hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden_label"), + attrName: "labelHidden", + setterType: "SWITCH_SETTER", + }, { id: "bar-progress-label-position", labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: "Left", value: "left" }, { label: "Top", value: "top" }, @@ -52,6 +60,8 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: , @@ -69,6 +79,8 @@ export const BAR_PROGRESS_PANEL_CONFIG: PanelConfig[] = [ attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, + bindAttrName: "labelHidden", + shown: (value) => !value, }, ], }, diff --git a/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx b/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx index fc7e608435..525cc3f988 100644 --- a/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx +++ b/src/widgetLibrary/CheckboxGroupWidget/panelConfig.tsx @@ -130,11 +130,19 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, + { + id: "select-label-hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden_label"), + attrName: "labelHidden", + setterType: "SWITCH_SETTER", + }, { id: `${baseWidgetName}-label-position`, labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: "Left", value: "left" }, { label: "Top", value: "top" }, @@ -145,6 +153,8 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: , @@ -162,6 +172,8 @@ export const CHECKBOX_GROUP_PANEL_CONFIG: PanelConfig[] = [ attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, + bindAttrName: "labelHidden", + shown: (value) => !value, }, ], }, diff --git a/src/widgetLibrary/DateRangeWidget/panelConfig.tsx b/src/widgetLibrary/DateRangeWidget/panelConfig.tsx index 8708a4a380..0e6eeb6ef5 100644 --- a/src/widgetLibrary/DateRangeWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateRangeWidget/panelConfig.tsx @@ -78,11 +78,19 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, + { + id: "select-label-hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden_label"), + attrName: "labelHidden", + setterType: "SWITCH_SETTER", + }, { id: "date-range-label-position", labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: "Left", value: "left" }, { label: "Top", value: "top" }, @@ -93,6 +101,8 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: , @@ -110,6 +120,8 @@ export const DATE_RANGE_PANEL_CONFIG: PanelConfig[] = [ attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, + bindAttrName: "labelHidden", + shown: (value) => !value, }, ], }, diff --git a/src/widgetLibrary/DateTimeWidget/panelConfig.tsx b/src/widgetLibrary/DateTimeWidget/panelConfig.tsx index 25c63393d0..313c27864d 100644 --- a/src/widgetLibrary/DateTimeWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateTimeWidget/panelConfig.tsx @@ -81,11 +81,19 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, + { + id: "select-label-hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden_label"), + attrName: "labelHidden", + setterType: "SWITCH_SETTER", + }, { id: "date_time-label-position", labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: "Left", value: "left" }, { label: "Top", value: "top" }, @@ -96,6 +104,8 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: , @@ -113,6 +123,8 @@ export const DATE_TIME_PANEL_CONFIG: PanelConfig[] = [ attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, + bindAttrName: "labelHidden", + shown: (value) => !value, }, ], }, diff --git a/src/widgetLibrary/DateWidget/panelConfig.tsx b/src/widgetLibrary/DateWidget/panelConfig.tsx index 10b122a302..29f7ae9d19 100644 --- a/src/widgetLibrary/DateWidget/panelConfig.tsx +++ b/src/widgetLibrary/DateWidget/panelConfig.tsx @@ -69,11 +69,19 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, + { + id: "select-label-hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden_label"), + attrName: "labelHidden", + setterType: "SWITCH_SETTER", + }, { id: "date-label-position", labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: "Left", value: "left" }, { label: "Top", value: "top" }, @@ -84,6 +92,8 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: , @@ -101,6 +111,8 @@ export const DATE_PANEL_CONFIG: PanelConfig[] = [ attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, + bindAttrName: "labelHidden", + shown: (value) => !value, }, ], }, diff --git a/src/widgetLibrary/DividerWidget/panelConfig.tsx b/src/widgetLibrary/DividerWidget/panelConfig.tsx index 760cedc7cf..37c7d0eff9 100644 --- a/src/widgetLibrary/DividerWidget/panelConfig.tsx +++ b/src/widgetLibrary/DividerWidget/panelConfig.tsx @@ -64,14 +64,15 @@ export const DIVIDER_PANEL_CONFIG: PanelConfig[] = [ id: "divider-style-list", setterType: "LIST_SETTER", attrName: "styles", - labelName: i18n.t("editor.inspect.setter_label.colors"), + labelName: i18n.t("editor.inspect.setter_label.styles"), useCustomLayout: true, childrenSetter: [ { id: "divider-style-text-size", labelName: i18n.t("editor.inspect.setter_label.text_size"), - setterType: "INPUT_SETTER", + setterType: "EDITABLE_INPUT_SETTER", attrName: "textSize", + iconName: "textSize", defaultValue: "14px", expectedType: VALIDATION_TYPES.STRING, }, diff --git a/src/widgetLibrary/InputWidget/panelConfig.tsx b/src/widgetLibrary/InputWidget/panelConfig.tsx index 9b8cb1cc93..897fab4e96 100644 --- a/src/widgetLibrary/InputWidget/panelConfig.tsx +++ b/src/widgetLibrary/InputWidget/panelConfig.tsx @@ -45,11 +45,19 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ expectedType: VALIDATION_TYPES.STRING, setterType: "INPUT_SETTER", }, + { + id: "select-label-hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden_label"), + attrName: "labelHidden", + setterType: "SWITCH_SETTER", + }, { id: "input-label-position", labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: "Left", value: "left" }, { label: "Top", value: "top" }, @@ -60,6 +68,8 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: , @@ -77,6 +87,8 @@ export const INPUT_PANEL_CONFIG: PanelConfig[] = [ attrName: "labelWidth", expectedType: VALIDATION_TYPES.NUMBER, setterType: "INPUT_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, }, ], }, diff --git a/src/widgetLibrary/NumberInputWidget/panelConfig.tsx b/src/widgetLibrary/NumberInputWidget/panelConfig.tsx index a4a2378ec4..79f5fec6a8 100644 --- a/src/widgetLibrary/NumberInputWidget/panelConfig.tsx +++ b/src/widgetLibrary/NumberInputWidget/panelConfig.tsx @@ -76,11 +76,19 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, + { + id: "select-label-hidden", + labelName: i18n.t("editor.inspect.setter_label.hidden_label"), + attrName: "labelHidden", + setterType: "SWITCH_SETTER", + }, { id: `${widgetBaseName}-label-position`, labelName: i18n.t("editor.inspect.setter_label.label_position"), attrName: "labelPosition", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: "Left", value: "left" }, { label: "Top", value: "top" }, @@ -91,6 +99,8 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ labelName: i18n.t("editor.inspect.setter_label.label_alignment"), attrName: "labelAlign", setterType: "RADIO_GROUP_SETTER", + bindAttrName: "labelHidden", + shown: (value) => !value, options: [ { label: , @@ -108,6 +118,8 @@ export const NUMBER_INPUT_PANEL_CONFIG: PanelConfig[] = [ attrName: "labelWidth", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.NUMBER, + bindAttrName: "labelHidden", + shown: (value) => !value, }, ], }, diff --git a/src/widgetLibrary/PublicSector/Label/index.tsx b/src/widgetLibrary/PublicSector/Label/index.tsx index ee8dd6fc0d..165f2593f8 100644 --- a/src/widgetLibrary/PublicSector/Label/index.tsx +++ b/src/widgetLibrary/PublicSector/Label/index.tsx @@ -13,10 +13,10 @@ const Label = forwardRef((props, ref) => { labelAlign = "left", labelCaption, labelPosition = "left", + labelHidden, labelWidth = 33, labelWidthUnit = "%", required, - hidden, hasTooltip = false, ...rest } = props @@ -47,7 +47,7 @@ const Label = forwardRef((props, ref) => { } }, [labelWidthUnit, labelWidth]) - return !hidden && label ? ( + return !labelHidden && label ? ( ) } From 836b32a9dbc670498fb5f71a86693f2a08981df2 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Mon, 25 Jul 2022 19:33:13 +0800 Subject: [PATCH 061/148] feat: update --- .../ActionTypeSelector/interface.ts | 7 ----- .../Actions/ActionGenerator/index.tsx | 28 +++++++++++++++++-- .../Actions/ActionGenerator/interface.ts | 4 ++- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/interface.ts b/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/interface.ts index d1fa7fa344..07fef7941f 100644 --- a/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/interface.ts +++ b/src/page/App/components/Actions/ActionGenerator/ActionTypeSelector/interface.ts @@ -7,13 +7,6 @@ export interface ActionTypeSelectorProps { resourceOnly?: boolean } -export interface ActionTypeSelectorListProps { - title: string - category: ActionTypeCategory - list: ResourceDataItem[] - onSelect?: (item: ActionTypeInfo) => void -} - export interface ActionTypeSelectorCardProps extends ResourceDataItem { onSelect?: (item: ActionTypeInfo) => void category: ActionTypeCategory diff --git a/src/page/App/components/Actions/ActionGenerator/index.tsx b/src/page/App/components/Actions/ActionGenerator/index.tsx index 36eaf49c77..9bc3230c0e 100644 --- a/src/page/App/components/Actions/ActionGenerator/index.tsx +++ b/src/page/App/components/Actions/ActionGenerator/index.tsx @@ -4,8 +4,9 @@ import { ActionGeneratorProps } from "./interface" import { ActionTypeSelector } from "./ActionTypeSelector" export const ActionGenerator: FC = function (props) { - const { visible, onClose } = props + const { visible, onClose, onAddAction } = props const [step, setStep] = useState<0 | 1 | 2>(0) + const [resourceType, setResourceType] = useState("") useEffect(() => { setStep(0) @@ -19,7 +20,30 @@ export const ActionGenerator: FC = function (props) { withoutPadding onCancel={onClose} > - {step === 0 ? : step === 1 ? "step 1" : "step 2"} + {step === 0 ? ( + { + const { category, actionType } = info + + switch (category) { + case "jsTransformer": { + onAddAction?.(info) + break + } + case "apis": + case "databases": { + setResourceType(actionType) + setStep(1) + break + } + } + }} + /> + ) : step === 1 ? ( + "step 1" + ) : ( + "step 2" + )} ) } diff --git a/src/page/App/components/Actions/ActionGenerator/interface.ts b/src/page/App/components/Actions/ActionGenerator/interface.ts index 79b595d419..9b0ea48110 100644 --- a/src/page/App/components/Actions/ActionGenerator/interface.ts +++ b/src/page/App/components/Actions/ActionGenerator/interface.ts @@ -1,4 +1,6 @@ -export interface ActionInfo { +import { ActionTypeInfo } from "@/page/App/components/Actions/ActionGenerator/ActionTypeSelector/interface" + +export interface ActionInfo extends ActionTypeInfo { resourceId?: string } From 60bd1098da94aa0c13d1852efb66da5a4da3ef58 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Mon, 25 Jul 2022 19:39:02 +0800 Subject: [PATCH 062/148] feat: update --- .../components/Actions/ActionGenerator/index.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/page/App/components/Actions/ActionGenerator/index.tsx b/src/page/App/components/Actions/ActionGenerator/index.tsx index 9bc3230c0e..e03a4ea407 100644 --- a/src/page/App/components/Actions/ActionGenerator/index.tsx +++ b/src/page/App/components/Actions/ActionGenerator/index.tsx @@ -1,15 +1,19 @@ -import { FC, useEffect, useState } from "react" +import { FC, useEffect, useRef, useState } from "react" import { Modal } from "@illa-design/modal" import { ActionGeneratorProps } from "./interface" import { ActionTypeSelector } from "./ActionTypeSelector" export const ActionGenerator: FC = function (props) { const { visible, onClose, onAddAction } = props - const [step, setStep] = useState<0 | 1 | 2>(0) - const [resourceType, setResourceType] = useState("") + const actionInfo = useRef({ + step: 0, + resourceType: "", + }) + + const step = actionInfo.current.step useEffect(() => { - setStep(0) + actionInfo.current.step = 0 }, [visible]) return ( @@ -32,8 +36,8 @@ export const ActionGenerator: FC = function (props) { } case "apis": case "databases": { - setResourceType(actionType) - setStep(1) + actionInfo.current.resourceType = actionType + actionInfo.current.step = 1 break } } From 694a2d06b1428c88389b4f5e4e83802d8ec4906c Mon Sep 17 00:00:00 2001 From: smallSohoSolo Date: Tue, 26 Jul 2022 00:47:14 +0800 Subject: [PATCH 063/148] feat: remove unused code --- .../ActionEditor/ActionList/index.tsx | 301 ------------------ .../ResourceForm/Editor/index.tsx | 213 ------------- .../ResourceForm/Editor/style.tsx | 36 --- 3 files changed, 550 deletions(-) delete mode 100644 src/page/App/components/ActionEditor/ActionList/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ResourceForm/Editor/index.tsx delete mode 100644 src/page/App/components/ActionEditor/ResourceForm/Editor/style.tsx diff --git a/src/page/App/components/ActionEditor/ActionList/index.tsx b/src/page/App/components/ActionEditor/ActionList/index.tsx deleted file mode 100644 index b3217fda63..0000000000 --- a/src/page/App/components/ActionEditor/ActionList/index.tsx +++ /dev/null @@ -1,301 +0,0 @@ -import { FC, useState, useMemo, useRef, useCallback } from "react" -import { useTranslation } from "react-i18next" -import { useSelector } from "react-redux" -import { Button } from "@illa-design/button" -import { Trigger } from "@illa-design/trigger" -import { DropList, Dropdown } from "@illa-design/dropdown" -import { Input } from "@illa-design/input" -import { illaPrefix, globalColor } from "@illa-design/theme" -import { AddIcon, WarningCircleIcon } from "@illa-design/icon" -import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName" -import { selectAllActionItem } from "@/redux/currentApp/action/actionSelector" -import { getSelectedAction } from "@/redux/config/configSelector" -import { ActionGenerator } from "@/page/App/components/ActionEditor/ActionGenerator" -import { ActionInfo } from "@/page/App/components/ActionEditor/ActionGenerator/interface" -import { ActionTypeIcon } from "@/page/App/components/ActionEditor/components/ActionTypeIcon" -import { isValidActionDisplayName } from "@/page/App/components/ActionEditor/utils" -import { ActionDisplayNameValidateResult } from "@/page/App/components/ActionEditor/interface" -import { ActionItem } from "@/redux/currentApp/action/actionState" -import { SearchHeader } from "./SearchHeader" -import { Runtime } from "./Runtime" -import { - actionListContainerStyle, - newBtnContainerStyle, - newButtonTextStyle, - actionItemListStyle, - applyActionItemStyle, - actionItemNameStyle, - applyactionItemNameTextStyle, - actionItemIconStyle, - warningIndicatorStyle, - updatedIndicatorStyle, - noMatchFoundWrapperStyle, - emptyActionListPlaceholderStyle, - nameErrorMsgStyle, -} from "./style" -import { ActionListProps } from "./interface" -import { ReactComponent as EmptySearchIcon } from "@/assets/empty-search-icon.svg" - -const DropListItem = DropList.Item - -export const ActionList: FC = (props) => { - const { - loading, - isActionDirty, - onAddActionItem, - onDuplicateActionItem, - onDeleteActionItem, - onUpdateActionItem, - onSelectActionItem, - } = props - - const { t } = useTranslation() - const actionItems = useSelector(selectAllActionItem) - const activeActionItem = useSelector(getSelectedAction) - const [query, setQuery] = useState("") - const [editingName, setEditingName] = useState("") - const [editingActionItemId, setEditingActionItemId] = useState("") - const [contextMenuActionId, setContextMenuActionId] = useState("") - const [isRenameError, setIsRenameError] = - useState({ error: false }) - const [actionGeneratorVisible, setActionGeneratorVisible] = useState(false) - - const inputRef = useRef(null) - - const matchedActionItems = useMemo(() => { - if (query === "") { - return actionItems - } - - return actionItems.filter(({ displayName }) => - displayName.toLowerCase().includes(query.toLowerCase()), - ) - }, [actionItems, query]) - - function editName(id: string, name: string) { - setEditingActionItemId(id) - setEditingName(name) - setTimeout(() => { - inputRef.current?.focus() - }, 0) - } - - const updateName = useCallback( - (originName: string) => { - if (originName !== editingName && !isRenameError.error) { - onUpdateActionItem(editingActionItemId, { - ...activeActionItem, - displayName: editingName, - oldDisplayName: originName, - }) - } - setEditingActionItemId("") - setIsRenameError({ error: false }) - setEditingName("") - }, - [onUpdateActionItem, editingActionItemId, editingName, isRenameError], - ) - - const onAddAction = useCallback( - (info: ActionInfo) => { - const { actionType, resourceId } = info - - setActionGeneratorVisible(false) - - onAddActionItem({ - displayName: DisplayNameGenerator.getDisplayName(actionType), - actionType, - resourceId, - actionTemplate: {}, - }) - }, - [onAddActionItem], - ) - - function onClickActionItem(id: string) { - onSelectActionItem(id) - } - - const actionItemsList = matchedActionItems.map((item) => { - const { actionId: id, displayName: name, actionType, error } = item - const isSelected = id === activeActionItem.actionId - - function renderName() { - if (id === editingActionItemId) { - return ( - {isRenameError?.errorMsg} - } - position="bottom" - popupVisible={isRenameError?.error} - showArrow={false} - closeDelay={0} - colorScheme="techPurple" - > - { - setEditingName(value) - value !== name && - setIsRenameError(isValidActionDisplayName(value)) - }} - onBlur={() => updateName(name)} - onPressEnter={() => updateName(name)} - /> - - ) - } - - return ( - editName(id, name)} - > - - {name} - - {isActionDirty && isSelected && ( - - )} - - ) - } - - return ( -
  • onClickActionItem(id)} - onContextMenu={() => { - setContextMenuActionId(id) - }} - > - - - {error && ( - - )} - - {renderName()} - -
    • - ) - }) - - const NoMatchFound = ( -
    - - {t("editor.action.action_list.tips.not_found")} -
    - ) - - const finalActionItemList = useMemo(() => { - if (matchedActionItems.length === 0) { - if (query !== "") { - return NoMatchFound - } - - return ( - - {t("editor.action.action_list.tips.empty")} - - ) - } - - return actionItemsList - }, [ - query, - matchedActionItems, - activeActionItem, - editingActionItemId, - isActionDirty, - editingName, - isRenameError, - ]) - - const handleContextMenu = useCallback( - (key) => { - switch (key) { - case "duplicate": - onDuplicateActionItem(contextMenuActionId) - break - case "delete": - onDeleteActionItem(contextMenuActionId) - break - case "rename": - const target = actionItems.find( - ({ actionId }) => actionId === contextMenuActionId, - ) as ActionItem - editName(target?.actionId, target?.displayName) - break - } - }, - [ - onDuplicateActionItem, - onDeleteActionItem, - editName, - contextMenuActionId, - actionItems, - ], - ) - - return ( -
    - - -
    - -
    - - - - - - - } - > -
      {finalActionItemList}
    -     - - setActionGeneratorVisible(false)} - onAddAction={onAddAction} - /> -
    - ) -} - -ActionList.displayName = "ActionList" diff --git a/src/page/App/components/ActionEditor/ResourceForm/Editor/index.tsx b/src/page/App/components/ActionEditor/ResourceForm/Editor/index.tsx deleted file mode 100644 index 079e755ca1..0000000000 --- a/src/page/App/components/ActionEditor/ResourceForm/Editor/index.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import { FC, useRef, cloneElement, RefObject, useState } from "react" -import { useTranslation } from "react-i18next" -import { useSelector, useDispatch } from "react-redux" -import { Button } from "@illa-design/button" -import { PaginationPreIcon } from "@illa-design/icon" -import { Notification } from "@illa-design/notification" -import { Api } from "@/api/base" -import { Resource } from "@/redux/resource/resourceState" -import { resourceActions } from "@/redux/resource/resourceSlice" -import { selectAllResource } from "@/redux/resource/resourceSelector" -import { - MySQLConfigure, - RESTAPIConfigure, -} from "@/page/App/components/ActionEditor/Resource" -import { ResourceType } from "@/page/App/components/ActionEditor/interface" -import { ACTION_TYPE } from "@/page/App/components/ActionEditor/constant" -import { ResourceFormEditorProps, ConnectionRef } from "./interface" -import { - formContainerStyle, - formFooterStyle, - backIconStyle, - formFooterFillingStyle, - createResourceBtnStyle, - formTitleStyle, - formBodyStyle, -} from "./style" - -const renderResourceNode = ( - resourceType: ResourceType | undefined, - connectionRef: RefObject, - formRef: RefObject, - onSubmitForm: (data: any, resourceId?: string) => void, - onTestConnection: (data: any) => void, - props: ResourceFormEditorProps, -) => { - let node: JSX.Element - const { resourceId } = props - switch (resourceType) { - case ACTION_TYPE.REST_API: - node = ( - onSubmitForm(data, resourceId)} - /> - ) - break - case ACTION_TYPE.MYSQL: - node = ( - onSubmitForm(data, resourceId)} - onTestConnection={onTestConnection} - /> - ) - break - default: - node =
    No Config
    - break - } - - return cloneElement(node, { ref: formRef }) || null -} - -const getResourceTypeNameKey = (resourceType: string) => { - switch (resourceType) { - case ACTION_TYPE.REST_API: - return "rest_api" - case ACTION_TYPE.MYSQL: - return "my_sql" - default: - return "" - } -} - -export const ResourceFormEditor: FC = (props) => { - const { resourceId, back, onSubmit, resourceType: resourceTypeProps } = props - const { t } = useTranslation() - const dispatch = useDispatch() - const resource = useSelector(selectAllResource).find( - (i) => i.resourceId === resourceId, - ) - // if receive `resourceTypeProps` means add new - const resourceType = resourceTypeProps || resource?.resourceType - - const connectionRef = useRef(null) - const formRef = useRef(null) - - const [createBtnLoading, setCreateBtnLoading] = useState(false) - const [testConnectionLoading, setTestConnectionLoading] = useState(false) - - const resourceTypeNameKey = getResourceTypeNameKey(resourceType as string) - const resourceTitle = resourceTypeNameKey - ? t(`editor.action.resource.${resourceTypeNameKey}.name`) - : "" - - function submitForm() { - formRef.current?.requestSubmit() - } - - function onSubmitForm(data: any, resourceId?: string) { - if (resourceId) { - Api.request( - { - url: `/resources/${resourceId}`, - method: "PUT", - data, - }, - ({ data }) => { - dispatch(resourceActions.updateResourceItemReducer(data)) - onSubmit?.(resourceId) - }, - () => {}, - () => {}, - (loading) => setCreateBtnLoading(loading), - ) - return - } - - Api.request( - { - url: "/resources", - method: "POST", - data, - }, - ({ data }) => { - dispatch(resourceActions.addResourceItemReducer(data)) - onSubmit?.(data.resourceId) - }, - () => {}, - () => {}, - (loading) => setCreateBtnLoading(loading), - ) - } - - function onTestConnection(data: any) { - Api.request<{ message: string }>( - { - url: "/resources/testConnection", - method: "POST", - data, - }, - ({ data }) => { - Notification.success({ title: {data.message} }) - }, - ({ data }) => { - Notification.error({ title: {data.errorMessage} }) - }, - () => {}, - (loading) => setTestConnectionLoading(loading), - ) - } - - return ( -
    -
    - {t("editor.action.form.title.configure", { name: resourceTitle })} -
    -
    - {renderResourceNode( - resourceType, - connectionRef, - formRef, - onSubmitForm, - onTestConnection, - props, - )} -
    -
    - {back && ( - - )} - -
    - - - - -
    -
    - ) -} - -ResourceFormEditor.displayName = "ResourceFormEditor" diff --git a/src/page/App/components/ActionEditor/ResourceForm/Editor/style.tsx b/src/page/App/components/ActionEditor/ResourceForm/Editor/style.tsx deleted file mode 100644 index 65c7b072dd..0000000000 --- a/src/page/App/components/ActionEditor/ResourceForm/Editor/style.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { css } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" - -export const formContainerStyle = css`` - -export const formTitleStyle = css` - padding: 16px 40px 8px 16px; - width: 100%; - font-size: 16px; - font-weight: 500; - text-align: center; - color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; -` -export const formBodyStyle = css` - padding: 8px 24px; -` -export const formFooterStyle = css` - display: flex; - padding: 24px; - max-height: 80px; -` - -export const formFooterFillingStyle = css` - flex: 1; -` - -export const backIconStyle = css` - display: inline-block; - font-size: 12px; - margin-right: 4px; - margin-bottom: 2px; -` - -export const createResourceBtnStyle = css` - margin-left: 8px; -` From 9dbf7adfb9712b9ffab59dc2d966a300ebd82629 Mon Sep 17 00:00:00 2001 From: smallSohoSolo Date: Tue, 26 Jul 2022 01:23:02 +0800 Subject: [PATCH 064/148] fix: error import & type --- .../Actions/ActionPanel/MysqlPanel/index.tsx | 10 +++++++-- .../Actions/ActionPanel/MysqlPanel/style.ts | 6 +++++- .../ActionPanel/ResourceChoose/index.tsx | 14 +++++++++++++ .../ActionPanel/ResourceChoose/interface.ts | 1 + .../ActionPanel/ResourceChoose/style.ts | 15 +++++++++++++ .../ActionPanel/RestApiPanel/index.tsx | 3 ++- .../ActionPanel/TransformerPanel/index.tsx | 3 ++- .../components/Actions/ActionPanel/index.tsx | 7 ++++--- .../Actions/ActionPanel/interface.ts | 10 ++++++--- src/page/App/index.tsx | 21 +++++++++++++------ src/page/App/resp/currentAppResp.ts | 7 +++++-- src/page/Dashboard/index.tsx | 4 ++-- src/redux/config/configReducer.ts | 7 +++++-- src/redux/currentApp/action/actionState.ts | 10 +++++++-- src/redux/resource/resourceState.ts | 2 +- 15 files changed, 94 insertions(+), 26 deletions(-) create mode 100644 src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx create mode 100644 src/page/App/components/Actions/ActionPanel/ResourceChoose/interface.ts create mode 100644 src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts diff --git a/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx b/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx index 685de096cc..9b6536dcaa 100644 --- a/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx +++ b/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx @@ -1,9 +1,15 @@ import { FC } from "react" import { ActionPanelProps } from "@/page/App/components/Actions/ActionPanel/interface" import { mysqlContainerStyle } from "@/page/App/components/Actions/ActionPanel/MysqlPanel/style" +import { ResourceChoose } from "@/page/App/components/Actions/ActionPanel/ResourceChoose" +import { MysqlAction } from "@/redux/currentApp/action/actionState" -export const MysqlPanel: FC = () => { - return
    +export const MysqlPanel: FC> = () => { + return ( +
    + +
    + ) } MysqlPanel.displayName = "MysqlPanel" diff --git a/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts b/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts index aa78dea2d9..9721c709ba 100644 --- a/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts +++ b/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts @@ -1,3 +1,7 @@ import { css } from "@emotion/react" -export const mysqlContainerStyle = css`` +export const mysqlContainerStyle = css` + width: 100%; + display: flex; + flex-direction: column; +` diff --git a/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx b/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx new file mode 100644 index 0000000000..9c238c2a61 --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx @@ -0,0 +1,14 @@ +import { FC } from "react" +import { ResourceChooseProps } from "./interface" +import { resourceChooseContainerStyle, resourceTitleStyle } from "./style" +import { useTranslation } from "react-i18next" + +export const ResourceChoose: FC = () => { + const { t } = useTranslation() + + return ( +
    + {t("resources")} +
    + ) +} diff --git a/src/page/App/components/Actions/ActionPanel/ResourceChoose/interface.ts b/src/page/App/components/Actions/ActionPanel/ResourceChoose/interface.ts new file mode 100644 index 0000000000..4cd19f2fd2 --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/ResourceChoose/interface.ts @@ -0,0 +1 @@ +export interface ResourceChooseProps {} diff --git a/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts b/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts new file mode 100644 index 0000000000..bfd0c889b2 --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts @@ -0,0 +1,15 @@ +import { css } from "@emotion/react" +import { globalColor, illaPrefix } from "@illa-design/theme" + +export const resourceChooseContainerStyle = css` + display: flex; + flex-direction: row; + height: 64px; +` + +export const resourceTitleStyle = css` + flex-grow: 1; + font-size: 14px; + font-weight: 500; + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; +` diff --git a/src/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx b/src/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx index a07f503732..cc620a5330 100644 --- a/src/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx +++ b/src/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx @@ -1,7 +1,8 @@ import { FC } from "react" import { ActionPanelProps } from "@/page/App/components/Actions/ActionPanel/interface" +import { RestApiAction } from "@/redux/currentApp/action/actionState" -export const RestApiPanel: FC = () => { +export const RestApiPanel: FC> = () => { return
    } diff --git a/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx b/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx index dfb1d7f268..5ce8c42988 100644 --- a/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx +++ b/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx @@ -1,7 +1,8 @@ import { FC } from "react" import { ActionPanelProps } from "@/page/App/components/Actions/ActionPanel/interface" +import { TransformerAction } from "@/redux/currentApp/action/actionState" -export const TransformerPanel: FC = () => { +export const TransformerPanel: FC> = () => { return
    } diff --git a/src/page/App/components/Actions/ActionPanel/index.tsx b/src/page/App/components/Actions/ActionPanel/index.tsx index 9422d7671b..601c34bf8b 100644 --- a/src/page/App/components/Actions/ActionPanel/index.tsx +++ b/src/page/App/components/Actions/ActionPanel/index.tsx @@ -21,21 +21,22 @@ export const ActionPanel: FC = () => { case "restapi": actionPanel = break + case "transformer": + actionPanel = + break case "mongodb": break case "redis": break case "postgresql": break - case "transformer": - actionPanel = - break default: break } return (
    + {actionPanel}
    ) } diff --git a/src/page/App/components/Actions/ActionPanel/interface.ts b/src/page/App/components/Actions/ActionPanel/interface.ts index 0ce7d965ab..b069293257 100644 --- a/src/page/App/components/Actions/ActionPanel/interface.ts +++ b/src/page/App/components/Actions/ActionPanel/interface.ts @@ -1,6 +1,10 @@ import { HTMLAttributes } from "react" -import { ActionItem } from "@/redux/currentApp/action/actionState" +import { + ActionContent, + ActionItem, +} from "@/redux/currentApp/action/actionState" -export interface ActionPanelProps extends HTMLAttributes { - action: ActionItem +export interface ActionPanelProps + extends HTMLAttributes { + action: ActionItem } diff --git a/src/page/App/index.tsx b/src/page/App/index.tsx index 7cb475f0d8..b5b61aa822 100644 --- a/src/page/App/index.tsx +++ b/src/page/App/index.tsx @@ -41,8 +41,8 @@ import { Shortcut } from "@/utils/shortcut" import { getCurrentUser } from "@/redux/currentUser/currentUserSelector" import { AppLoading } from "@/page/App/components/AppLoading" import { ActionEditor } from "@/page/App/components/Actions" - -const INIT_PERFORMANCE_RESOURCE_TIMING_BUFFER_SIZE = 1000000 +import { Resource, ResourceContent } from "@/redux/resource/resourceState" +import { resourceActions } from "@/redux/resource/resourceSlice" export const Editor: FC = () => { const dispatch = useDispatch() @@ -80,6 +80,7 @@ export const Editor: FC = () => { const [loadingState, setLoadingState] = useState(true) + // init app useEffect(() => { const controller = new AbortController() Api.request( @@ -131,13 +132,21 @@ export const Editor: FC = () => { } }, []) + // init resource useEffect(() => { - performance.setResourceTimingBufferSize( - INIT_PERFORMANCE_RESOURCE_TIMING_BUFFER_SIZE, + const controller = new AbortController() + Api.request[]>( + { + url: "/resources", + method: "GET", + signal: controller.signal, + }, + (response) => { + dispatch(resourceActions.updateResourceListReducer(response.data)) + }, ) - return () => { - performance.clearResourceTimings() + controller.abort() } }, []) diff --git a/src/page/App/resp/currentAppResp.ts b/src/page/App/resp/currentAppResp.ts index cf987fdaee..b4b7a907df 100644 --- a/src/page/App/resp/currentAppResp.ts +++ b/src/page/App/resp/currentAppResp.ts @@ -1,4 +1,3 @@ -import { ActionListState } from "@/redux/currentApp/action/actionState" import { DependenciesState } from "@/redux/currentApp/executionTree/dependencies/dependenciesState" import { ExecutionState } from "@/redux/currentApp/executionTree/execution/executionState" import { DragShadowState } from "@/redux/currentApp/editor/dragShadow/dragShadowState" @@ -6,11 +5,15 @@ import { DottedLineSquareState } from "@/redux/currentApp/editor/dottedLineSquar import { DisplayNameState } from "@/redux/currentApp/displayName/displayNameState" import { ComponentsState } from "@/redux/currentApp/editor/components/componentsState" import { DashboardApp } from "@/redux/dashboard/apps/dashboardAppState" +import { + ActionContent, + ActionItem, +} from "@/redux/currentApp/action/actionState" export interface CurrentAppResp { appInfo: DashboardApp components: ComponentsState - actions: ActionListState + actions: ActionItem[] dependenciesState: DependenciesState executionState: ExecutionState dragShadowState: DragShadowState diff --git a/src/page/Dashboard/index.tsx b/src/page/Dashboard/index.tsx index 9c93709b3c..5345d16313 100644 --- a/src/page/Dashboard/index.tsx +++ b/src/page/Dashboard/index.tsx @@ -10,7 +10,7 @@ import { Api } from "@/api/base" import { DashboardApp } from "@/redux/dashboard/apps/dashboardAppState" import { dashboardAppActions } from "@/redux/dashboard/apps/dashboardAppSlice" import { useDispatch, useSelector } from "react-redux" -import { Resource } from "@/redux/resource/resourceState" +import { Resource, ResourceContent } from "@/redux/resource/resourceState" import { resourceActions } from "@/redux/resource/resourceSlice" import { containerStyle, @@ -57,7 +57,7 @@ export const IllaApp: FC = () => { }) const resourceList = new Promise((resolve) => { - Api.request( + Api.request[]>( { url: "/resources", method: "GET", diff --git a/src/redux/config/configReducer.ts b/src/redux/config/configReducer.ts index db8c500249..b7e23cdb76 100644 --- a/src/redux/config/configReducer.ts +++ b/src/redux/config/configReducer.ts @@ -1,7 +1,10 @@ import { CaseReducer, PayloadAction } from "@reduxjs/toolkit" import { ConfigState, IllaMode } from "@/redux/config/configState" import { ComponentNode } from "@/redux/currentApp/editor/components/componentsState" -import { ActionItem } from "@/redux/currentApp/action/actionState" +import { + ActionContent, + ActionItem, +} from "@/redux/currentApp/action/actionState" import { cloneDeep } from "lodash" import { getNewWidgetPropsByUpdateSlice } from "@/utils/componentNode" import { isObject } from "@/utils/typeHelper" @@ -43,7 +46,7 @@ export const updateSelectedComponent: CaseReducer< export const updateSelectedAction: CaseReducer< ConfigState, - PayloadAction + PayloadAction> > = (state, action) => { state.selectedAction = action.payload } diff --git a/src/redux/currentApp/action/actionState.ts b/src/redux/currentApp/action/actionState.ts index d00f945dae..50991671bc 100644 --- a/src/redux/currentApp/action/actionState.ts +++ b/src/redux/currentApp/action/actionState.ts @@ -11,7 +11,7 @@ export type ActionType = | "postgresql" | "transformer" -export interface ActionContent {} +export type ActionContent = object export interface ActionItem { actionId: string @@ -24,8 +24,14 @@ export interface ActionItem { content: T } -export interface MysqlAction extends ActionContent {} +export interface MysqlAction extends ActionContent { + sqlString: string +} export interface RestApiAction extends ActionContent {} +export interface TransformerAction extends ActionContent { + transformerString: string +} + export const actionInitialState: ActionItem[] = [] diff --git a/src/redux/resource/resourceState.ts b/src/redux/resource/resourceState.ts index 4da757e50d..031ec80fbc 100644 --- a/src/redux/resource/resourceState.ts +++ b/src/redux/resource/resourceState.ts @@ -5,7 +5,7 @@ export type ResourceType = | "redis" | "postgresql" -export interface ResourceContent {} +export type ResourceContent = object export interface Resource { resourceId: string From eec2dfa36544474fae3c6ecfb3e44adf838a952e Mon Sep 17 00:00:00 2001 From: AruSeito Date: Tue, 26 Jul 2022 10:26:03 +0800 Subject: [PATCH 065/148] fix: remove localstorage --- .../InspectPanel/utils/fieldFactory.tsx | 27 +++---------------- src/page/App/context/globalDataProvider.tsx | 2 +- 2 files changed, 5 insertions(+), 24 deletions(-) diff --git a/src/page/App/components/InspectPanel/utils/fieldFactory.tsx b/src/page/App/components/InspectPanel/utils/fieldFactory.tsx index 4d82e8c968..9f54ba9138 100644 --- a/src/page/App/components/InspectPanel/utils/fieldFactory.tsx +++ b/src/page/App/components/InspectPanel/utils/fieldFactory.tsx @@ -5,7 +5,6 @@ import { } from "@/page/App/components/InspectPanel/interface" import { PanelBar } from "@/components/PanelBar" import { Setter } from "@/page/App/components/InspectPanel/setter" -import { getLocalStorage, setLocalStorage } from "@/utils/storage" import { ghostEmptyStyle } from "@/page/App/components/InspectPanel/style" import i18n from "@/i18n/config" @@ -29,29 +28,12 @@ export const renderFieldAndLabel = ( export const renderPanelBar = ( config: PanelFieldGroupConfig, displayName: string, - index: number, ) => { const { id, groupName, children } = config as PanelFieldGroupConfig - let isOpened = true const key = `${id}-${displayName}` - const saveToggleState = (value: boolean) => { - setLocalStorage(key, value, -1) - } - - if (getLocalStorage(key) != undefined) { - isOpened = getLocalStorage(key) - } else { - saveToggleState(isOpened) - } - return ( - + {children && children.length > 0 && (
    {fieldFactory(children, displayName)}
    )} @@ -63,10 +45,9 @@ export const renderField = ( item: PanelConfig, displayName: string, isInList: boolean = false, - index: number, ) => { if ((item as PanelFieldGroupConfig).groupName) { - return renderPanelBar(item as PanelFieldGroupConfig, displayName, index) + return renderPanelBar(item as PanelFieldGroupConfig, displayName) } else if ((item as PanelFieldConfig).setterType) { return renderFieldAndLabel( item as PanelFieldConfig, @@ -80,7 +61,7 @@ export const renderField = ( export function fieldFactory(panelConfig: PanelConfig[], displayName: string) { if (!displayName || !panelConfig || !panelConfig.length) return null - return panelConfig.map((item: PanelConfig, index: number) => - renderField(item, displayName, false, index), + return panelConfig.map((item: PanelConfig) => + renderField(item, displayName, false), ) } diff --git a/src/page/App/context/globalDataProvider.tsx b/src/page/App/context/globalDataProvider.tsx index 46d199895c..1ab157670c 100644 --- a/src/page/App/context/globalDataProvider.tsx +++ b/src/page/App/context/globalDataProvider.tsx @@ -66,7 +66,7 @@ export const GlobalDataProvider: FC = ({ children }) => { const builderInfo = useSelector(getBuilderInfo) const [globalData, setGlobalData] = useState>({ ...initState, - userInfo, + currentUser: userInfo, builderInfo, }) From 52d0627041cec5b64de486d2ae764a014dd5db9b Mon Sep 17 00:00:00 2001 From: AruSeito Date: Tue, 26 Jul 2022 10:30:13 +0800 Subject: [PATCH 066/148] fix: transform empty style --- .../ActionEditorPanel/ResourceEditor/Transformer/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/Transformer/style.ts b/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/Transformer/style.ts index 5300f1c661..2b419ff5cd 100644 --- a/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/Transformer/style.ts +++ b/src/page/App/components/ActionEditor/ActionEditorPanel/ResourceEditor/Transformer/style.ts @@ -4,7 +4,7 @@ import { globalColor, illaPrefix } from "@illa-design/theme" export const disableTransformerStyle = css` border-radius: 8px; background-color: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; - color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; + color: ${globalColor(`--${illaPrefix}-grayBlue-03`)}; padding: 8px 16px; font-size: 14px; line-height: 22px; From ad623d98de1364914c5fb6b46247c0091ae178b0 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Tue, 26 Jul 2022 10:44:46 +0800 Subject: [PATCH 067/148] feat: update interface --- .../Actions/ActionGenerator/index.tsx | 16 +++++------- src/redux/currentApp/action/actionReducer.ts | 26 ++++++++++++------- 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/page/App/components/Actions/ActionGenerator/index.tsx b/src/page/App/components/Actions/ActionGenerator/index.tsx index e03a4ea407..9bc3230c0e 100644 --- a/src/page/App/components/Actions/ActionGenerator/index.tsx +++ b/src/page/App/components/Actions/ActionGenerator/index.tsx @@ -1,19 +1,15 @@ -import { FC, useEffect, useRef, useState } from "react" +import { FC, useEffect, useState } from "react" import { Modal } from "@illa-design/modal" import { ActionGeneratorProps } from "./interface" import { ActionTypeSelector } from "./ActionTypeSelector" export const ActionGenerator: FC = function (props) { const { visible, onClose, onAddAction } = props - const actionInfo = useRef({ - step: 0, - resourceType: "", - }) - - const step = actionInfo.current.step + const [step, setStep] = useState<0 | 1 | 2>(0) + const [resourceType, setResourceType] = useState("") useEffect(() => { - actionInfo.current.step = 0 + setStep(0) }, [visible]) return ( @@ -36,8 +32,8 @@ export const ActionGenerator: FC = function (props) { } case "apis": case "databases": { - actionInfo.current.resourceType = actionType - actionInfo.current.step = 1 + setResourceType(actionType) + setStep(1) break } } diff --git a/src/redux/currentApp/action/actionReducer.ts b/src/redux/currentApp/action/actionReducer.ts index 6ce9fc10d8..aa0241adee 100644 --- a/src/redux/currentApp/action/actionReducer.ts +++ b/src/redux/currentApp/action/actionReducer.ts @@ -1,26 +1,30 @@ import { CaseReducer, PayloadAction } from "@reduxjs/toolkit" -import { ActionItem } from "@/redux/currentApp/action/actionState" +import { + ActionContent, + ActionItem, +} from "@/redux/currentApp/action/actionState" export const updateActionListReducer: CaseReducer< - ActionItem[], - PayloadAction + ActionItem[], + PayloadAction[]> > = (_, action) => { return action.payload } export const addActionItemReducer: CaseReducer< - ActionItem[], - PayloadAction + ActionItem[], + PayloadAction> > = (state, action) => { state.push(action.payload) } export const updateActionItemReducer: CaseReducer< - ActionItem[], - PayloadAction + ActionItem[], + PayloadAction> > = (state, action) => { const index = state.findIndex( - (item: ActionItem) => item.displayName === action.payload.displayName, + (item: ActionItem) => + item.displayName === action.payload.displayName, ) if (index != -1) { state[index] = action.payload @@ -28,11 +32,13 @@ export const updateActionItemReducer: CaseReducer< } export const removeActionItemReducer: CaseReducer< - ActionItem[], + ActionItem[], PayloadAction > = (state, action) => { state.splice( - state.findIndex((item: ActionItem) => item.displayName === action.payload), + state.findIndex( + (item: ActionItem) => item.displayName === action.payload, + ), 1, ) } From c0f55eff7690496569990287a87e5a910433b143 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Tue, 26 Jul 2022 10:50:47 +0800 Subject: [PATCH 068/148] feat: editableText to update displayName --- src/components/EditableText/index.tsx | 66 +++++++++++++++++++ src/components/EditableText/interface.ts | 4 ++ src/components/EditableText/style.ts | 43 ++++++++++++ src/i18n/locale/en-US.json | 6 +- src/i18n/locale/zh-CN.json | 6 +- .../App/components/InspectPanel/header.tsx | 14 ++-- src/utils/typeHelper.ts | 3 +- src/widgetLibrary/EditableWidget/style.tsx | 1 - 8 files changed, 131 insertions(+), 12 deletions(-) create mode 100644 src/components/EditableText/index.tsx create mode 100644 src/components/EditableText/interface.ts create mode 100644 src/components/EditableText/style.ts diff --git a/src/components/EditableText/index.tsx b/src/components/EditableText/index.tsx new file mode 100644 index 0000000000..b5ffdaefbf --- /dev/null +++ b/src/components/EditableText/index.tsx @@ -0,0 +1,66 @@ +import { FC, useCallback, useState } from "react" +import { useTranslation } from "react-i18next" +import { Input } from "@illa-design/input" +import { PenIcon } from "@illa-design/icon" +import { Message } from "@illa-design/message" +import { EditableTextProps } from "./interface" +import { EditableTextWrapperStyle, textStyle } from "./style" +import { isValidDisplayName } from "@/utils/typeHelper" +import { isAlreadyGenerate } from "@/redux/currentApp/displayName/displayNameReducer" + +export const EditableText: FC = (props) => { + const { displayName, updateDisplayNameByBlur } = props + const [inputValue, setInputValue] = useState(displayName) + const [isFocusInput, setIsFocusInput] = useState(false) + const { t } = useTranslation() + + const handleChangeInputValue = (value: string) => { + setInputValue(value) + } + + const handleBlurInput = useCallback(() => { + setIsFocusInput(false) + if (displayName === inputValue) { + return + } + if (!isValidDisplayName(inputValue)) { + Message.error( + t("editor.display_name.validate_error", { displayName: inputValue }), + ) + setInputValue(displayName) + return + } + if (isAlreadyGenerate(inputValue)) { + Message.error( + t("editor.display_name.duplicate_error", { displayName: inputValue }), + ) + setInputValue(displayName) + return + } + updateDisplayNameByBlur(inputValue) + }, [inputValue]) + return ( +
    + {isFocusInput ? ( + + ) : ( + { + setIsFocusInput(true) + }} + > + {inputValue} + + + )} +
    + ) +} diff --git a/src/components/EditableText/interface.ts b/src/components/EditableText/interface.ts new file mode 100644 index 0000000000..a1974d2cb9 --- /dev/null +++ b/src/components/EditableText/interface.ts @@ -0,0 +1,4 @@ +export interface EditableTextProps { + displayName: string + updateDisplayNameByBlur: (value: string) => void +} diff --git a/src/components/EditableText/style.ts b/src/components/EditableText/style.ts new file mode 100644 index 0000000000..387e8cc030 --- /dev/null +++ b/src/components/EditableText/style.ts @@ -0,0 +1,43 @@ +import { css } from "@emotion/react" +import { globalColor, illaPrefix } from "@illa-design/theme" + +export const EditableTextWrapperStyle = css` + width: 100%; + border-radius: 8px; + display: flex; + align-items: center; +` + +export const textStyle = css` + width: 100%; + height: 100%; + display: flex; + min-height: 32px; + font-size: 14px; + align-items: center; + box-sizing: border-box; + max-lines: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + border-radius: 8px; + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; + font-weight: 500; + svg { + width: 14px; + height: 14px; + margin-left: 8px; + opacity: 0; + color: ${globalColor(`--${illaPrefix}-grayBlue-05`)}; + transition: all 200ms; + } + &:hover { + background-color: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; + cursor: pointer; + padding-left: 16px; + svg { + opacity: 1; + } + } + transition: all 200ms; +` diff --git a/src/i18n/locale/en-US.json b/src/i18n/locale/en-US.json index 7b27f2f83e..8edcf1021c 100644 --- a/src/i18n/locale/en-US.json +++ b/src/i18n/locale/en-US.json @@ -553,7 +553,7 @@ "setter_tooltip": { "text_value": "You can choose to enter value either in Markdown mode or Plain text mode. Only links in markdown mode can be recognized", "tooltip": "User can enter component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.", - "hidden": "Dynamically control whether the component is hidden. You can also change the hidden status through {{ name }}.hidden", + "hidden": "Dynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.", "read_only": "Control the status of whether the component is read only. A read only component can be selected and focused but cannont be modified.", "disabled": "Control the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.", "action": "Your actions to components trigger queries, control components, or call the data in your resources. Multiple async actions will be executed in parallel.", @@ -616,6 +616,10 @@ "actions_title": "ACTIONS & TRANSFORMERS ", "components_title": "COMPONENTS ", "globals_title": "GLOBALS " + }, + "display_name": { + "validate_error": "\"{{ displayName }}\" must start with a letter or \"_\", and can only contain letters, numbers, \"_\", or \"$\"", + "duplicate_error": "\"{{ displayName }}\" already exists" } }, "widget": { diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index a383f1a67c..e85f5594c0 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -553,7 +553,7 @@ "setter_tooltip": { "text_value": "您可以选择在 Markdown 模式或纯文本模式下输入值。只有在 Markdown 模式下可以输入链接。", "tooltip": "用户可以在输入框输入提示内容，当鼠标放在组件上，展示提示信息，支持Markdown格式。", - "hidden": "动态控制组件是否为隐藏状态。您可以通过调用 {{ name }}.hidden 修改文本组件的隐藏状态", + "hidden": "动态控制组件是否为隐藏状态。您可以在此处输入动态改变的Boolean值改变组件的隐藏状态", "read_only": "控制组件是否为只读状态。只读组件的内容可以被选中和聚焦，但不能被修改。", "disabled": "控制组件是否为禁用状态。当组件为禁用状态时，组件不能被修改。", "action": "您对组件的操作会触发查询、控制组件或调用资源中的数据等操作。多个异步操作将并行执行。", @@ -616,6 +616,10 @@ "actions_title": "ACTIONS 列表 ", "components_title": "组件列表 ", "globals_title": "全局变量 " + }, + "display_name": { + "validate_error": "\"{{ displayName }}\" 必须由字母或\"_\"开始, 并且只能包含字符，数字，\"_\", 或者 \"$\"", + "duplicate_error": "\"{{ displayName }}\" 已存在" } }, "widget": { diff --git a/src/page/App/components/InspectPanel/header.tsx b/src/page/App/components/InspectPanel/header.tsx index 06d93c5b4b..7b647f5363 100644 --- a/src/page/App/components/InspectPanel/header.tsx +++ b/src/page/App/components/InspectPanel/header.tsx @@ -2,19 +2,19 @@ import { FC, useContext } from "react" import { MoreIcon } from "@illa-design/icon" import { Dropdown } from "@illa-design/dropdown" import { SelectedPanelContext } from "@/page/App/components/InspectPanel/context/selectedContext" -import { WrappedEditableText } from "@/widgetLibrary/EditableWidget" import { panelHeaderIconWrapperStyle, panelHeaderWrapperStyle } from "./style" import { ActionMenu } from "./actionMenu" +import { EditableText } from "@/components/EditableText" export const PanelHeader: FC = (props) => { - const { widgetDisplayName, widgetType } = useContext(SelectedPanelContext) - + const { widgetDisplayName, widgetType, handleUpdateDsl } = + useContext(SelectedPanelContext) return (
    - {}} + {}} />
    Date: Tue, 26 Jul 2022 10:54:32 +0800 Subject: [PATCH 069/148] fix: visible change cancel show dot --- src/utils/shortcut/index.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/utils/shortcut/index.tsx b/src/utils/shortcut/index.tsx index cf5dc14b43..ddf827b3e7 100644 --- a/src/utils/shortcut/index.tsx +++ b/src/utils/shortcut/index.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from "react" +import { FC, useEffect, useState } from "react" import { ShortCutContext } from "@/utils/shortcut/shortcutProvider" import hotkeys from "hotkeys-js" import { Modal } from "@illa-design/modal" @@ -118,6 +118,19 @@ export const Shortcut: FC = ({ children }) => { [], ) + // cancel show dot + useEffect(() => { + const listener = (e: Event) => { + if (document.hidden) { + dispatch(configActions.updateShowDot(false)) + } + } + document.addEventListener("visibilitychange", listener) + return () => { + document.removeEventListener("visibilitychange", listener) + } + }, []) + return ( {children} From d549951e0937489e3016257ba73574d858c224d0 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Tue, 26 Jul 2022 11:39:51 +0800 Subject: [PATCH 070/148] fix: dashbord style --- src/page/Dashboard/DashboardApps/index.tsx | 9 +++++++-- src/page/Dashboard/DashboardResources/index.tsx | 10 ++++++++-- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/page/Dashboard/DashboardApps/index.tsx b/src/page/Dashboard/DashboardApps/index.tsx index 8067dbac86..24bc51f6fb 100644 --- a/src/page/Dashboard/DashboardApps/index.tsx +++ b/src/page/Dashboard/DashboardApps/index.tsx @@ -3,8 +3,10 @@ import { useDispatch, useSelector } from "react-redux" import { useTranslation } from "react-i18next" import { useNavigate } from "react-router-dom" import { cloneDeep } from "lodash" +// TODO: @aruseito Abstract into tool function import dayjs from "dayjs" import utc from "dayjs/plugin/utc" +import timezone from "dayjs/plugin/timezone" import copy from "copy-to-clipboard" import { Button } from "@illa-design/button" import { List, ListItem, ListItemMeta } from "@illa-design/list" @@ -36,6 +38,7 @@ import { } from "./style" dayjs.extend(utc) +dayjs.extend(timezone) export const DashboardApps: FC = () => { const { t } = useTranslation() @@ -255,8 +258,10 @@ export const DashboardApps: FC = () => { { navigate(`/app/${item.appId}/version/0`) diff --git a/src/page/Dashboard/DashboardResources/index.tsx b/src/page/Dashboard/DashboardResources/index.tsx index df8cb9c2e8..d23e324ef1 100644 --- a/src/page/Dashboard/DashboardResources/index.tsx +++ b/src/page/Dashboard/DashboardResources/index.tsx @@ -2,8 +2,10 @@ import { FC, useMemo, useState } from "react" import { useSelector } from "react-redux" import { css } from "@emotion/react" import { useTranslation } from "react-i18next" +// TODO: @aruseito Abstract into tool function import dayjs from "dayjs" import utc from "dayjs/plugin/utc" +import timezone from "dayjs/plugin/timezone" import { Button } from "@illa-design/button" import { Empty } from "@illa-design/empty" import { Table } from "@illa-design/table" @@ -31,8 +33,10 @@ import { tableStyle, } from "./style" import { cloneDeep } from "lodash" +import { Divider } from "@illa-design/divider" dayjs.extend(utc) +dayjs.extend(timezone) function NameColComponent(type: string, text: string) { return ( @@ -49,13 +53,14 @@ function DbNameColComponent(text: string) { if (text) { return {text} } else { - return Null + return - } } function CtimeColComponent(text: string) { + const timezone = dayjs.tz.guess() return ( - {dayjs.utc(text).format("YYYY-MM-DD HH:mm:ss")} + {dayjs(text).tz(timezone).format("YYYY-MM-DD HH:mm:ss")} ) } @@ -207,6 +212,7 @@ export const DashboardResources: FC = () => { {t("dashboard.resources.create_resources")}
    + {resourcesList?.length ? (
    Date: Tue, 26 Jul 2022 16:09:57 +0800 Subject: [PATCH 071/148] fix: resources db name --- illa-design | 2 +- .../components/Actions/ActionList/index.tsx | 7 ++- .../Actions/ActionPanel/MysqlPanel/index.tsx | 8 ++- .../ActionPanel/ResourceChoose/index.tsx | 60 ++++++++++++++++++- .../ActionPanel/ResourceChoose/interface.ts | 13 +++- .../ActionPanel/ResourceChoose/style.ts | 7 +++ src/page/App/components/Actions/getIcon.tsx | 2 + .../Dashboard/DashboardResources/index.tsx | 22 ++++++- src/redux/currentApp/action/actionState.ts | 3 +- src/redux/resource/resourceState.ts | 11 +++- 10 files changed, 124 insertions(+), 11 deletions(-) diff --git a/illa-design b/illa-design index 7da8366648..7900d6b528 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit 7da8366648c72a6c2a8f301b89145f2b1f8a2c47 +Subproject commit 7900d6b5284360bfb500de67350c2fd2c74f14fb diff --git a/src/page/App/components/Actions/ActionList/index.tsx b/src/page/App/components/Actions/ActionList/index.tsx index 6ca755c9d8..f03897f855 100644 --- a/src/page/App/components/Actions/ActionList/index.tsx +++ b/src/page/App/components/Actions/ActionList/index.tsx @@ -18,6 +18,8 @@ import { Modal } from "@illa-design/modal" import { Empty } from "@illa-design/empty" import { ReactComponent as ActionListEmptyState } from "@assets/action-list-empty-state.svg" import { ActionGenerator } from "@/page/App/components/Actions/ActionGenerator" +import { AddIcon } from "@illa-design/icon" +import { Space } from "@illa-design/space" export const ActionList: FC> = (props) => { const { className } = props @@ -48,7 +50,10 @@ export const ActionList: FC> = (props) => { css={addNewActionButtonStyle} onClick={() => setGeneratorVisible(true)} > - + {t("editor.action.action_list.btn.new")} + + + {t("editor.action.action_list.btn.new")} +
    {actionList.length != 0 && ( diff --git a/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx b/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx index 9b6536dcaa..db73119d8c 100644 --- a/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx +++ b/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx @@ -4,10 +4,14 @@ import { mysqlContainerStyle } from "@/page/App/components/Actions/ActionPanel/M import { ResourceChoose } from "@/page/App/components/Actions/ActionPanel/ResourceChoose" import { MysqlAction } from "@/redux/currentApp/action/actionState" -export const MysqlPanel: FC> = () => { +export const MysqlPanel: FC> = (props) => { return (
    - + {}} + onModeChange={(mode) => {}} + />
    ) } diff --git a/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx b/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx index 9c238c2a61..871ed3d3b6 100644 --- a/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx +++ b/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx @@ -1,14 +1,70 @@ import { FC } from "react" import { ResourceChooseProps } from "./interface" -import { resourceChooseContainerStyle, resourceTitleStyle } from "./style" +import { + createNewStyle, + resourceChooseContainerStyle, + resourceTitleStyle, +} from "./style" import { useTranslation } from "react-i18next" +import { Option, Select } from "@illa-design/select" +import { useSelector } from "react-redux" +import { getAllResources } from "@/redux/resource/resourceSelector" +import { Space } from "@illa-design/space" +import { AddIcon } from "@illa-design/icon" +import { getIconFromResourceType } from "@/page/App/components/Actions/getIcon" + +export const ResourceChoose: FC = (props) => { + const { onModeChange, onResourceChange } = props -export const ResourceChoose: FC = () => { const { t } = useTranslation() + const resourceList = useSelector(getAllResources) + return (
    {t("resources")} + +
    ) } diff --git a/src/page/App/components/Actions/ActionPanel/ResourceChoose/interface.ts b/src/page/App/components/Actions/ActionPanel/ResourceChoose/interface.ts index 4cd19f2fd2..a856aebe58 100644 --- a/src/page/App/components/Actions/ActionPanel/ResourceChoose/interface.ts +++ b/src/page/App/components/Actions/ActionPanel/ResourceChoose/interface.ts @@ -1 +1,12 @@ -export interface ResourceChooseProps {} +import { Resource, ResourceContent } from "@/redux/resource/resourceState" +import { + ActionContent, + ActionItem, + ActionTriggerMode, +} from "@/redux/currentApp/action/actionState" + +export interface ResourceChooseProps { + actionItem: ActionItem + onModeChange: (mode: ActionTriggerMode) => void + onResourceChange: (resource: Resource) => void +} diff --git a/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts b/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts index bfd0c889b2..9781611e11 100644 --- a/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts +++ b/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts @@ -3,8 +3,11 @@ import { globalColor, illaPrefix } from "@illa-design/theme" export const resourceChooseContainerStyle = css` display: flex; + align-items: center; + padding: 0 16px; flex-direction: row; height: 64px; + border-bottom: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; ` export const resourceTitleStyle = css` @@ -13,3 +16,7 @@ export const resourceTitleStyle = css` font-weight: 500; color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; ` + +export const createNewStyle = css` + color: ${globalColor(`--${illaPrefix}-techPurple-01`)}; +` diff --git a/src/page/App/components/Actions/getIcon.tsx b/src/page/App/components/Actions/getIcon.tsx index aac5cb8d84..9d21d8fa16 100644 --- a/src/page/App/components/Actions/getIcon.tsx +++ b/src/page/App/components/Actions/getIcon.tsx @@ -23,6 +23,8 @@ export function getIconFromResourceType( return case "redis": return + case "postgresql": + return } return null } diff --git a/src/page/Dashboard/DashboardResources/index.tsx b/src/page/Dashboard/DashboardResources/index.tsx index 6c820c38ae..3925f55d66 100644 --- a/src/page/Dashboard/DashboardResources/index.tsx +++ b/src/page/Dashboard/DashboardResources/index.tsx @@ -8,6 +8,7 @@ import { Button } from "@illa-design/button" import { Empty } from "@illa-design/empty" import { Table } from "@illa-design/table" import { + MysqlResource, Resource, ResourceContent, ResourceListState, @@ -31,6 +32,24 @@ import { cloneDeep } from "lodash" dayjs.extend(utc) +function getDbName(resource: Resource): string { + let name = "" + switch (resource.resourceType) { + case "mongodb": + break + case "mysql": + name = (resource.content as MysqlResource).databaseName + break + case "postgresql": + break + case "redis": + break + case "restapi": + break + } + return name +} + function NameColComponent(type: ResourceType, text: string) { const icon = getIconFromResourceType(type, "24px") return ( @@ -106,6 +125,7 @@ export const DashboardResources: FC = () => { ], [], ) + const data = useMemo(() => { const result: any[] = [] const tmpResourcesList = cloneDeep(resourcesList) @@ -117,7 +137,7 @@ export const DashboardResources: FC = () => { result.push({ nameCol: NameColComponent(item.resourceType, item.resourceName), typeCol: TypeColComponent(item.resourceType), - dbNameCol: "", + dbNameCol: DbNameColComponent(getDbName(item)), ctimeCol: CtimeColComponent(item.updatedAt), }) }) diff --git a/src/redux/currentApp/action/actionState.ts b/src/redux/currentApp/action/actionState.ts index 50991671bc..9a3f5d3703 100644 --- a/src/redux/currentApp/action/actionState.ts +++ b/src/redux/currentApp/action/actionState.ts @@ -12,6 +12,7 @@ export type ActionType = | "transformer" export type ActionContent = object +export type ActionTriggerMode = "manually" | "automate" export interface ActionItem { actionId: string @@ -19,7 +20,7 @@ export interface ActionItem { displayName: string actionType: ActionType transformer: Transformer - triggerMode: "manually" | "automate" + triggerMode: ActionTriggerMode resourceId?: string content: T } diff --git a/src/redux/resource/resourceState.ts b/src/redux/resource/resourceState.ts index 031ec80fbc..a116eb8153 100644 --- a/src/redux/resource/resourceState.ts +++ b/src/redux/resource/resourceState.ts @@ -11,7 +11,6 @@ export interface Resource { resourceId: string resourceName: string resourceType: ResourceType - databaseName: string createdBy: string updatedBy: string createdAt: string @@ -19,7 +18,15 @@ export interface Resource { content: T } -export interface MysqlResource extends ResourceContent {} +export interface MysqlResource extends ResourceContent { + host: string + port: string + databaseName: string + databaseUsername: string + databasePassword: string + ssl: boolean + ssh: boolean +} export interface RestApiResource extends ResourceContent {} From e2113b40f9023b44890f07090b98196b7afd47e1 Mon Sep 17 00:00:00 2001 From: smallSohoSolo Date: Tue, 26 Jul 2022 16:27:59 +0800 Subject: [PATCH 072/148] feat: add new interface --- .../Actions/ActionPanel/ResourceChoose/index.tsx | 13 +++++++++++-- src/redux/currentApp/action/actionState.ts | 1 - src/redux/resource/resourceState.ts | 9 +++++++++ 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx b/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx index 871ed3d3b6..00c7e0985a 100644 --- a/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx +++ b/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx @@ -10,8 +10,9 @@ import { Option, Select } from "@illa-design/select" import { useSelector } from "react-redux" import { getAllResources } from "@/redux/resource/resourceSelector" import { Space } from "@illa-design/space" -import { AddIcon } from "@illa-design/icon" +import { AddIcon, EditableTextWidgetIcon } from "@illa-design/icon" import { getIconFromResourceType } from "@/page/App/components/Actions/getIcon" +import { ButtonProps } from "@illa-design/button" export const ResourceChoose: FC = (props) => { const { onModeChange, onResourceChange } = props @@ -23,7 +24,14 @@ export const ResourceChoose: FC = (props) => { return (
    {t("resources")} - , + } as ButtonProps, + }} + > {resourceList.map((item) => { return (
    ) } diff --git a/src/page/App/components/Actions/ActionPanel/ResourceChoose/interface.ts b/src/page/App/components/Actions/ActionPanel/ResourceChoose/interface.ts deleted file mode 100644 index a856aebe58..0000000000 --- a/src/page/App/components/Actions/ActionPanel/ResourceChoose/interface.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Resource, ResourceContent } from "@/redux/resource/resourceState" -import { - ActionContent, - ActionItem, - ActionTriggerMode, -} from "@/redux/currentApp/action/actionState" - -export interface ResourceChooseProps { - actionItem: ActionItem - onModeChange: (mode: ActionTriggerMode) => void - onResourceChange: (resource: Resource) => void -} diff --git a/src/page/App/components/Actions/ActionPanel/style.ts b/src/page/App/components/Actions/ActionPanel/style.ts index 04dc084817..5c7820459e 100644 --- a/src/page/App/components/Actions/ActionPanel/style.ts +++ b/src/page/App/components/Actions/ActionPanel/style.ts @@ -2,18 +2,17 @@ import { css } from "@emotion/react" import { globalColor, illaPrefix } from "@illa-design/theme" export const actionPanelStyle = css` - display: flex; flex-grow: 1; - min-width: 670px; height: 100%; - flex-direction: column; overflow-x: auto; overflow-y: hidden; + display: flex; + flex-direction: column; ` export const actionTitleBarStyle = css` - width: 100%; display: flex; + min-width: 700px; flex-direction: row; align-items: center; padding: 0 16px; diff --git a/src/page/App/components/Actions/styles.ts b/src/page/App/components/Actions/styles.ts index 7d4da8e711..072af7b64e 100644 --- a/src/page/App/components/Actions/styles.ts +++ b/src/page/App/components/Actions/styles.ts @@ -26,6 +26,6 @@ export const contentContainerStyle = css` width: 100%; display: flex; flex-direction: row; - overflow-y: hidden; + overflow: hidden; height: 100%; ` diff --git a/src/redux/config/configSelector.ts b/src/redux/config/configSelector.ts index 205c55e711..f9632f3cbd 100644 --- a/src/redux/config/configSelector.ts +++ b/src/redux/config/configSelector.ts @@ -38,12 +38,10 @@ export const getSelectedAction = (state: RootState) => { } export const isCurrentSelectedActionChanged = (state: RootState) => { - return ( - state.config.selectedAction === - state.currentApp.action.find((v) => { - return v.displayName === state.config.selectedAction.displayName - }) - ) + const originAction = state.currentApp.action.find((v) => { + return v.displayName === state.config.selectedAction.displayName + }) + return state.config.selectedAction !== originAction } export const isSelected = (state: RootState, displayName: string) => { From 78bb781534da5cb556cb0c6896d922467097c528 Mon Sep 17 00:00:00 2001 From: smallSohoSolo Date: Tue, 26 Jul 2022 23:21:06 +0800 Subject: [PATCH 081/148] chore: remove unused code --- .../EventHandler/eventHandlerConfig.tsx | 352 ------------------ 1 file changed, 352 deletions(-) delete mode 100644 src/page/App/components/Actions/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig.tsx diff --git a/src/page/App/components/Actions/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig.tsx b/src/page/App/components/Actions/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig.tsx deleted file mode 100644 index de36acef34..0000000000 --- a/src/page/App/components/Actions/ActionEditorPanel/ResourceEditor/EventHandler/eventHandlerConfig.tsx +++ /dev/null @@ -1,352 +0,0 @@ -import { PanelConfig } from "@/page/App/components/InspectPanel/interface" -import { VALIDATION_TYPES } from "@/utils/validationFactory" -import i18n from "@/i18n/config" - -const BASE_TYPE = "ACTION_TYPE" - -export const EVENT_HANDLER_CONFIG: PanelConfig[] = [ - { - id: `${BASE_TYPE}-interaction-success-event-handler`, - attrName: "successEvents", - labelName: i18n.t("Success"), - // labelDesc: i18n.t("xxxxx"), - setterType: "EVENT_HANDLER_SETTER", - defaultValue: "success", - useCustomLayout: true, - childrenSetter: [ - { - id: "event", - labelName: i18n.t("editor.inspect.setter_label.event"), - setterType: "BASE_SELECT_SETTER", - attrName: "eventType", - options: [{ label: "Success", value: "success" }], - }, - { - id: "action", - labelName: i18n.t("editor.inspect.setter_label.action"), - setterType: "EVENT_ACTION_SELECT_SETTER", - attrName: "actionType", - options: [ - { - label: "editor.inspect.setter_label.trigger_query", - value: "datasource", - }, - { - label: "editor.inspect.setter_label.control_component", - value: "widget", - }, - { - label: "editor.inspect.setter_label.run_script", - value: "script", - }, - { - label: "editor.inspect.setter_label.go_to_url", - value: "openUrl", - }, - { - label: "editor.inspect.setter_label.show_notification", - value: "showNotification", - }, - ], - }, - { - id: "query", - labelName: i18n.t("Query"), - setterType: "BASE_SELECT_SETTER", - attrName: "queryID", - bindAttrName: "actionType", - shown: (type) => type === "datasource", - }, - { - id: "component", - labelName: i18n.t("Component"), - setterType: "EVENT_TARGET_SELECT_SETTER", - attrName: "widgetID", - bindAttrName: "actionType", - shown: (type) => type === "widget", - }, - { - id: "Method", - labelName: i18n.t("Method"), - setterType: "EVENT_WIDGET_METHOD_SELECT_SETTER", - attrName: "widgetMethod", - bindAttrName: "widgetID", - shown: (widgetID) => !!widgetID, - }, - { - id: "Value", - labelName: i18n.t("Value"), - setterType: "INPUT_SETTER", - attrName: "widgetTargetValue", - bindAttrName: "widgetMethod", - shown: (widgetMethod) => widgetMethod === "setValue", - }, - { - id: "imageUrl", - labelName: i18n.t("Value"), - setterType: "INPUT_SETTER", - attrName: "widgetTargetValue", - bindAttrName: "widgetMethod", - shown: (widgetMethod) => widgetMethod === "setImageUrl", - }, - { - id: "disabled", - labelName: i18n.t("editor.inspect.setter_label.disabled"), - setterType: "DYNAMIC_SWITCH_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - attrName: "disabled", - bindAttrName: "type", - useCustomLayout: true, - shown: (type) => type === "widget", - }, - { - id: "script", - setterType: "INPUT_SETTER", - attrName: "script", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.STRING, - shown: (type) => type === "script", - }, - { - id: "URL", - labelName: i18n.t("URL"), - setterType: "INPUT_SETTER", - attrName: "url", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.STRING, - shown: (type) => type === "openUrl", - }, - { - id: "newTab", - labelName: i18n.t("New Tab"), - setterType: "DYNAMIC_SWITCH_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - attrName: "newTab", - bindAttrName: "actionType", - useCustomLayout: true, - shown: (type) => type === "openUrl", - }, - { - id: "title", - labelName: i18n.t("Title"), - setterType: "INPUT_SETTER", - attrName: "title", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.STRING, - shown: (type) => type === "showNotification", - }, - { - id: "description", - labelName: i18n.t("Description"), - setterType: "INPUT_SETTER", - expectedType: VALIDATION_TYPES.STRING, - attrName: "description", - bindAttrName: "actionType", - shown: (type) => type === "showNotification", - }, - { - id: "notification-type", - labelName: i18n.t("Type"), - setterType: "BASE_SELECT_SETTER", - attrName: "notificationType", - bindAttrName: "actionType", - shown: (type) => type === "showNotification", - options: [ - { label: "Success", value: "success" }, - { label: "Error", value: "error" }, - { label: "Warning", value: "warning" }, - { label: "Info", value: "info" }, - ], - }, - { - id: "duration", - labelName: i18n.t("Duration"), - setterType: "INPUT_SETTER", - attrName: "duration", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.NUMBER, - shown: (type) => type === "showNotification", - }, - { - id: "enabled", - labelName: i18n.t("Only run when"), - // labelDesc: i18n.t("xxxxx"), - setterType: "INPUT_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - attrName: "enabled", - }, - ], - }, - { - id: `${BASE_TYPE}-interaction-failed-event-handler`, - attrName: "failedEvents", - labelName: i18n.t("Failed"), - // labelDesc: i18n.t("xxxxx"), - setterType: "EVENT_HANDLER_SETTER", - defaultValue: "failed", - useCustomLayout: true, - childrenSetter: [ - { - id: "event", - labelName: i18n.t("editor.inspect.setter_label.event"), - setterType: "BASE_SELECT_SETTER", - attrName: "eventType", - options: [{ label: "Failed", value: "failed" }], - }, - { - id: "action", - labelName: i18n.t("editor.inspect.setter_label.action"), - setterType: "EVENT_ACTION_SELECT_SETTER", - attrName: "actionType", - options: [ - { - label: "editor.inspect.setter_label.trigger_query", - value: "datasource", - }, - { - label: "editor.inspect.setter_label.control_component", - value: "widget", - }, - { - label: "editor.inspect.setter_label.run_script", - value: "script", - }, - { - label: "editor.inspect.setter_label.go_to_url", - value: "openUrl", - }, - { - label: "editor.inspect.setter_label.show_notification", - value: "showNotification", - }, - ], - }, - { - id: "query", - labelName: i18n.t("Query"), - setterType: "BASE_SELECT_SETTER", - attrName: "queryID", - bindAttrName: "actionType", - shown: (type) => type === "datasource", - }, - { - id: "component", - labelName: i18n.t("Component"), - setterType: "EVENT_TARGET_SELECT_SETTER", - attrName: "widgetID", - bindAttrName: "actionType", - shown: (type) => type === "widget", - }, - { - id: "Method", - labelName: i18n.t("Method"), - setterType: "EVENT_WIDGET_METHOD_SELECT_SETTER", - attrName: "widgetMethod", - bindAttrName: "widgetID", - shown: (widgetID) => !!widgetID, - }, - { - id: "Value", - labelName: i18n.t("Value"), - setterType: "INPUT_SETTER", - attrName: "widgetTargetValue", - bindAttrName: "widgetMethod", - shown: (widgetMethod) => widgetMethod === "setValue", - }, - { - id: "imageUrl", - labelName: i18n.t("Value"), - setterType: "INPUT_SETTER", - attrName: "widgetTargetValue", - bindAttrName: "widgetMethod", - shown: (widgetMethod) => widgetMethod === "setImageUrl", - }, - { - id: "disabled", - labelName: i18n.t("editor.inspect.setter_label.disabled"), - setterType: "DYNAMIC_SWITCH_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - attrName: "disabled", - bindAttrName: "type", - useCustomLayout: true, - shown: (type) => type === "widget", - }, - { - id: "script", - setterType: "INPUT_SETTER", - attrName: "script", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.STRING, - shown: (type) => type === "script", - }, - { - id: "URL", - labelName: i18n.t("URL"), - setterType: "INPUT_SETTER", - attrName: "url", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.STRING, - shown: (type) => type === "openUrl", - }, - { - id: "newTab", - labelName: i18n.t("New Tab"), - setterType: "DYNAMIC_SWITCH_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - attrName: "newTab", - bindAttrName: "actionType", - useCustomLayout: true, - shown: (type) => type === "openUrl", - }, - { - id: "title", - labelName: i18n.t("Title"), - setterType: "INPUT_SETTER", - attrName: "title", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.STRING, - shown: (type) => type === "showNotification", - }, - { - id: "description", - labelName: i18n.t("Description"), - setterType: "INPUT_SETTER", - expectedType: VALIDATION_TYPES.STRING, - attrName: "description", - bindAttrName: "actionType", - shown: (type) => type === "showNotification", - }, - { - id: "notification-type", - labelName: i18n.t("Type"), - setterType: "BASE_SELECT_SETTER", - attrName: "notificationType", - bindAttrName: "actionType", - shown: (type) => type === "showNotification", - options: [ - { label: "Success", value: "success" }, - { label: "Error", value: "error" }, - { label: "Warning", value: "warning" }, - { label: "Info", value: "info" }, - ], - }, - { - id: "duration", - labelName: i18n.t("Duration"), - setterType: "INPUT_SETTER", - attrName: "duration", - bindAttrName: "actionType", - expectedType: VALIDATION_TYPES.NUMBER, - shown: (type) => type === "showNotification", - }, - { - id: "enabled", - labelName: i18n.t("Only run when"), - // labelDesc: i18n.t("xxxxx"), - setterType: "INPUT_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - attrName: "enabled", - }, - ], - }, -] From b1ee590556699dba32ec6cb92ad690d2ba22e457 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Wed, 27 Jul 2022 10:32:05 +0800 Subject: [PATCH 082/148] fix: types error --- src/components/CodeEditor/index.tsx | 3 +- src/components/CodeEditor/interface.ts | 6 +-- .../App/components/InspectPanel/interface.ts | 3 +- .../App/components/InspectPanel/setter.tsx | 2 + .../PanelSetters/ChartSetter/interface.ts | 4 +- .../DateRangeValueSetter/index.tsx | 49 ------------------- .../PanelSetters/EventHandlerSetter/style.ts | 0 .../PanelSetters/InputSetter/baseInput.tsx | 3 +- .../PanelSetters/InputSetter/interface.ts | 8 ++- .../InputSetter/optionMappedInputSetter.tsx | 2 +- .../PanelSetters/ListSetter/index.tsx | 12 +---- .../SelectSetter/dynamicSelect.tsx | 21 ++------ .../SwitchSetter/dynamicSwitch.tsx | 13 +---- src/page/Setting/SettingAccount/index.tsx | 2 +- src/page/Setting/SettingOthers/index.tsx | 2 +- src/page/Setting/SettingPassword/index.tsx | 2 +- src/utils/validationFactory/index.ts | 8 --- src/utils/worker/index.ts | 0 .../BarProgressWidget/panelConfig.tsx | 3 +- .../CircleProgressWidget/panelConfig.tsx | 3 +- .../DividerWidget/panelConfig.tsx | 3 +- src/widgetLibrary/ImageWidget/panelConfig.tsx | 3 +- 22 files changed, 35 insertions(+), 117 deletions(-) delete mode 100644 src/page/App/components/PanelSetters/DateRangeValueSetter/index.tsx delete mode 100644 src/page/App/components/PanelSetters/EventHandlerSetter/style.ts delete mode 100644 src/utils/worker/index.ts diff --git a/src/components/CodeEditor/index.tsx b/src/components/CodeEditor/index.tsx index 16f052a710..68cf4d6b4a 100644 --- a/src/components/CodeEditor/index.tsx +++ b/src/components/CodeEditor/index.tsx @@ -28,13 +28,14 @@ import { getExecutionResult, } from "@/redux/currentApp/executionTree/execution/executionSelector" import { clearMarks, lineMarker } from "@/components/CodeEditor/lintHelper" +import { VALIDATION_TYPES } from "@/utils/validationFactory" export const CodeEditor: FC = (props) => { const { className, mode = "TEXT_JS", placeholder, - expectedType = "String", + expectedType = VALIDATION_TYPES.STRING, borderRadius = "8px", path, tables = {}, diff --git a/src/components/CodeEditor/interface.ts b/src/components/CodeEditor/interface.ts index 6c7a8a1e03..b2558181f1 100644 --- a/src/components/CodeEditor/interface.ts +++ b/src/components/CodeEditor/interface.ts @@ -1,5 +1,5 @@ import { HTMLAttributes } from "react" -import { ExpectedType } from "./utils" +import { VALIDATION_TYPES } from "@/utils/validationFactory" export enum EditorModes { TEXT = "text/plain", @@ -14,7 +14,7 @@ export interface CodeEditorProps extends Omit, "onChange"> { mode: "TEXT_JS" | "SQL_JS" | "SQL" | "JAVASCRIPT" value?: string - expectedType: ExpectedType + expectedType: VALIDATION_TYPES // Whether to show line numbers to the left of the editor. lineNumbers?: boolean readOnly?: boolean @@ -49,7 +49,7 @@ export type FieldEntityInformation = { export interface ResultPreview { state?: "default" | "error" - type?: ExpectedType + type?: VALIDATION_TYPES content?: string } diff --git a/src/page/App/components/InspectPanel/interface.ts b/src/page/App/components/InspectPanel/interface.ts index 25a4a723ce..5d7563dd04 100644 --- a/src/page/App/components/InspectPanel/interface.ts +++ b/src/page/App/components/InspectPanel/interface.ts @@ -1,5 +1,6 @@ import { SetterType } from "@/page/App/components/PanelSetters" import { VALIDATION_TYPES } from "@/utils/validationFactory" +import { EditableInputIconType } from "@/page/App/components/PanelSetters/InputSetter/interface" export interface PanelHeaderActionProps { widgetDisplayName: string @@ -23,7 +24,7 @@ export interface PanelFieldConfig extends PanelLabelProps { isSetterSingleRow?: boolean defaultValue?: any placeholder?: string - iconName?: string + iconName?: EditableInputIconType shown?: (value: any | { [attrName: string]: any }) => boolean bindAttrName?: string | string[] } diff --git a/src/page/App/components/InspectPanel/setter.tsx b/src/page/App/components/InspectPanel/setter.tsx index 772aa79ab8..f293f0bd3e 100644 --- a/src/page/App/components/InspectPanel/setter.tsx +++ b/src/page/App/components/InspectPanel/setter.tsx @@ -21,6 +21,7 @@ export const Setter: FC = (props) => { parentAttrName, expectedType, defaultValue, + iconName, } = props const Comp = getSetterByType(setterType) @@ -95,6 +96,7 @@ export const Setter: FC = (props) => { parentAttrName={parentAttrName} widgetOrAction={widgetOrAction} defaultValue={defaultValue} + iconName={iconName} />
    ) : null diff --git a/src/page/App/components/PanelSetters/ChartSetter/interface.ts b/src/page/App/components/PanelSetters/ChartSetter/interface.ts index 15a821a8c5..08ecf31404 100644 --- a/src/page/App/components/PanelSetters/ChartSetter/interface.ts +++ b/src/page/App/components/PanelSetters/ChartSetter/interface.ts @@ -1,5 +1,3 @@ import { BaseSetter } from "@/page/App/components/PanelSetters/interface" -export interface RemoveButtonSetter extends BaseSetter { - index: number -} +export interface RemoveButtonSetter extends BaseSetter {} diff --git a/src/page/App/components/PanelSetters/DateRangeValueSetter/index.tsx b/src/page/App/components/PanelSetters/DateRangeValueSetter/index.tsx deleted file mode 100644 index f16295fe73..0000000000 --- a/src/page/App/components/PanelSetters/DateRangeValueSetter/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { FC, useEffect, useState } from "react" -import { PanelLabel } from "@/page/App/components/InspectPanel/label" -import { BaseInput } from "@/page/App/components/PanelSetters/InputSetter/baseInput" -import { DateRangeValueSetterProps } from "./interface" -import { setterContainerStyle } from "./style" - -const START_DATE_KEY = "start-date" -const END_DATE_KEY = "end-date" - -export const DateRangeValueSetter: FC = (props) => { - const { attrName, panelConfig, handleUpdateDsl, widgetDisplayName } = props - - const [values, setValues] = useState(panelConfig[attrName]) - - useEffect(() => { - setValues([panelConfig[START_DATE_KEY], panelConfig[END_DATE_KEY]]) - }, [panelConfig[START_DATE_KEY], panelConfig[END_DATE_KEY]]) - - useEffect(() => { - handleUpdateDsl(attrName, values) - }, [values]) - - return ( - <> -
    - - -
    -
    - - -
    - - ) -} - -BaseInput.displayName = "BaseInput" diff --git a/src/page/App/components/PanelSetters/EventHandlerSetter/style.ts b/src/page/App/components/PanelSetters/EventHandlerSetter/style.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/page/App/components/PanelSetters/InputSetter/baseInput.tsx b/src/page/App/components/PanelSetters/InputSetter/baseInput.tsx index 704f359f6c..5a08b4bfd4 100644 --- a/src/page/App/components/PanelSetters/InputSetter/baseInput.tsx +++ b/src/page/App/components/PanelSetters/InputSetter/baseInput.tsx @@ -2,7 +2,6 @@ import { FC, useMemo } from "react" import { BaseInputSetterProps } from "./interface" import { applyInputSetterWrapperStyle } from "./style" import { CodeEditor } from "@/components/CodeEditor" -import { VALIDATION_TYPES_TRANS } from "@/utils/validationFactory" function getPath(attrName?: string, widgetDisplayName?: string) { if (attrName && widgetDisplayName) { @@ -41,7 +40,7 @@ export const BaseInput: FC = (props) => { handleUpdateDsl(attrName, value) }} mode={"TEXT_JS"} - expectedType={VALIDATION_TYPES_TRANS[expectedType]} + expectedType={expectedType} path={getPath(attrName, widgetDisplayName)} /> diff --git a/src/page/App/components/PanelSetters/InputSetter/interface.ts b/src/page/App/components/PanelSetters/InputSetter/interface.ts index 1eee37224e..59ac57565b 100644 --- a/src/page/App/components/PanelSetters/InputSetter/interface.ts +++ b/src/page/App/components/PanelSetters/InputSetter/interface.ts @@ -4,6 +4,12 @@ export interface BaseInputSetterProps extends BaseSetter { placeholder?: string } +export enum EditableInputIconType { + RADIUS = "radius", + STROKE_WIDTH = "strokeWidth", + TEXT_SIZE = "textSize", +} + export interface EditableInputSetterProps extends BaseInputSetterProps { - iconName?: "radius" | "strokeWidth" | "textSize" + iconName?: EditableInputIconType } diff --git a/src/page/App/components/PanelSetters/InputSetter/optionMappedInputSetter.tsx b/src/page/App/components/PanelSetters/InputSetter/optionMappedInputSetter.tsx index 1a60beb25f..d5a8bbcaca 100644 --- a/src/page/App/components/PanelSetters/InputSetter/optionMappedInputSetter.tsx +++ b/src/page/App/components/PanelSetters/InputSetter/optionMappedInputSetter.tsx @@ -46,4 +46,4 @@ export const OptionMappedInputSetter: FC = (props) => { ) } -OptionMappedInputSetter.displayName = "BaseInput" +OptionMappedInputSetter.displayName = "OptionMappedInputSetter" diff --git a/src/page/App/components/PanelSetters/ListSetter/index.tsx b/src/page/App/components/PanelSetters/ListSetter/index.tsx index b7fbead77c..a61e205b46 100644 --- a/src/page/App/components/PanelSetters/ListSetter/index.tsx +++ b/src/page/App/components/PanelSetters/ListSetter/index.tsx @@ -16,12 +16,8 @@ import { useTranslation } from "react-i18next" export const ListSetter: FC = (props) => { const { labelName, - labelNameOption, labelDesc, - labelDescOption, - transComponents, childrenSetter, - attrName, handleUpdateDsl, widgetDisplayName, panelConfig, @@ -61,13 +57,7 @@ export const ListSetter: FC = (props) => { return (
    - + {canReset && (
    diff --git a/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx b/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx index 5a2dc16001..a0dfe2f2d2 100644 --- a/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx +++ b/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx @@ -1,11 +1,6 @@ -import { FC, useContext, useEffect, useMemo } from "react" +import { FC, useEffect, useMemo } from "react" import { DynamicSelectSetterProps } from "./interface" - -import { - dynamicSelectHeaderStyle, - dynamicSelectStyle, - useTypeTextStyle, -} from "./style" +import { dynamicSelectHeaderStyle, useTypeTextStyle } from "./style" import { Select } from "@illa-design/select" import { applyInputSetterWrapperStyle } from "@/page/App/components/PanelSetters/InputSetter/style" import { CodeEditor } from "@/components/CodeEditor" @@ -41,13 +36,9 @@ export const DynamicSelectSetter: FC = (props) => { handleUpdateDsl, panelConfig, labelName, - labelNameOption, labelDesc, - labelDescOption, - transComponents, isSetterSingleRow, widgetDisplayName, - expectedType, } = props const isUseJsKey = attrName + INPUT_MODE_SUFFIX @@ -72,13 +63,7 @@ export const DynamicSelectSetter: FC = (props) => { return (
    - + { diff --git a/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx b/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx index 6e9fc1bf5d..86a1dda2b0 100644 --- a/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx +++ b/src/page/App/components/PanelSetters/SwitchSetter/dynamicSwitch.tsx @@ -12,17 +12,13 @@ import { dynamicSwitchWrapperStyle, } from "./style" import { BaseInput } from "../InputSetter/baseInput" -import { useTranslation } from "react-i18next" import { VALIDATION_TYPES } from "@/utils/validationFactory" export const DynamicSwitchSetter: FC = (props) => { const { attrName, labelName, - labelNameOption, labelDesc, - labelDescOption, - transComponents, panelConfig, handleUpdateDsl, value, @@ -30,7 +26,6 @@ export const DynamicSwitchSetter: FC = (props) => { expectedType, widgetOrAction, } = props - const { t } = useTranslation() const dynamicAttrPath = get(panelConfig, "$dynamicAttrPaths", []) @@ -39,13 +34,7 @@ export const DynamicSwitchSetter: FC = (props) => { return (
    - +
    {
    diff --git a/src/page/App/components/Actions/ActionPanel/ActionTitleBar/interface.ts b/src/page/App/components/Actions/ActionPanel/ActionTitleBar/interface.ts deleted file mode 100644 index eac44d96d7..0000000000 --- a/src/page/App/components/Actions/ActionPanel/ActionTitleBar/interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { HTMLAttributes } from "react" -import { ActionItem } from "@/redux/currentApp/action/actionState" - -export interface ActionTitleBarProps extends HTMLAttributes {} diff --git a/src/page/App/components/Actions/ActionPanel/ActionTitleBar/style.ts b/src/page/App/components/Actions/ActionPanel/ActionTitleBar/style.ts new file mode 100644 index 0000000000..8af41cbda9 --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/ActionTitleBar/style.ts @@ -0,0 +1,25 @@ +import { css } from "@emotion/react" +import { globalColor, illaPrefix } from "@illa-design/theme" + +export const actionTitleBarStyle = css` + display: flex; + min-width: 700px; + flex-direction: row; + align-items: center; + padding: 0 16px; + border-bottom: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; + min-height: 48px; +` + +export const actionTitleBarDisplayNameStyle = css` + width: 280px; +` + +export const actionTitleBarSpaceStyle = css` + flex-grow: 1; + min-width: 8px; +` + +export const actionTitleBarRunStyle = css` + margin-left: 8px; +` diff --git a/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx b/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx index 9dede02c61..b4722a6b29 100644 --- a/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx +++ b/src/page/App/components/Actions/ActionPanel/MysqlPanel/index.tsx @@ -1,18 +1,31 @@ import { FC } from "react" -import { ActionPanelProps } from "@/page/App/components/Actions/ActionPanel/interface" -import { mysqlContainerStyle } from "@/page/App/components/Actions/ActionPanel/MysqlPanel/style" +import { + mysqlContainerStyle, + sqlInputStyle, +} from "@/page/App/components/Actions/ActionPanel/MysqlPanel/style" import { ResourceChoose } from "@/page/App/components/Actions/ActionPanel/ResourceChoose" -import { MysqlAction } from "@/redux/currentApp/action/actionState" import { useDispatch, useSelector } from "react-redux" import { getSelectedAction } from "@/redux/config/configSelector" +import { CodeEditor } from "@/components/CodeEditor" +import { TransformerComponent } from "@/page/App/components/Actions/ActionPanel/TransformerComponent" -export const MysqlPanel: FC> = () => { - const action = useSelector(getSelectedAction) +export const MysqlPanel: FC = () => { + const action = useSelector(getSelectedAction)!! const dispatch = useDispatch() return (
    + +
    ) } diff --git a/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts b/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts index 4780f21a29..5f32264bfc 100644 --- a/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts +++ b/src/page/App/components/Actions/ActionPanel/MysqlPanel/style.ts @@ -1,8 +1,14 @@ import { css } from "@emotion/react" export const mysqlContainerStyle = css` + padding-bottom: 48px; width: 100%; min-width: 700px; + overflow-y: auto; display: flex; flex-direction: column; ` + +export const sqlInputStyle = css` + margin: 16px 16px 8px 16px; +` diff --git a/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx b/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx index a36617d0d2..a0deb4fc00 100644 --- a/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx +++ b/src/page/App/components/Actions/ActionPanel/ResourceChoose/index.tsx @@ -18,7 +18,7 @@ import { ButtonProps } from "@illa-design/button" export const ResourceChoose: FC = () => { const { t } = useTranslation() const dispatch = useDispatch() - const action = useSelector(getSelectedAction) + const action = useSelector(getSelectedAction)!! const resourceList = useSelector(getAllResources) return ( diff --git a/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts b/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts index 9781611e11..1c774c760c 100644 --- a/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts +++ b/src/page/App/components/Actions/ActionPanel/ResourceChoose/style.ts @@ -6,7 +6,7 @@ export const resourceChooseContainerStyle = css` align-items: center; padding: 0 16px; flex-direction: row; - height: 64px; + min-height: 64px; border-bottom: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; ` diff --git a/src/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx b/src/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx index cc620a5330..c88ccae4ec 100644 --- a/src/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx +++ b/src/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx @@ -1,8 +1,6 @@ import { FC } from "react" -import { ActionPanelProps } from "@/page/App/components/Actions/ActionPanel/interface" -import { RestApiAction } from "@/redux/currentApp/action/actionState" -export const RestApiPanel: FC> = () => { +export const RestApiPanel: FC = () => { return
    } diff --git a/src/page/App/components/Actions/ActionPanel/TransformerComponent/index.tsx b/src/page/App/components/Actions/ActionPanel/TransformerComponent/index.tsx new file mode 100644 index 0000000000..5c06567e9b --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/TransformerComponent/index.tsx @@ -0,0 +1,32 @@ +import { FC } from "react" +import { + codeMirrorStyle, + transformTitleStyle, +} from "@/page/App/components/Actions/ActionPanel/TransformerComponent/style" +import { CodeEditor } from "@/components/CodeEditor" +import { useSelector } from "react-redux" +import { getSelectedAction } from "@/redux/config/configSelector" + +export const TransformerComponent: FC = () => { + const action = useSelector(getSelectedAction)!! + + return ( +
    +
    + row.quantity > 20)\n" + + "return data" + } + css={codeMirrorStyle} + lineNumbers + height="88px" + expectedType="String" + mode="JAVASCRIPT" + /> +
    + ) +} + +TransformerComponent.displayName = "TransformerComponent" diff --git a/src/page/App/components/Actions/ActionPanel/TransformerComponent/style.ts b/src/page/App/components/Actions/ActionPanel/TransformerComponent/style.ts new file mode 100644 index 0000000000..d964fe1b71 --- /dev/null +++ b/src/page/App/components/Actions/ActionPanel/TransformerComponent/style.ts @@ -0,0 +1,11 @@ +import { css } from "@emotion/react" + +export const transformTitleStyle = css` + height: 48px; + display: flex; + flex-direction: row; +` + +export const codeMirrorStyle = css` + margin: 8px 16px; +` diff --git a/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx b/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx index 5ce8c42988..4e6d81c77f 100644 --- a/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx +++ b/src/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx @@ -1,8 +1,6 @@ import { FC } from "react" -import { ActionPanelProps } from "@/page/App/components/Actions/ActionPanel/interface" -import { TransformerAction } from "@/redux/currentApp/action/actionState" -export const TransformerPanel: FC> = () => { +export const TransformerPanel: FC = () => { return
    } diff --git a/src/page/App/components/Actions/ActionPanel/interface.ts b/src/page/App/components/Actions/ActionPanel/interface.ts deleted file mode 100644 index 524cc8d5cd..0000000000 --- a/src/page/App/components/Actions/ActionPanel/interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { HTMLAttributes } from "react" -import { ActionContent } from "@/redux/currentApp/action/actionState" - -export interface ActionPanelProps - extends HTMLAttributes {} diff --git a/src/page/App/components/Actions/ActionPanel/style.ts b/src/page/App/components/Actions/ActionPanel/style.ts index 5c7820459e..fab0534574 100644 --- a/src/page/App/components/Actions/ActionPanel/style.ts +++ b/src/page/App/components/Actions/ActionPanel/style.ts @@ -1,5 +1,4 @@ import { css } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" export const actionPanelStyle = css` flex-grow: 1; @@ -9,26 +8,3 @@ export const actionPanelStyle = css` display: flex; flex-direction: column; ` - -export const actionTitleBarStyle = css` - display: flex; - min-width: 700px; - flex-direction: row; - align-items: center; - padding: 0 16px; - border-bottom: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; - height: 48px; -` - -export const actionTitleBarDisplayNameStyle = css` - width: 280px; -` - -export const actionTitleBarSpaceStyle = css` - flex-grow: 1; - min-width: 8px; -` - -export const actionTitleBarRunStyle = css` - margin-left: 8px; -` diff --git a/src/page/App/components/PanelSetters/EventHandlerSetter/style.ts b/src/page/App/components/PanelSetters/EventHandlerSetter/style.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx b/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx index 5a2dc16001..6c69c2012a 100644 --- a/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx +++ b/src/page/App/components/PanelSetters/SelectSetter/dynamicSelect.tsx @@ -1,11 +1,7 @@ -import { FC, useContext, useEffect, useMemo } from "react" +import { FC, useEffect, useMemo } from "react" import { DynamicSelectSetterProps } from "./interface" -import { - dynamicSelectHeaderStyle, - dynamicSelectStyle, - useTypeTextStyle, -} from "./style" +import { dynamicSelectHeaderStyle, useTypeTextStyle } from "./style" import { Select } from "@illa-design/select" import { applyInputSetterWrapperStyle } from "@/page/App/components/PanelSetters/InputSetter/style" import { CodeEditor } from "@/components/CodeEditor" @@ -41,13 +37,10 @@ export const DynamicSelectSetter: FC = (props) => { handleUpdateDsl, panelConfig, labelName, - labelNameOption, labelDesc, - labelDescOption, - transComponents, isSetterSingleRow, widgetDisplayName, - expectedType, + isInList, } = props const isUseJsKey = attrName + INPUT_MODE_SUFFIX @@ -75,9 +68,7 @@ export const DynamicSelectSetter: FC = (props) => { = (props) => { handleUpdateDsl(jsValue, value) }} path={getPath(attrName, widgetDisplayName)} - mode={"TEXT_JS"} - expectedType={VALIDATION_TYPES.STRING} + mode="TEXT_JS" + expectedType="String" />
    ) : ( diff --git a/src/redux/config/configSelector.ts b/src/redux/config/configSelector.ts index f9632f3cbd..5cf0dc8c1f 100644 --- a/src/redux/config/configSelector.ts +++ b/src/redux/config/configSelector.ts @@ -39,9 +39,11 @@ export const getSelectedAction = (state: RootState) => { export const isCurrentSelectedActionChanged = (state: RootState) => { const originAction = state.currentApp.action.find((v) => { - return v.displayName === state.config.selectedAction.displayName + return v.displayName === state.config.selectedAction?.displayName }) - return state.config.selectedAction !== originAction + return ( + JSON.stringify(state.config.selectedAction) !== JSON.stringify(originAction) + ) } export const isSelected = (state: RootState, displayName: string) => { diff --git a/src/redux/config/configState.ts b/src/redux/config/configState.ts index 01d0953f0b..be5b9f39a7 100644 --- a/src/redux/config/configState.ts +++ b/src/redux/config/configState.ts @@ -1,5 +1,8 @@ import { ComponentNode } from "@/redux/currentApp/editor/components/componentsState" -import { ActionItem } from "@/redux/currentApp/action/actionState" +import { + ActionContent, + ActionItem, +} from "@/redux/currentApp/action/actionState" export type IllaMode = "preview" | "edit" | "production" @@ -10,7 +13,7 @@ export interface ConfigState { showDot: boolean scale: number selectedComponents: ComponentNode[] - selectedAction: ActionItem | null + selectedAction: ActionItem | null expandedKeys: string[] mode: IllaMode } From a4d52230d53a5a1010b4f1b29a7a5cf9846b570b Mon Sep 17 00:00:00 2001 From: AruSeito Date: Wed, 27 Jul 2022 14:24:12 +0800 Subject: [PATCH 084/148] fix: apps bug --- src/i18n/locale/zh-CN.json | 2 +- src/page/Dashboard/DashboardApps/index.tsx | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index e85f5594c0..2cd471cff7 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -706,7 +706,7 @@ "delete_content": "删除将中断使用此资源的应用程序和查询库查询", "delete_cancel_text": "取消", "delete_ok_text": "删除", - "delete": "移到回收站", + "delete": "删除", "error_title": "错误", "error_description": "请求错误", "error_button": "重试" diff --git a/src/page/Dashboard/DashboardApps/index.tsx b/src/page/Dashboard/DashboardApps/index.tsx index 24bc51f6fb..6a37376898 100644 --- a/src/page/Dashboard/DashboardApps/index.tsx +++ b/src/page/Dashboard/DashboardApps/index.tsx @@ -333,12 +333,17 @@ export const DashboardApps: FC = () => { Message.error(t("dashboard.app.name_empty")) return } + if (sortedAppsList.some((item) => item.appName === renameValue)) { + Message.error(t("dashboard.app.name_existed")) + return + } renameRequest() }} > { setRenameValue(res) }} From c68df6612f54863fdbec24c3957943f98518112f Mon Sep 17 00:00:00 2001 From: AruSeito Date: Wed, 27 Jul 2022 14:58:03 +0800 Subject: [PATCH 085/148] fix: update dynmaic when add components --- .../currentApp/editor/components/componentsReducer.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/redux/currentApp/editor/components/componentsReducer.ts b/src/redux/currentApp/editor/components/componentsReducer.ts index c501b5d7c3..9f0363be5b 100644 --- a/src/redux/currentApp/editor/components/componentsReducer.ts +++ b/src/redux/currentApp/editor/components/componentsReducer.ts @@ -69,6 +69,13 @@ export const addComponentReducer: CaseReducer< } else { const parentNode = searchDsl(state, dealNode.parentNode) if (parentNode != null) { + if (dealNode.props) { + dealNode.props = getNewWidgetPropsByUpdateSlice( + dealNode.displayName, + dealNode.props ?? {}, + dealNode.props ?? {}, + ) + } parentNode.childrenNode.push(dealNode) } } From d36ff65b45ac4eae972cfa67ccf329bdba0f5fb1 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Wed, 27 Jul 2022 15:17:54 +0800 Subject: [PATCH 086/148] fix: select error --- .../PublicSector/utils/formatSelectOptions.ts | 30 +++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/src/widgetLibrary/PublicSector/utils/formatSelectOptions.ts b/src/widgetLibrary/PublicSector/utils/formatSelectOptions.ts index 10cea3966f..c1ad8016e7 100644 --- a/src/widgetLibrary/PublicSector/utils/formatSelectOptions.ts +++ b/src/widgetLibrary/PublicSector/utils/formatSelectOptions.ts @@ -1,3 +1,4 @@ +// TODO:@aruseito - abstract this function to a common library export const formatSelectOptions = ( optionConfigureMode: "dynamic" | "static" = "static", manualOptions: { @@ -28,9 +29,12 @@ export const formatSelectOptions = ( extra?: any }[] = [] for (let i = 0; i < maxLength; i++) { - const labelItem = label[i] || value[i] || i + let labelItem = label[i] || value[i] || i const valueItem = value[i] || label[i] || i const disabledItem = !!disabled[i] + if (typeof labelItem === "object") { + labelItem = i + } options.push({ label: labelItem, value: valueItem, @@ -39,6 +43,28 @@ export const formatSelectOptions = ( } return options } else { - return manualOptions ?? [] + if (!Array.isArray(manualOptions)) { + return [] + } + const options: { + label: string | number + value: string | number + disabled?: boolean + extra?: any + }[] = [] + manualOptions.forEach((option, index) => { + let labelItem = option.label || option.value || index + const valueItem = option.value || labelItem || index + const disabledItem = option.disabled + if (typeof labelItem === "object") { + labelItem = index + } + options.push({ + label: labelItem, + value: valueItem, + disabled: disabledItem, + }) + }) + return options } } From b84d62ec36e43322e607b996d29fe23ef34afc47 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Wed, 27 Jul 2022 16:18:56 +0800 Subject: [PATCH 087/148] fix: format panel config --- illa-design | 2 +- src/i18n/locale/en-US.json | 16 +- src/i18n/locale/zh-CN.json | 20 +- .../ActionEditor/ActionList/index.tsx | 2 +- .../BarProgressWidget/panelConfig.tsx | 41 +-- .../ButtonWidget/panelConfig.tsx | 268 ++--------------- src/widgetLibrary/Chart/panelConfig.tsx | 25 +- .../CheckboxGroupWidget/panelConfig.tsx | 14 +- .../CircleProgressWidget/panelConfig.tsx | 29 +- .../DateRangeWidget/panelConfig.tsx | 61 ++-- .../DateTimeWidget/panelConfig.tsx | 63 ++-- src/widgetLibrary/DateWidget/panelConfig.tsx | 57 ++-- .../DividerWidget/panelConfig.tsx | 17 +- .../EditableWidget/panelConfig.tsx | 63 ++-- src/widgetLibrary/ImageWidget/panelConfig.tsx | 34 +-- src/widgetLibrary/InputWidget/panelConfig.tsx | 65 +++-- .../NumberInputWidget/panelConfig.tsx | 5 +- .../utils/generatorEventHanlderConfig.ts | 274 ++++++++++++++++++ .../RadioButtonWidget/panelConfig.tsx | 16 +- .../RadioGroupWidget/panelConfig.tsx | 59 ++-- src/widgetLibrary/RateWidget/panelConfig.tsx | 47 +-- .../SelectWidget/panelConfig.tsx | 67 ++--- .../SwitchWidget/panelConfig.tsx | 35 +-- src/widgetLibrary/TextWidget/panelConfig.tsx | 27 +- .../TimelineWidget/panelConfig.tsx | 4 +- 25 files changed, 686 insertions(+), 625 deletions(-) create mode 100644 src/widgetLibrary/PublicSector/utils/generatorEventHanlderConfig.ts diff --git a/illa-design b/illa-design index 94734d1921..cb2acb0d1f 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit 94734d1921fbd51d81395ae6ac364783fe24debd +Subproject commit cb2acb0d1f3f67aa27ce275630aac161e2c59c9d diff --git a/src/i18n/locale/en-US.json b/src/i18n/locale/en-US.json index 8edcf1021c..a6d94b3e07 100644 --- a/src/i18n/locale/en-US.json +++ b/src/i18n/locale/en-US.json @@ -548,7 +548,10 @@ "name": "Dataset name", "value": "Dataset values", "remove": "Remove dataset" - } + }, + "new_tab": "New tab", + "description": "Description", + "duration":"Duration" }, "setter_tooltip": { "text_value": "You can choose to enter value either in Markdown mode or Plain text mode. Only links in markdown mode can be recognized", @@ -568,11 +571,18 @@ "date_format": "A valid date format string. See [dayJS](https://day.js.org/docs/en/parse/string-format)", "loading": "Whether the component should show a loading indicator.", "progress_percentage": "The percentage value is between 0 and 100", - "timeline_direction": "Change the direction of the timeline." + "timeline_direction": "Change the direction of the timeline.", + "only_run_when": "Conditions that must be met before the event executes" }, "setter_default_value": { "fill": "Fill", - "outline": "Outline" + "outline": "Outline", + "message_type": { + "success": "Success", + "info": "Info", + "warning": "Warning", + "error": "Error" + } }, "setter_content": { "option_list": { diff --git a/src/i18n/locale/zh-CN.json b/src/i18n/locale/zh-CN.json index 2cd471cff7..2f9350d69c 100644 --- a/src/i18n/locale/zh-CN.json +++ b/src/i18n/locale/zh-CN.json @@ -538,17 +538,20 @@ "group_by": "Group by", "datasets": "Datasets", "dataset_config": "Dataset config", - "title": "Title", + "title": " 标题", "x_axis_title": "X-axis title", "x_axis_type": "X-axis type", "y_axis_title": "Y-axis title", "legend_position": "Legend position", - "only_run_when": "执行条件", + "only_run_when": "先决条件", "dataset": { "name": "Dataset name", "value": "Dataset values", "remove": "Remove dataset" - } + }, + "new_tab": "在新标签中打开", + "description": "描述", + "duration":"持续时间" }, "setter_tooltip": { "text_value": "您可以选择在 Markdown 模式或纯文本模式下输入值。只有在 Markdown 模式下可以输入链接。", @@ -568,11 +571,18 @@ "date_format": "一个符合规范的时间格式，请参考 [dayJs](https://day.js.org/docs/en/parse/string-format)", "loading": "控制组件是否为加载状态。", "progress_percentage": "进度条的数值范围为 0-100", - "timeline_direction": "切换时间轴的方向" + "timeline_direction": "切换时间轴的方向", + "only_run_when": "在此输入该事件执行前必须满足的条件" }, "setter_default_value": { "fill": "填充", - "outline": "描边" + "outline": "描边", + "message_type": { + "success": "成功", + "info": "信息", + "warning": "警告", + "error": "错误" + } }, "setter_content": { "option_list": { diff --git a/src/page/App/components/ActionEditor/ActionList/index.tsx b/src/page/App/components/ActionEditor/ActionList/index.tsx index b3217fda63..e15e71a252 100644 --- a/src/page/App/components/ActionEditor/ActionList/index.tsx +++ b/src/page/App/components/ActionEditor/ActionList/index.tsx @@ -249,7 +249,7 @@ export const ActionList: FC = (props) => {
    ) } @@ -72,12 +60,10 @@ export const DateWidget: FC = (props) => { dateFormat, placeholder, showClear, - required, minDate, disabled, maxDate, readOnly, - hideValidationMessage, colorScheme, handleUpdateDsl, displayName, @@ -91,12 +77,10 @@ export const DateWidget: FC = (props) => { dateFormat, placeholder, showClear, - required, minDate, disabled, maxDate, readOnly, - hideValidationMessage, colorScheme, displayName, setValue: (value: string) => { @@ -115,12 +99,10 @@ export const DateWidget: FC = (props) => { dateFormat, placeholder, showClear, - required, minDate, disabled, maxDate, readOnly, - hideValidationMessage, colorScheme, ]) diff --git a/src/widgetLibrary/DateWidget/interface.tsx b/src/widgetLibrary/DateWidget/interface.tsx index a94193a461..888d9792cc 100644 --- a/src/widgetLibrary/DateWidget/interface.tsx +++ b/src/widgetLibrary/DateWidget/interface.tsx @@ -1,16 +1,12 @@ import { ReactNode } from "react" import { DatePickerProps } from "@illa-design/date-picker" -import { ValidateMessageProps } from "@/widgetLibrary/PublicSector/InvalidMessage/interface" import { BaseWidgetProps } from "@/widgetLibrary/interface" -export type alignmentType = "start" | "center" | "end" | "fullWidth" - export interface WrappedDateProps - extends ValidateMessageProps, - Pick< - DatePickerProps, - "value" | "readOnly" | "disabled" | "placeholder" | "colorScheme" - > { + extends Pick< + DatePickerProps, + "value" | "readOnly" | "disabled" | "placeholder" | "colorScheme" + > { value?: string dateFormat?: string loading?: boolean diff --git a/src/widgetLibrary/EditableWidget/editableText.tsx b/src/widgetLibrary/EditableWidget/editableText.tsx index b966e02809..f35155811f 100644 --- a/src/widgetLibrary/EditableWidget/editableText.tsx +++ b/src/widgetLibrary/EditableWidget/editableText.tsx @@ -1,7 +1,6 @@ import { FC, useEffect, useRef, useState } from "react" import { PenIcon } from "@illa-design/icon" import { Input } from "@illa-design/input" -import { InvalidMessage } from "@/widgetLibrary/PublicSector/InvalidMessage" import { containerStyle } from "@/widgetLibrary/PublicSector/containerStyle" import { EditableTextWidgetProps, WrappedEditableTextProps } from "./interface" import { applyTextCss } from "./style" @@ -19,13 +18,8 @@ export const WrappedEditableText: FC = (props) => { showCharacterCount, colorScheme, handleUpdateDsl, - pattern, - regex, - minLength, maxLength, - required, - customRule, - hideValidationMessage, + minLength, allowClear, } = props @@ -56,6 +50,7 @@ export const WrappedEditableText: FC = (props) => { disabled={disabled} borderColor={colorScheme} maxLength={maxLength} + minLength={minLength} onClear={() => handleUpdateDsl({ value: "" })} /> ) : ( @@ -69,17 +64,6 @@ export const WrappedEditableText: FC = (props) => { )} - -
    ) } @@ -97,13 +81,8 @@ export const EditableTextWidget: FC = (props) => { suffixText, showCharacterCount, colorScheme, - pattern, - regex, minLength, maxLength, - required, - customRule, - hideValidationMessage, allowClear, displayName, handleUpdateGlobalData, @@ -123,13 +102,8 @@ export const EditableTextWidget: FC = (props) => { suffixText, showCharacterCount, colorScheme, - pattern, - regex, minLength, maxLength, - required, - customRule, - hideValidationMessage, allowClear, setValue: (value: string) => { handleUpdateDsl({ value }) @@ -153,13 +127,8 @@ export const EditableTextWidget: FC = (props) => { suffixText, showCharacterCount, colorScheme, - pattern, - regex, minLength, maxLength, - required, - customRule, - hideValidationMessage, allowClear, ]) return diff --git a/src/widgetLibrary/EditableWidget/interface.ts b/src/widgetLibrary/EditableWidget/interface.ts index 6e6e34ed5b..133bef1767 100644 --- a/src/widgetLibrary/EditableWidget/interface.ts +++ b/src/widgetLibrary/EditableWidget/interface.ts @@ -1,10 +1,11 @@ import { InputProps } from "@illa-design/input" -import { ValidateMessageProps } from "@/widgetLibrary/PublicSector/InvalidMessage/interface" import { BaseWidgetProps } from "@/widgetLibrary/interface" export interface WrappedEditableTextProps - extends ValidateMessageProps, - Pick { + extends Pick< + InputProps, + "placeholder" | "disabled" | "readOnly" | "maxLength" | "minLength" + > { showCharacterCount?: InputProps["showCount"] value?: string prefixIcon?: InputProps["prefix"] diff --git a/src/widgetLibrary/InputWidget/input.tsx b/src/widgetLibrary/InputWidget/input.tsx index e69b7f4e8d..a3df396346 100644 --- a/src/widgetLibrary/InputWidget/input.tsx +++ b/src/widgetLibrary/InputWidget/input.tsx @@ -1,6 +1,5 @@ -import { FC, forwardRef, useEffect, useRef, useState } from "react" +import { FC, forwardRef, useEffect, useRef } from "react" import { Input } from "@illa-design/input" -import { InvalidMessage } from "@/widgetLibrary/PublicSector/InvalidMessage" import { containerStyle } from "@/widgetLibrary/PublicSector/containerStyle" import { InputWidgetProps, WrappedInputProps } from "./interface" @@ -19,17 +18,10 @@ export const WrappedInput = forwardRef( colorScheme, handleUpdateDsl, allowClear, - pattern, - regex, - minLength, maxLength, - required, - customRule, - hideValidationMessage, + minLength, } = props - const [currentValue, setCurrentValue] = useState("") - return (
    ( suffix={suffixIcon} addonAfter={{ render: suffixText, custom: false }} onChange={(value) => { - setCurrentValue(value) handleUpdateDsl({ value }) }} showCount={showCharacterCount} borderColor={colorScheme} allowClear={allowClear} onClear={() => { - setCurrentValue("") handleUpdateDsl({ value: "" }) }} maxLength={maxLength} - /> -
    ) @@ -88,13 +69,8 @@ export const InputWidget: FC = (props) => { handleUpdateGlobalData, handleDeleteGlobalData, allowClear, - pattern, - regex, minLength, maxLength, - required, - customRule, - hideValidationMessage, } = props const inputRef = useRef(null) @@ -112,13 +88,8 @@ export const InputWidget: FC = (props) => { showCharacterCount, colorScheme, allowClear, - pattern, - regex, minLength, maxLength, - required, - customRule, - hideValidationMessage, focus: () => { inputRef.current?.focus() }, @@ -147,13 +118,8 @@ export const InputWidget: FC = (props) => { colorScheme, displayName, allowClear, - pattern, - regex, minLength, maxLength, - required, - customRule, - hideValidationMessage, ]) return } diff --git a/src/widgetLibrary/InputWidget/interface.tsx b/src/widgetLibrary/InputWidget/interface.tsx index 6a4de259b8..39c1af5c6e 100644 --- a/src/widgetLibrary/InputWidget/interface.tsx +++ b/src/widgetLibrary/InputWidget/interface.tsx @@ -1,10 +1,11 @@ import { InputProps } from "@illa-design/input" -import { ValidateMessageProps } from "@/widgetLibrary/PublicSector/InvalidMessage/interface" import { BaseWidgetProps } from "@/widgetLibrary/interface" export interface WrappedInputProps - extends ValidateMessageProps, - Pick, + extends Pick< + InputProps, + "placeholder" | "disabled" | "readOnly" | "maxLength" | "minLength" + >, BaseWidgetProps { showCharacterCount?: InputProps["showCount"] value?: string diff --git a/src/widgetLibrary/PublicSector/BasicWrapper/style.ts b/src/widgetLibrary/PublicSector/BasicWrapper/style.ts index 852c0dba87..3941cc95fc 100644 --- a/src/widgetLibrary/PublicSector/BasicWrapper/style.ts +++ b/src/widgetLibrary/PublicSector/BasicWrapper/style.ts @@ -39,6 +39,7 @@ export const applyBasicWrapperStyle = ( ${getFlexDirection(labelPosition)} justify-content: center; align-items: center; + flex-direction: column; user-select: text; ` } diff --git a/src/widgetLibrary/PublicSector/Label/index.tsx b/src/widgetLibrary/PublicSector/Label/index.tsx index 165f2593f8..9928c6313b 100644 --- a/src/widgetLibrary/PublicSector/Label/index.tsx +++ b/src/widgetLibrary/PublicSector/Label/index.tsx @@ -5,6 +5,7 @@ import { labelCaptionCss, labelRequiredCss, applyLabelTitleStyle, + labelNameStyle, } from "./styles" const Label = forwardRef((props, ref) => { @@ -27,10 +28,10 @@ const Label = forwardRef((props, ref) => { const renderLabelTitle = useMemo(() => { return ( - - {label} +
    + {label} {renderLabelTitleRequired} - +
    ) }, [label, renderLabelTitleRequired, hasTooltip]) diff --git a/src/widgetLibrary/PublicSector/Label/styles.tsx b/src/widgetLibrary/PublicSector/Label/styles.tsx index cf012276bc..e6c1043d0f 100644 --- a/src/widgetLibrary/PublicSector/Label/styles.tsx +++ b/src/widgetLibrary/PublicSector/Label/styles.tsx @@ -4,7 +4,6 @@ import { LabelAlignType, LabelPositionType } from "./interface" const baseLabelCss = css` display: block; - overflow-wrap: break-word; font-size: 12px; font-weight: 500; ` @@ -25,6 +24,7 @@ function applyLeftLabelStyle( return css` ${baseLabelCss}; width: ${width}; + overflow: hidden; max-width: 80%; flex: none; align-self: center; @@ -67,6 +67,12 @@ export const applyLabelTitleStyle = (hasTooltip: boolean) => { ` } +export const labelNameStyle = css` + overflow: hidden; + width: fit-content; + white-space: nowrap; +` + export const labelCaptionCss = css` color: ${globalColor(`--${illaPrefix}-gray-04`)}; ` diff --git a/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx b/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx index 27255eef87..5992334b18 100644 --- a/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx +++ b/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx @@ -11,6 +11,11 @@ import { executionActions } from "@/redux/currentApp/executionTree/execution/exe import { BasicWrapper } from "@/widgetLibrary/PublicSector/BasicWrapper" import Label from "@/widgetLibrary/PublicSector/Label" import { transformEvents } from "@/widgetLibrary/PublicSector/utils/transformEvents" +import { InvalidMessage } from "@/widgetLibrary/PublicSector/InvalidMessage" +import { + applyValidateMessageWrapperStyle, + labelAndComponentWrapperStyle, +} from "@/widgetLibrary/PublicSector/TransformWidgetWrapper/style" export const getEventScripts = (events: EventsInProps[], eventType: string) => { return events.filter((event) => { @@ -93,6 +98,13 @@ export const TransformWidgetWrapper: FC = (props) => { labelHidden, required, hidden, + value, + regex, + pattern, + minLength, + maxLength, + customRule, + hideValidationMessage, } = realProps return ( = (props) => { hidden={hidden} labelPosition={labelPosition} > - ) } diff --git a/src/widgetLibrary/PublicSector/TransformWidgetWrapper/style.ts b/src/widgetLibrary/PublicSector/TransformWidgetWrapper/style.ts new file mode 100644 index 0000000000..df24c62716 --- /dev/null +++ b/src/widgetLibrary/PublicSector/TransformWidgetWrapper/style.ts @@ -0,0 +1,14 @@ +import { css } from "@emotion/react" +import { SerializedStyles } from "@emotion/serialize" +export const labelAndComponentWrapperStyle = css` + width: 100%; + display: flex; +` +export const applyValidateMessageWrapperStyle = ( + labelWidth: number, +): SerializedStyles => { + return css` + width: 100%; + padding-left: calc(min(${labelWidth}%, 80%) + 8px); + ` +} diff --git a/src/widgetLibrary/RateWidget/interface.tsx b/src/widgetLibrary/RateWidget/interface.tsx index 4c902d6aa9..4318b5c4ee 100644 --- a/src/widgetLibrary/RateWidget/interface.tsx +++ b/src/widgetLibrary/RateWidget/interface.tsx @@ -3,8 +3,7 @@ import { ValidateMessageProps } from "@/widgetLibrary/PublicSector/InvalidMessag import { BaseWidgetProps } from "@/widgetLibrary/interface" export interface WrappedRateProps - extends Omit, - Pick { + extends Pick { value?: number loading?: boolean readOnly?: boolean diff --git a/src/widgetLibrary/RateWidget/rate.tsx b/src/widgetLibrary/RateWidget/rate.tsx index 1cf4d0eda1..23b98e9b4e 100644 --- a/src/widgetLibrary/RateWidget/rate.tsx +++ b/src/widgetLibrary/RateWidget/rate.tsx @@ -9,25 +9,14 @@ export const WrappedRate: FC = (props, ref) => { const { value, allowClear, - required, disabled, - customRule, icon, readOnly, allowHalf, - hideValidationMessage, maxCount, handleUpdateDsl, } = props - const _customValue = useMemo(() => { - if (customRule) { - return customRule - } else if (required && !value) { - return invalidMessage.get("required") - } - }, [customRule, required, value]) - return (
    = (props, ref) => { handleUpdateDsl({ value }) }} /> -
    ) } @@ -56,13 +41,10 @@ export const RateWidget: FC = (props) => { const { value, allowClear, - required, disabled, - customRule, icon, readOnly, allowHalf, - hideValidationMessage, maxCount, handleUpdateDsl, displayName, @@ -74,13 +56,10 @@ export const RateWidget: FC = (props) => { handleUpdateGlobalData(displayName, { value, allowClear, - required, disabled, - customRule, icon, readOnly, allowHalf, - hideValidationMessage, maxCount, setValue: (value: number) => { handleUpdateDsl({ value }) @@ -98,13 +77,10 @@ export const RateWidget: FC = (props) => { displayName, value, allowClear, - required, disabled, - customRule, icon, readOnly, allowHalf, - hideValidationMessage, maxCount, ]) return From de86bd70a7c975efb19c7a77666be7920225c90e Mon Sep 17 00:00:00 2001 From: AruSeito Date: Wed, 27 Jul 2022 18:04:53 +0800 Subject: [PATCH 091/148] fix: label position --- .../PublicSector/BasicWrapper/index.tsx | 4 ++-- .../PublicSector/BasicWrapper/interface.ts | 1 - .../PublicSector/BasicWrapper/style.ts | 10 +++------- .../TransformWidgetWrapper/index.tsx | 12 ++++------- .../TransformWidgetWrapper/style.ts | 20 ++++++++++++++----- 5 files changed, 24 insertions(+), 23 deletions(-) diff --git a/src/widgetLibrary/PublicSector/BasicWrapper/index.tsx b/src/widgetLibrary/PublicSector/BasicWrapper/index.tsx index 0a00488241..38471b0d96 100644 --- a/src/widgetLibrary/PublicSector/BasicWrapper/index.tsx +++ b/src/widgetLibrary/PublicSector/BasicWrapper/index.tsx @@ -4,14 +4,14 @@ import { BasicWrapperProps } from "@/widgetLibrary/PublicSector/BasicWrapper/int import { TooltipWrapper } from "@/widgetLibrary/PublicSector/TooltipWrapper" export const BasicWrapper: FC = (props) => { - const { children, tooltipText, hidden, labelPosition } = props + const { children, tooltipText, hidden } = props return ( -
    {children}
    +
    {children}
     ) } diff --git a/src/widgetLibrary/PublicSector/BasicWrapper/interface.ts b/src/widgetLibrary/PublicSector/BasicWrapper/interface.ts index f368a8ea7b..318bb8f721 100644 --- a/src/widgetLibrary/PublicSector/BasicWrapper/interface.ts +++ b/src/widgetLibrary/PublicSector/BasicWrapper/interface.ts @@ -3,5 +3,4 @@ import { TooltipWrapperProps } from "@/widgetLibrary/PublicSector/TooltipWrapper export interface BasicWrapperProps extends TooltipWrapperProps { children?: ReactNode hidden?: boolean - labelPosition?: "left" | "right" | "top" } diff --git a/src/widgetLibrary/PublicSector/BasicWrapper/style.ts b/src/widgetLibrary/PublicSector/BasicWrapper/style.ts index 3941cc95fc..9d3602404b 100644 --- a/src/widgetLibrary/PublicSector/BasicWrapper/style.ts +++ b/src/widgetLibrary/PublicSector/BasicWrapper/style.ts @@ -1,6 +1,6 @@ import { css, SerializedStyles } from "@emotion/react" -const getFlexDirection = ( +export const getFlexDirection = ( labelPosition: "left" | "right" | "top" = "left", ): SerializedStyles => { switch (labelPosition) { @@ -19,10 +19,7 @@ const getFlexDirection = ( } } -export const applyBasicWrapperStyle = ( - hidden?: boolean, - labelPosition?: "left" | "right" | "top", -): SerializedStyles => { +export const applyBasicWrapperStyle = (hidden?: boolean): SerializedStyles => { const shapeStyle = hidden ? css` width: 0; @@ -36,10 +33,9 @@ export const applyBasicWrapperStyle = ( ${shapeStyle}; overflow: hidden; display: flex; - ${getFlexDirection(labelPosition)} + flex-direction: column; justify-content: center; align-items: center; - flex-direction: column; user-select: text; ` } diff --git a/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx b/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx index 5992334b18..ba6f668578 100644 --- a/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx +++ b/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx @@ -13,8 +13,8 @@ import Label from "@/widgetLibrary/PublicSector/Label" import { transformEvents } from "@/widgetLibrary/PublicSector/utils/transformEvents" import { InvalidMessage } from "@/widgetLibrary/PublicSector/InvalidMessage" import { + applyLabelAndComponentWrapperStyle, applyValidateMessageWrapperStyle, - labelAndComponentWrapperStyle, } from "@/widgetLibrary/PublicSector/TransformWidgetWrapper/style" export const getEventScripts = (events: EventsInProps[], eventType: string) => { @@ -107,12 +107,8 @@ export const TransformWidgetWrapper: FC = (props) => { hideValidationMessage, } = realProps return ( -