From 53f6147a162a311e8f861274af263e763f408d40 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 16 Sep 2022 16:23:44 +0800 Subject: [PATCH 01/85] feat: add config --- apps/builder/src/i18n/locale/en-US.json | 3 +- apps/builder/src/i18n/locale/zh-CN.json | 3 +- .../TableWidget/eventHandlerConfig.ts | 14 +++++ .../src/widgetLibrary/TableWidget/index.ts | 2 + .../widgetLibrary/TableWidget/interface.ts | 5 +- .../widgetLibrary/TableWidget/panelConfig.tsx | 58 +++++++++++++++++++ .../src/widgetLibrary/TableWidget/table.tsx | 7 ++- .../src/widgetLibrary/widgetBuilder.tsx | 2 + illa-design | 2 +- 9 files changed, 88 insertions(+), 8 deletions(-) create mode 100644 apps/builder/src/widgetLibrary/TableWidget/eventHandlerConfig.ts diff --git a/apps/builder/src/i18n/locale/en-US.json b/apps/builder/src/i18n/locale/en-US.json index 592a07330a..56e2ba8da9 100644 --- a/apps/builder/src/i18n/locale/en-US.json +++ b/apps/builder/src/i18n/locale/en-US.json @@ -564,7 +564,8 @@ "new_tab": "New tab", "description": "Description", "duration": "Duration", - "data": "Data" + "data": "Data", + "empty_state": "Empty state" }, "setter_tooltip": { "default_value": "The initial value of the input box. You can dynamically change the initial value of the input field by typing JavaScript in {{}}.", diff --git a/apps/builder/src/i18n/locale/zh-CN.json b/apps/builder/src/i18n/locale/zh-CN.json index d38b7a494f..ac71e979de 100644 --- a/apps/builder/src/i18n/locale/zh-CN.json +++ b/apps/builder/src/i18n/locale/zh-CN.json @@ -563,7 +563,8 @@ "new_tab": "在新标签中打开", "description": "描述", "duration": "持续时间", - "data": "数据" + "data": "数据", + "empty_state": "空状态" }, "setter_tooltip": { "default_value": "输入框的默认值。您可以使用模版语法在框中输入JavaScript语句动态改变输入框的默认值。", diff --git a/apps/builder/src/widgetLibrary/TableWidget/eventHandlerConfig.ts b/apps/builder/src/widgetLibrary/TableWidget/eventHandlerConfig.ts new file mode 100644 index 0000000000..5c2e3b0cc7 --- /dev/null +++ b/apps/builder/src/widgetLibrary/TableWidget/eventHandlerConfig.ts @@ -0,0 +1,14 @@ +import { EventHandlerConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" + +export const TABLE_EVENT_HANDLER_CONFIG: EventHandlerConfig = { + events: [ + { + label: i18n.t( + "editor.inspect.setter_content.widget_action_type_name.change", + ), + value: "change", + }, + ], + methods: ["setValue"], +} diff --git a/apps/builder/src/widgetLibrary/TableWidget/index.ts b/apps/builder/src/widgetLibrary/TableWidget/index.ts index b44e6834f2..2ce8e13e2d 100644 --- a/apps/builder/src/widgetLibrary/TableWidget/index.ts +++ b/apps/builder/src/widgetLibrary/TableWidget/index.ts @@ -1,5 +1,7 @@ import { TABLE_WIDGET_CONFIG } from "@/widgetLibrary/TableWidget/widgetConfig" +import { TABLE_EVENT_HANDLER_CONFIG } from "@/widgetLibrary/TableWidget/eventHandlerConfig" export { TABLE_WIDGET_CONFIG } from "./widgetConfig" +export { TABLE_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig" export { TABLE_PANEL_CONFIG } from "./panelConfig" export { TableWidget } from "./table" diff --git a/apps/builder/src/widgetLibrary/TableWidget/interface.ts b/apps/builder/src/widgetLibrary/TableWidget/interface.ts index 1ca2962eae..d94ecd7f8b 100644 --- a/apps/builder/src/widgetLibrary/TableWidget/interface.ts +++ b/apps/builder/src/widgetLibrary/TableWidget/interface.ts @@ -1,7 +1,8 @@ export interface WrappedTableProps { originData: object[] + emptyState?: string } -export interface TableWidgetProps { - originData: object[] +export interface TableWidgetProps extends WrappedTableProps{ + } diff --git a/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx index 94e31ff80f..9d1fe73f6b 100644 --- a/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx +++ b/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx @@ -1,5 +1,8 @@ import { PanelConfig } from "@/page/App/components/InspectPanel/interface" import i18n from "@/i18n/config" +import { VALIDATION_TYPES } from "@/utils/validationFactory" +import { generatorEventHandlerConfig } from "@/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig" +import { SWITCH_EVENT_HANDLER_CONFIG } from "@/widgetLibrary/SwitchWidget" const baseWidgetName = "table" export const TABLE_PANEL_CONFIG: PanelConfig[] = [ @@ -14,6 +17,61 @@ export const TABLE_PANEL_CONFIG: PanelConfig[] = [ isSetterSingleRow: true, setterType: "INPUT_SETTER", }, + { + id: `${baseWidgetName}-basic-emptyState`, + labelName: i18n.t("editor.inspect.setter_label.empty_state"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.placeholder"), + attrName: "emptyState", + setterType: "INPUT_SETTER", + expectedType: VALIDATION_TYPES.STRING, + }, + { + id: `${baseWidgetName}-basic-loading`, + labelName: i18n.t("editor.inspect.setter_label.loading"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.loading"), + attrName: "loading", + setterType: "DYNAMIC_SWITCH_SETTER", + expectedType: VALIDATION_TYPES.BOOLEAN, + openDynamic: true, + useCustomLayout: true, + }, + ], + }, + { + id: `${baseWidgetName}-toolbar`, + groupName: i18n.t("editor.inspect.setter_group.data"), + children: [ + { + id: `${baseWidgetName}-basic-download`, + labelName: i18n.t("editor.inspect.setter_label.download"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.download"), + attrName: "download", + setterType: "DYNAMIC_SWITCH_SETTER", + expectedType: VALIDATION_TYPES.BOOLEAN, + openDynamic: true, + useCustomLayout: true, + }, + ], + }, + { + id: `${baseWidgetName}-interaction`, + groupName: i18n.t("editor.inspect.setter_group.interaction"), + children: [ + { + ...generatorEventHandlerConfig( + baseWidgetName, + SWITCH_EVENT_HANDLER_CONFIG.events, + ), + }, + { + id: `${baseWidgetName}-interaction-disabled`, + labelName: i18n.t("editor.inspect.setter_label.disabled"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"), + attrName: "disabled", + setterType: "INPUT_SETTER", + placeholder: "{{false}}", + expectedType: VALIDATION_TYPES.BOOLEAN, + }, ], }, ] diff --git a/apps/builder/src/widgetLibrary/TableWidget/table.tsx b/apps/builder/src/widgetLibrary/TableWidget/table.tsx index b2a5363ff7..cd04d06083 100644 --- a/apps/builder/src/widgetLibrary/TableWidget/table.tsx +++ b/apps/builder/src/widgetLibrary/TableWidget/table.tsx @@ -4,7 +4,7 @@ import { TableWidgetProps, WrappedTableProps } from "./interface" import { ColumnDef } from "@tanstack/react-table" export const WrappedTable: FC = (props) => { - const { originData } = props + const { originData, emptyState } = props let columnsDef: ColumnDef[] = useMemo(() => { let l: ColumnDef[] = [] @@ -16,6 +16,7 @@ export const WrappedTable: FC = (props) => { }) }) } + console.log(l,'l') return l }, [originData]) @@ -34,6 +35,6 @@ export const WrappedTable: FC = (props) => { } export const TableWidget: FC = (props) => { - const { originData } = props - return + const { originData, emptyState } = props + return } diff --git a/apps/builder/src/widgetLibrary/widgetBuilder.tsx b/apps/builder/src/widgetLibrary/widgetBuilder.tsx index e3622670e6..6f1dc1f260 100644 --- a/apps/builder/src/widgetLibrary/widgetBuilder.tsx +++ b/apps/builder/src/widgetLibrary/widgetBuilder.tsx @@ -121,6 +121,7 @@ import { import { TABLE_PANEL_CONFIG, TABLE_WIDGET_CONFIG, + TABLE_EVENT_HANDLER_CONFIG, TableWidget, } from "@/widgetLibrary/TableWidget" @@ -249,6 +250,7 @@ export const WidgetConfig: WidgetConfigs = { widget: TableWidget, config: TABLE_WIDGET_CONFIG, panelConfig: TABLE_PANEL_CONFIG, + eventHandlerConfig: TABLE_EVENT_HANDLER_CONFIG, }, } diff --git a/illa-design b/illa-design index f8c7bcf755..3a1ffdce0d 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit f8c7bcf755648a325bb747606ecec1b24d55175f +Subproject commit 3a1ffdce0de3918331ca863f634fe6f84efc2a20 From 774ab2105df4a8080556dcac7a5c3b734bb64667 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 16 Sep 2022 18:50:32 +0800 Subject: [PATCH 02/85] feat: add column setter --- apps/builder/src/i18n/locale/en-US.json | 6 ++ apps/builder/src/i18n/locale/zh-CN.json | 6 ++ .../PanelSetters/ColumnSetter/actionMenu.tsx | 44 ++++++++++ .../PanelSetters/ColumnSetter/body.tsx | 28 +++++++ .../context/optionListContext.tsx | 81 +++++++++++++++++++ .../ColumnSetter/dragIconAndLabel.tsx | 72 +++++++++++++++++ .../PanelSetters/ColumnSetter/empty.tsx | 8 ++ .../PanelSetters/ColumnSetter/header.tsx | 26 ++++++ .../PanelSetters/ColumnSetter/index.tsx | 49 +++++++++++ .../PanelSetters/ColumnSetter/interface.ts | 42 ++++++++++ .../PanelSetters/ColumnSetter/listItem.tsx | 67 +++++++++++++++ .../PanelSetters/ColumnSetter/more.tsx | 33 ++++++++ .../PanelSetters/ColumnSetter/style.ts | 80 ++++++++++++++++++ .../ColumnSetter/utils/generateNewOptions.ts | 10 +++ .../App/components/PanelSetters/index.tsx | 2 + .../widgetLibrary/TableWidget/interface.ts | 7 +- .../widgetLibrary/TableWidget/panelConfig.tsx | 36 +++++++++ .../src/widgetLibrary/TableWidget/table.tsx | 11 ++- .../TableWidget/widgetConfig.tsx | 1 + illa-design | 2 +- 20 files changed, 604 insertions(+), 7 deletions(-) create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/actionMenu.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/body.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/context/optionListContext.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/dragIconAndLabel.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/empty.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/header.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/index.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/interface.ts create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/listItem.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/more.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/style.ts create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/utils/generateNewOptions.ts diff --git a/apps/builder/src/i18n/locale/en-US.json b/apps/builder/src/i18n/locale/en-US.json index 06e4a5d61e..2d975115e7 100644 --- a/apps/builder/src/i18n/locale/en-US.json +++ b/apps/builder/src/i18n/locale/en-US.json @@ -450,6 +450,7 @@ "style": "STYLE", "validation": "VALIDATION", "options": "OPTIONS", + "column": "COLUMNS", "data": "DATA" }, "setter_label": { @@ -610,6 +611,11 @@ } }, "setter_content": { + "column_setter": { + "label": "Columns ({{number}})", + "title": "Title", + "new": "New" + }, "option_list": { "action_menu": { "delete": "Delete", diff --git a/apps/builder/src/i18n/locale/zh-CN.json b/apps/builder/src/i18n/locale/zh-CN.json index 0e6cbc7faa..56b298d192 100644 --- a/apps/builder/src/i18n/locale/zh-CN.json +++ b/apps/builder/src/i18n/locale/zh-CN.json @@ -449,6 +449,7 @@ "style": "风格", "validation": "验证", "options": "选项", + "column": "COLUMNS", "data": "数据" }, "setter_label": { @@ -609,6 +610,11 @@ } }, "setter_content": { + "column_setter": { + "label": "列 ({{number}})", + "title": "标题", + "new": "新建" + }, "option_list": { "action_menu": { "delete": "删除", diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/actionMenu.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/actionMenu.tsx new file mode 100644 index 0000000000..24c982eb41 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/actionMenu.tsx @@ -0,0 +1,44 @@ +import { FC, useContext } from "react" +import { useTranslation } from "react-i18next" +import { DropList } from "@illa-design/dropdown" +import { globalColor, illaPrefix } from "@illa-design/theme" +import { ActionMenuProps } from "@/page/App/components/PanelSetters/OptionListSetter/interface" +import { OptionListSetterContext } from "@/page/App/components/PanelSetters/OptionListSetter/context/optionListContext" + +const { Item } = DropList + +export const ActionMenu: FC = (props) => { + const { index, handleCloseMode } = props + const { handleCopyOptionItem, handleDeleteOptionItem } = useContext( + OptionListSetterContext, + ) + const { t } = useTranslation() + + return ( + + { + handleCopyOptionItem(index) + handleCloseMode() + }} + /> + { + handleDeleteOptionItem(index) + handleCloseMode() + }} + /> + + ) +} + +ActionMenu.displayName = "ActionMenu" diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/body.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/body.tsx new file mode 100644 index 0000000000..5eaed8f5bd --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/body.tsx @@ -0,0 +1,28 @@ +import { FC, useContext } from "react" +import { ListItem } from "./listItem" +import { OptionListSetterContext } from "@/page/App/components/PanelSetters/OptionListSetter/context/optionListContext" +import { EmptyBody } from "@/page/App/components/PanelSetters/OptionListSetter/empty" + +export const ListBody: FC = () => { + const { optionItems } = useContext(OptionListSetterContext) + + if (!optionItems || !Array.isArray(optionItems) || optionItems.length === 0) + return + + return ( + <> + {optionItems.map((item, index) => { + const { label, value, id } = item + return ( + + ) + })} + + ) +} diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/context/optionListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/context/optionListContext.tsx new file mode 100644 index 0000000000..11ad14e846 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/context/optionListContext.tsx @@ -0,0 +1,81 @@ +import { createContext, ReactNode, FC, useCallback } from "react" +import { OptionItemShape } from "@/page/App/components/PanelSetters/OptionListSetter/interface" +import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" +import { generateOptionItemId } from "@/page/App/components/PanelSetters/OptionListSetter/utils/generateNewOptions" + +interface ProviderProps { + optionItems: OptionItemShape[] + childrenSetter: PanelFieldConfig[] + widgetDisplayName: string + attrPath: string + handleUpdateDsl: (attrPath: string, value: any) => void + children: ReactNode +} + +interface Inject extends Omit { + handleDeleteOptionItem: (index: number) => void + handleCopyOptionItem: (index: number) => void + handleMoveOptionItem: (dragIndex: number, hoverIndex: number) => void +} + +export const OptionListSetterContext = createContext({} as Inject) + +export const OptionListSetterProvider: FC = (props) => { + const { optionItems, attrPath, handleUpdateDsl } = props + + const handleDeleteOptionItem = useCallback( + (index: number) => { + const updatedArray = optionItems.filter( + (optionItem: Record, i: number) => { + return i !== index + }, + ) + handleUpdateDsl(attrPath, updatedArray) + }, + [optionItems, handleUpdateDsl, attrPath], + ) + + const handleCopyOptionItem = useCallback( + (index: number) => { + let targetOptionItem = optionItems.find( + (optionItem: Record, i: number) => { + return i === index + }, + ) + if (!targetOptionItem) return + targetOptionItem = { + ...targetOptionItem, + id: generateOptionItemId(), + } + const updatedArray = [...optionItems, targetOptionItem] + handleUpdateDsl(attrPath, updatedArray) + }, + [optionItems, handleUpdateDsl, attrPath], + ) + + const handleMoveOptionItem = useCallback( + (dragIndex: number, hoverIndex: number) => { + const dragOptionItem = optionItems[dragIndex] + const newOptions = [...optionItems] + newOptions.splice(dragIndex, 1) + newOptions.splice(hoverIndex, 0, dragOptionItem) + handleUpdateDsl(attrPath, newOptions) + }, + [attrPath, optionItems, handleUpdateDsl], + ) + + const value = { + ...props, + handleDeleteOptionItem, + handleCopyOptionItem, + handleMoveOptionItem, + } + + return ( + + {props.children} + + ) +} + +OptionListSetterProvider.displayName = "OptionListSetterProvider" diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/dragIconAndLabel.tsx new file mode 100644 index 0000000000..e581c605d4 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/dragIconAndLabel.tsx @@ -0,0 +1,72 @@ +import { FC, useCallback, useContext, useMemo, useState } from "react" +import { useSelector } from "react-redux" +import { useTranslation } from "react-i18next" +import { DragPointIcon } from "@illa-design/icon" +import { Trigger } from "@illa-design/trigger" +import { get } from "lodash" +import { + labelNameAndIconStyle, + labelNameWrapperStyle, + movableIconWrapperStyle, +} from "@/page/App/components/PanelSetters/OptionListSetter/style" +import { DragIconAndLabelProps } from "@/page/App/components/PanelSetters/OptionListSetter/interface" +import { OptionListSetterContext } from "@/page/App/components/PanelSetters/OptionListSetter/context/optionListContext" +import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector" +import { BaseModal } from "@/page/App/components/PanelSetters/PublicComponent/Modal" + +export const DragIconAndLabel: FC = (props) => { + const { index } = props + const [modalVisible, setModalVisible] = useState(false) + const { widgetDisplayName, attrPath, childrenSetter } = useContext( + OptionListSetterContext, + ) + + const { t } = useTranslation() + const executionResult = useSelector(getExecutionResult) + + const labelName = useMemo(() => { + return get( + executionResult, + `${widgetDisplayName}.${attrPath}.${index}.label`, + ) + }, [executionResult, widgetDisplayName, attrPath, index]) + + const handleCloseModal = useCallback(() => { + setModalVisible(false) + }, []) + return ( + + } + trigger="click" + showArrow={false} + position="left" + clickOutsideToClose + onVisibleChange={(visible) => { + setModalVisible(visible) + }} + > +
+ + + + + {labelName || + t("editor.inspect.setter_content.option_list.list_no_label")} + +
+ + ) +} + +DragIconAndLabel.displayName = "DragIconAndLabel" diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/empty.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/empty.tsx new file mode 100644 index 0000000000..27bd94b996 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/empty.tsx @@ -0,0 +1,8 @@ +import { FC } from "react" +import { emptyEmptyBodyStyle } from "@/page/App/components/PanelSetters/OptionListSetter/style" + +export const EmptyBody: FC = () => { + return
No options
+} + +EmptyBody.displayName = "OptionListEmptyBody" diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/header.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/header.tsx new file mode 100644 index 0000000000..b3ce50d914 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/header.tsx @@ -0,0 +1,26 @@ +import { FC } from "react" +import { AddIcon } from "@illa-design/icon" +import { + addIconStyle, + optionListHeaderStyle, + headerActionButtonStyle, +} from "./style" +import { HeaderProps } from "./interface" +import { useTranslation } from "react-i18next" + +export const OptionListHeader: FC = props => { + const { labelName, handleAddOption } = props + const { t } = useTranslation() + + return ( +
+
{labelName}
+
+ + {t("editor.inspect.setter_content.column_setter.new")} +
+
+ ) +} + +OptionListHeader.displayName = "OptionListHeader" diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/index.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/index.tsx new file mode 100644 index 0000000000..5f7a6fc820 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/index.tsx @@ -0,0 +1,49 @@ +import { FC, useCallback } from "react" +import { OptionListHeader } from "./header" +import { ListBody } from "./body" +import { OptionListSetterProps } from "./interface" +import { ListStyle } from "./style" +import { generateNewOptionItem } from "./utils/generateNewOptions" +import { OptionListSetterProvider } from "./context/optionListContext" +import { useTranslation } from "react-i18next" + +export const ColumnSetter: FC = (props) => { + const { + attrName, + handleUpdateDsl, + value = [], + childrenSetter, + widgetDisplayName, + } = props + const { t } = useTranslation() + + const handleAddOption = useCallback(() => { + const num = value.length + 1 + const newItem = generateNewOptionItem(num) + handleUpdateDsl(attrName, [...value, newItem]) + }, [value, attrName, handleUpdateDsl]) + + if (!Array.isArray(childrenSetter) || childrenSetter.length === 0) { + return null + } + + return ( + +
+ + +
+ + ) +} + +ColumnSetter.displayName = "ColumnSetter" diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/interface.ts b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/interface.ts new file mode 100644 index 0000000000..8d9749362d --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/interface.ts @@ -0,0 +1,42 @@ +import { BaseSetter } from "@/page/App/components/PanelSetters/interface" +import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" + +export interface OptionItemShape { + id: string + value?: string + label?: string + disabled?: string +} + +export interface HeaderProps { + labelName: string + handleAddOption: () => void +} + +export interface ListItemProps extends Omit { + index: number +} + +export interface DragIconAndLabelProps { + index: number +} + +export interface MoreProps { + index: number +} + +export interface OptionListSetterProps extends BaseSetter { + value: OptionItemShape[] + childrenSetter?: PanelFieldConfig[] +} + +export interface DragItem { + index: number + id: string + type: string +} + +export interface ActionMenuProps { + index: number + handleCloseMode: () => void +} diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/listItem.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/listItem.tsx new file mode 100644 index 0000000000..66dac4ebaa --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/listItem.tsx @@ -0,0 +1,67 @@ +import { FC, useContext, useRef } from "react" +import { DragItem, ListItemProps } from "./interface" +import { useDrag, useDrop, XYCoord } from "react-dnd" +import { Identifier } from "dnd-core" +import { optionListItemStyle } from "./style" +import { DragIconAndLabel } from "./dragIconAndLabel" +import { OptionListSetterContext } from "./context/optionListContext" + +export const ListItem: FC = (props) => { + const { id, label, value, index } = props + + const { handleMoveOptionItem } = useContext(OptionListSetterContext) + const ref = useRef(null) + + const [, drop] = useDrop({ + accept: "OPTION_ITEM", + collect(monitor) { + return { + handlerId: monitor.getHandlerId(), + } + }, + hover(item: DragItem, monitor) { + if (!ref.current) { + return + } + const dragIndex = item.index + const hoverIndex = index + if (dragIndex === hoverIndex) { + return + } + const hoverBoundingRect = ref.current?.getBoundingClientRect() + const hoverMiddleY = + (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2 + const clientOffset = monitor.getClientOffset() + const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top + if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) { + return + } + if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) { + return + } + handleMoveOptionItem(dragIndex, hoverIndex) + item.index = hoverIndex + }, + }) + + const [{ isDragging }, drag] = useDrag({ + type: "OPTION_ITEM", + item: () => { + return { id, index } + }, + collect: (monitor: any) => ({ + isDragging: monitor.isDragging(), + }), + }) + + drag(drop(ref)) + const opacity = isDragging ? 0 : 1 + + return ( +
+
+ +
+
+ ) +} diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/more.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/more.tsx new file mode 100644 index 0000000000..679912d6a4 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/more.tsx @@ -0,0 +1,33 @@ +import { FC, useState, useCallback } from "react" +import { Dropdown } from "@illa-design/dropdown" +import { MoreIcon } from "@illa-design/icon" +import { ActionMenu } from "@/page/App/components/PanelSetters/OptionListSetter/actionMenu" +import { MoreProps } from "@/page/App/components/PanelSetters/OptionListSetter/interface" + +export const More: FC = (props) => { + const { index } = props + + const [actionMenuVisible, setActionMenuVisible] = useState(false) + const handleCloseActionMenu = useCallback(() => { + setActionMenuVisible(false) + }, []) + return ( + + } + trigger="click" + position="bottom-end" + onVisibleChange={(visible) => { + setActionMenuVisible(visible) + }} + > +
+ +
+ + ) +} + +More.displayName = "OptionListSetterMore" diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/style.ts b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/style.ts new file mode 100644 index 0000000000..f32012bfda --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/style.ts @@ -0,0 +1,80 @@ +import { css } from "@emotion/react" +import { globalColor, illaPrefix } from "@illa-design/theme" +import { publicPaddingStyle } from "@/page/App/components/InspectPanel/style" + +export const optionListHeaderStyle = css` + width: 100%; + background-color: ${globalColor(`--${illaPrefix}-grayBlue-09`)}; + display: flex; + justify-content: space-between; + align-items: center; + height: 40px; + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; + font-weight: 500; + box-sizing: border-box; + ${publicPaddingStyle} +` + +export const headerActionButtonStyle = css` + display: flex; + align-items: center; + justify-content: center; + color: ${globalColor(`--${illaPrefix}-purple-01`)}; + cursor: pointer; + font-weight: 400; +` + +export const addIconStyle = css` + margin-right: 4px; + font-size: 12px; +` + +export const ListStyle = css` + border: 1px solid ${globalColor(`--${illaPrefix}-grayBlue-08`)}; + margin: 0 16px; + border-radius: 8px; +` + +export const optionListItemStyle = css` + display: flex; + justify-content: space-between; + padding-right: 16px; + height: 40px; + align-items: center; + cursor: pointer; + + &:hover { + .movableIconWrapper { + opacity: 1; + } + } +` + +export const labelNameAndIconStyle = css` + width: 100%; + height: 100%; + display: flex; + align-items: center; +` + +export const labelNameWrapperStyle = css` + font-size: 14px; + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; +` + +export const movableIconWrapperStyle = css` + opacity: 0; + cursor: grab; + display: flex; + align-items: center; + color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; +` + +export const emptyEmptyBodyStyle = css` + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 40px; + color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; +` diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/utils/generateNewOptions.ts b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/utils/generateNewOptions.ts new file mode 100644 index 0000000000..899f75e4e3 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/utils/generateNewOptions.ts @@ -0,0 +1,10 @@ +import { v4 } from "uuid" +import { OptionItemShape } from "@/page/App/components/PanelSetters/OptionListSetter/interface" + +export const generateOptionItemId = () => `option-${v4()}` + +export const generateNewOptionItem = (number: number): OptionItemShape => ({ + id: generateOptionItemId(), + value: `Option ${number}`, + label: `Option ${number}`, +}) diff --git a/apps/builder/src/page/App/components/PanelSetters/index.tsx b/apps/builder/src/page/App/components/PanelSetters/index.tsx index 317f8f255f..584e5e04e7 100644 --- a/apps/builder/src/page/App/components/PanelSetters/index.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/index.tsx @@ -21,6 +21,7 @@ import { ChartDataSourceSetter } from "@/page/App/components/PanelSetters/ChartS import { ChartKeysSelectSetter } from "@/page/App/components/PanelSetters/ChartSetter/chartKeysSelectSetter" import { ChartDatasetsSetter } from "@/page/App/components/PanelSetters/ChartSetter/chartDatasetsSetter" import { ChartColorSelectSetter } from "@/page/App/components/PanelSetters/ChartSetter/chartColorSelectSetter" +import { ColumnSetter } from "@/page/App/components/PanelSetters/ColumnSetter" const SetterTypeMapSetter = { INPUT_SETTER: BaseInput, @@ -33,6 +34,7 @@ const SetterTypeMapSetter = { BASE_SELECT_SETTER: BaseSelectSetter, COLOR_PICKER_SETTER: ColorPickerSetter, OPTION_LIST_SETTER: OptionListSetter, + COLUMN_SETTER: ColumnSetter, OPTION_MAPPED_SETTER: MappedOptionSetter, EVENT_HANDLER_SETTER: EventHandlerSetter, EVENT_TARGET_SELECT_SETTER: EventTargetWidgetSelect, diff --git a/apps/builder/src/widgetLibrary/TableWidget/interface.ts b/apps/builder/src/widgetLibrary/TableWidget/interface.ts index d94ecd7f8b..ed8a50beb2 100644 --- a/apps/builder/src/widgetLibrary/TableWidget/interface.ts +++ b/apps/builder/src/widgetLibrary/TableWidget/interface.ts @@ -1,8 +1,11 @@ -export interface WrappedTableProps { +import { TableProps } from "@illa-design/table" + +export interface WrappedTableProps extends Pick, + | "loading"> { originData: object[] emptyState?: string } -export interface TableWidgetProps extends WrappedTableProps{ +export interface TableWidgetProps extends WrappedTableProps { } diff --git a/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx index 9d1fe73f6b..a65cf45ca3 100644 --- a/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx +++ b/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx @@ -37,6 +37,42 @@ export const TABLE_PANEL_CONFIG: PanelConfig[] = [ }, ], }, + { + id: `${baseWidgetName}-column`, + groupName: i18n.t("editor.inspect.setter_group.column"), + children: [ + { + id: `${baseWidgetName}-basic-options`, + useCustomLayout: true, + attrName: "manualOptions", + setterType: "COLUMN_SETTER", + bindAttrName: ["optionConfigureMode"], + shown: (value) => !value || value === "static", + childrenSetter: [ + { + id: `${baseWidgetName}-options-label`, + labelName: i18n.t("editor.inspect.setter_label.label"), + attrName: "label", + setterType: "INPUT_SETTER", + expectedType: VALIDATION_TYPES.STRING, + }, + { + id: `${baseWidgetName}-options-value`, + labelName: i18n.t("editor.inspect.setter_label.value"), + attrName: "value", + setterType: "INPUT_SETTER", + }, + { + id: `${baseWidgetName}-options-disabled`, + labelName: i18n.t("editor.inspect.setter_label.disabled"), + attrName: "disabled", + setterType: "INPUT_SETTER", + expectedType: VALIDATION_TYPES.BOOLEAN, + }, + ], + }, + ], + }, { id: `${baseWidgetName}-toolbar`, groupName: i18n.t("editor.inspect.setter_group.data"), diff --git a/apps/builder/src/widgetLibrary/TableWidget/table.tsx b/apps/builder/src/widgetLibrary/TableWidget/table.tsx index cd04d06083..3eff18f311 100644 --- a/apps/builder/src/widgetLibrary/TableWidget/table.tsx +++ b/apps/builder/src/widgetLibrary/TableWidget/table.tsx @@ -4,7 +4,7 @@ import { TableWidgetProps, WrappedTableProps } from "./interface" import { ColumnDef } from "@tanstack/react-table" export const WrappedTable: FC = (props) => { - const { originData, emptyState } = props + const { originData, loading, emptyState } = props let columnsDef: ColumnDef[] = useMemo(() => { let l: ColumnDef[] = [] @@ -16,7 +16,7 @@ export const WrappedTable: FC = (props) => { }) }) } - console.log(l,'l') + return l }, [originData]) @@ -24,6 +24,8 @@ export const WrappedTable: FC = (props) => { = (props) => { } export const TableWidget: FC = (props) => { - const { originData, emptyState } = props - return + const { originData, emptyState, loading } = props + + return } diff --git a/apps/builder/src/widgetLibrary/TableWidget/widgetConfig.tsx b/apps/builder/src/widgetLibrary/TableWidget/widgetConfig.tsx index 4e09e5d069..eb2fc24e8d 100644 --- a/apps/builder/src/widgetLibrary/TableWidget/widgetConfig.tsx +++ b/apps/builder/src/widgetLibrary/TableWidget/widgetConfig.tsx @@ -76,5 +76,6 @@ export const TABLE_WIDGET_CONFIG: WidgetConfig = { sessionType: "PRESENTATION", defaults: { originData: `{{${JSON.stringify(fakeOriginData)}}}`, + emptyState: "No rows found" }, } diff --git a/illa-design b/illa-design index 3a1ffdce0d..429dcf9f0a 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit 3a1ffdce0de3918331ca863f634fe6f84efc2a20 +Subproject commit 429dcf9f0a4282f5b1a4fa23d63fb608f60f20df From daa17535e6dfed8ca8e1ec2bb414fcd78ea63307 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Mon, 19 Sep 2022 19:39:03 +0800 Subject: [PATCH 03/85] feat: update --- .../PanelSetters/ColumnSetter/index.tsx | 36 +++++++++- .../context/optionListContext.tsx | 4 +- .../widgetLibrary/TableWidget/interface.ts | 7 +- .../widgetLibrary/TableWidget/panelConfig.tsx | 8 +-- .../src/widgetLibrary/TableWidget/table.tsx | 69 +++++++++++++------ .../TableWidget/widgetConfig.tsx | 4 +- 6 files changed, 95 insertions(+), 33 deletions(-) diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/index.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/index.tsx index 5f7a6fc820..94f1abd2bb 100644 --- a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/index.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/index.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from "react" +import { FC, useCallback, useEffect, useMemo } from "react" import { OptionListHeader } from "./header" import { ListBody } from "./body" import { OptionListSetterProps } from "./interface" @@ -6,6 +6,11 @@ import { ListStyle } from "./style" import { generateNewOptionItem } from "./utils/generateNewOptions" import { OptionListSetterProvider } from "./context/optionListContext" import { useTranslation } from "react-i18next" +import { useSelector } from "react-redux" +import { RootState } from "@/store" +import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector" +import { get } from "lodash" +import { ColumnDef } from "@tanstack/react-table" export const ColumnSetter: FC = (props) => { const { @@ -23,9 +28,38 @@ export const ColumnSetter: FC = (props) => { handleUpdateDsl(attrName, [...value, newItem]) }, [value, attrName, handleUpdateDsl]) + + const targetComponentProps = useSelector>( + rootState => { + const executionTree = getExecutionResult(rootState) + return get(executionTree, widgetDisplayName, {}) + }, + ) + + const data = useMemo(() => { + return get(targetComponentProps, "data", []) + }, [targetComponentProps]) + + if (!Array.isArray(childrenSetter) || childrenSetter.length === 0) { return null } + console.log(props, data,'ColumnSetter props') + + useEffect(()=> { + if (data.length) { + let l: ColumnDef[] = [] + if (data && data.length > 0) { + Object.keys(data[0]).forEach((key) => { + l.push({ + header: key, + accessorKey: key, + }) + }) + } + handleUpdateDsl(attrName, l) + } + }, [data]) return ( , - | "loading"> { - originData: object[] + | "loading" | "columns"> { + data: object[] emptyState?: string } -export interface TableWidgetProps extends WrappedTableProps { +export interface TableWidgetProps extends WrappedTableProps, BaseWidgetProps { } diff --git a/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx index a65cf45ca3..6da6ab9195 100644 --- a/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx +++ b/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx @@ -13,7 +13,7 @@ export const TABLE_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-basic-data`, labelName: i18n.t("editor.inspect.setter_label.data"), - attrName: "originData", + attrName: "data", isSetterSingleRow: true, setterType: "INPUT_SETTER", }, @@ -42,12 +42,10 @@ export const TABLE_PANEL_CONFIG: PanelConfig[] = [ groupName: i18n.t("editor.inspect.setter_group.column"), children: [ { - id: `${baseWidgetName}-basic-options`, + id: `${baseWidgetName}-basic-columns`, useCustomLayout: true, - attrName: "manualOptions", + attrName: "columns", setterType: "COLUMN_SETTER", - bindAttrName: ["optionConfigureMode"], - shown: (value) => !value || value === "static", childrenSetter: [ { id: `${baseWidgetName}-options-label`, diff --git a/apps/builder/src/widgetLibrary/TableWidget/table.tsx b/apps/builder/src/widgetLibrary/TableWidget/table.tsx index 3eff18f311..19b83af22c 100644 --- a/apps/builder/src/widgetLibrary/TableWidget/table.tsx +++ b/apps/builder/src/widgetLibrary/TableWidget/table.tsx @@ -1,29 +1,16 @@ -import { FC, useMemo } from "react" +import { FC, useEffect, useMemo } from "react" import { Table } from "@illa-design/table" import { TableWidgetProps, WrappedTableProps } from "./interface" import { ColumnDef } from "@tanstack/react-table" export const WrappedTable: FC = (props) => { - const { originData, loading, emptyState } = props - - let columnsDef: ColumnDef[] = useMemo(() => { - let l: ColumnDef[] = [] - if (originData && originData.length > 0) { - Object.keys(originData[0]).forEach((key) => { - l.push({ - header: key, - accessorKey: key, - }) - }) - } - - return l - }, [originData]) + const { data, loading, emptyState, columns } = props + console.log({ columns }) return (
= (props) => { } export const TableWidget: FC = (props) => { - const { originData, emptyState, loading } = props + const { + data, + emptyState, + loading, + columns, + displayName, + handleUpdateDsl, + handleUpdateGlobalData, + handleDeleteGlobalData, + } = props + + let columnsDef = useMemo(() => { + console.log("data update") + if (columns?.length) { + return columns + } + let l: ColumnDef[] = [] + if (data && data.length > 0) { + Object.keys(data[0]).forEach((key) => { + l.push({ + header: key, + accessorKey: key, + }) + }) + } + + return l + }, [data]) + + useEffect(() => { + handleUpdateGlobalData(displayName, { + columns: columnsDef, + }) + return () => { + handleDeleteGlobalData(displayName) + } + }, [ + columnsDef, + displayName, + handleUpdateGlobalData, + handleUpdateDsl, + handleDeleteGlobalData, + ]) - return + return } diff --git a/apps/builder/src/widgetLibrary/TableWidget/widgetConfig.tsx b/apps/builder/src/widgetLibrary/TableWidget/widgetConfig.tsx index eb2fc24e8d..28cd647827 100644 --- a/apps/builder/src/widgetLibrary/TableWidget/widgetConfig.tsx +++ b/apps/builder/src/widgetLibrary/TableWidget/widgetConfig.tsx @@ -2,7 +2,7 @@ import { TextWidgetIcon } from "@illa-design/icon" import { WidgetConfig } from "@/widgetLibrary/interface" import i18n from "@/i18n/config" -const fakeOriginData = [ +const fakeData = [ { name: "Gerard Gislason", company: "Ameliorated explicit open system", @@ -75,7 +75,7 @@ export const TABLE_WIDGET_CONFIG: WidgetConfig = { keywords: ["Table", "表格"], sessionType: "PRESENTATION", defaults: { - originData: `{{${JSON.stringify(fakeOriginData)}}}`, + data: `{{${JSON.stringify(fakeData)}}}`, emptyState: "No rows found" }, } From 0a24b863ca0c0520cb6e22e4c322d9ca04c06425 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Tue, 20 Sep 2022 15:31:56 +0800 Subject: [PATCH 04/85] feat: update --- .../PanelSetters/ColumnSetter/actionMenu.tsx | 12 +-- .../PanelSetters/ColumnSetter/body.tsx | 16 ++-- .../{listItem.tsx => columnItem.tsx} | 10 +-- .../context/columnListContext.tsx | 81 +++++++++++++++++++ .../context/optionListContext.tsx | 81 ------------------- .../PanelSetters/ColumnSetter/empty.tsx | 2 +- .../PanelSetters/ColumnSetter/index.tsx | 12 +-- .../PanelSetters/ColumnSetter/interface.ts | 8 +- .../OptionListSetter/interface.ts | 2 + illa-design | 2 +- 10 files changed, 114 insertions(+), 112 deletions(-) rename apps/builder/src/page/App/components/PanelSetters/ColumnSetter/{listItem.tsx => columnItem.tsx} (85%) create mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/context/columnListContext.tsx delete mode 100644 apps/builder/src/page/App/components/PanelSetters/ColumnSetter/context/optionListContext.tsx diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/actionMenu.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/actionMenu.tsx index 24c982eb41..3172cd4176 100644 --- a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/actionMenu.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/actionMenu.tsx @@ -2,15 +2,15 @@ import { FC, useContext } from "react" import { useTranslation } from "react-i18next" import { DropList } from "@illa-design/dropdown" import { globalColor, illaPrefix } from "@illa-design/theme" -import { ActionMenuProps } from "@/page/App/components/PanelSetters/OptionListSetter/interface" -import { OptionListSetterContext } from "@/page/App/components/PanelSetters/OptionListSetter/context/optionListContext" +import { ActionMenuProps } from "./interface" +import { ColumnListSetterContext } from "./context/columnListContext" const { Item } = DropList export const ActionMenu: FC = (props) => { const { index, handleCloseMode } = props - const { handleCopyOptionItem, handleDeleteOptionItem } = useContext( - OptionListSetterContext, + const { handleCopyColumnItem, handleDeleteColumnItem } = useContext( + ColumnListSetterContext ) const { t } = useTranslation() @@ -22,7 +22,7 @@ export const ActionMenu: FC = (props) => { "editor.inspect.setter_content.option_list.action_menu.duplicate", )} onClick={() => { - handleCopyOptionItem(index) + handleCopyColumnItem(index) handleCloseMode() }} /> @@ -33,7 +33,7 @@ export const ActionMenu: FC = (props) => { )} fontColor={globalColor(`--${illaPrefix}-red-03`)} onClick={() => { - handleDeleteOptionItem(index) + handleDeleteColumnItem(index) handleCloseMode() }} /> diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/body.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/body.tsx index 5eaed8f5bd..1434db1f7d 100644 --- a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/body.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/body.tsx @@ -1,20 +1,20 @@ import { FC, useContext } from "react" -import { ListItem } from "./listItem" -import { OptionListSetterContext } from "@/page/App/components/PanelSetters/OptionListSetter/context/optionListContext" -import { EmptyBody } from "@/page/App/components/PanelSetters/OptionListSetter/empty" +import { ColumnItem } from "./columnItem" +import { ColumnListSetterContext } from "./context/columnListContext" +import { EmptyBody } from "./empty" export const ListBody: FC = () => { - const { optionItems } = useContext(OptionListSetterContext) + const { columnItems } = useContext(ColumnListSetterContext) - if (!optionItems || !Array.isArray(optionItems) || optionItems.length === 0) + if (!columnItems || !Array.isArray(columnItems) || columnItems.length === 0) return return ( <> - {optionItems.map((item, index) => { - const { label, value, id } = item + {columnItems.map((item, index) => { + const { label, value, id, } = item return ( - = (props) => { +export const ColumnItem: FC = (props) => { const { id, label, value, index } = props - const { handleMoveOptionItem } = useContext(OptionListSetterContext) + const { handleMoveColumnItem } = useContext(ColumnListSetterContext) const ref = useRef(null) const [, drop] = useDrop({ @@ -39,7 +39,7 @@ export const ListItem: FC = (props) => { if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) { return } - handleMoveOptionItem(dragIndex, hoverIndex) + handleMoveColumnItem(dragIndex, hoverIndex) item.index = hoverIndex }, }) diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/context/columnListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/context/columnListContext.tsx new file mode 100644 index 0000000000..8c2a9df07f --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/context/columnListContext.tsx @@ -0,0 +1,81 @@ +import { createContext, ReactNode, FC, useCallback } from "react" +import { ColumnItemShape } from "../interface" +import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" +import { generateOptionItemId } from "../utils/generateNewOptions" + +interface ProviderProps { + columnItems: ColumnItemShape[] + childrenSetter: PanelFieldConfig[] + widgetDisplayName: string + attrPath: string + handleUpdateDsl: (attrPath: string, value: any) => void + children: ReactNode +} + +interface Inject extends Omit { + handleDeleteColumnItem: (index: number) => void + handleCopyColumnItem: (index: number) => void + handleMoveColumnItem: (dragIndex: number, hoverIndex: number) => void +} + +export const ColumnListSetterContext = createContext({} as Inject) + +export const ColumnsSetterProvider: FC = (props) => { + const { columnItems, attrPath, handleUpdateDsl } = props + + const handleDeleteColumnItem = useCallback( + (index: number) => { + const updatedArray = columnItems.filter( + (optionItem: Record, i: number) => { + return i !== index + }, + ) + handleUpdateDsl(attrPath, updatedArray) + }, + [columnItems, handleUpdateDsl, attrPath], + ) + + const handleCopyColumnItem = useCallback( + (index: number) => { + let targetOptionItem = columnItems.find( + (optionItem: Record, i: number) => { + return i === index + }, + ) + if (!targetOptionItem) return + targetOptionItem = { + ...targetOptionItem, + id: generateOptionItemId(), + } + const updatedArray = [...columnItems, targetOptionItem] + handleUpdateDsl(attrPath, updatedArray) + }, + [columnItems, handleUpdateDsl, attrPath], + ) + + const handleMoveColumnItem = useCallback( + (dragIndex: number, hoverIndex: number) => { + const dragOptionItem = columnItems[dragIndex] + const newOptions = [...columnItems] + newOptions.splice(dragIndex, 1) + newOptions.splice(hoverIndex, 0, dragOptionItem) + handleUpdateDsl(attrPath, newOptions) + }, + [attrPath, columnItems, handleUpdateDsl], + ) + + const value = { + ...props, + handleDeleteColumnItem, + handleCopyColumnItem, + handleMoveColumnItem, + } + + return ( + + {props.children} + + ) +} + +ColumnsSetterProvider.displayName = "ColumnsSetterProvider" diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/context/optionListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/context/optionListContext.tsx deleted file mode 100644 index 11ad14e846..0000000000 --- a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/context/optionListContext.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { createContext, ReactNode, FC, useCallback } from "react" -import { OptionItemShape } from "@/page/App/components/PanelSetters/OptionListSetter/interface" -import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" -import { generateOptionItemId } from "@/page/App/components/PanelSetters/OptionListSetter/utils/generateNewOptions" - -interface ProviderProps { - optionItems: OptionItemShape[] - childrenSetter: PanelFieldConfig[] - widgetDisplayName: string - attrPath: string - handleUpdateDsl: (attrPath: string, value: any) => void - children: ReactNode -} - -interface Inject extends Omit { - handleDeleteOptionItem: (index: number) => void - handleCopyOptionItem: (index: number) => void - handleMoveOptionItem: (dragIndex: number, hoverIndex: number) => void -} - -export const OptionListSetterContext = createContext({} as Inject) - -export const OptionListSetterProvider: FC = (props) => { - const { optionItems, attrPath, handleUpdateDsl } = props - - const handleDeleteOptionItem = useCallback( - (index: number) => { - const updatedArray = optionItems.filter( - (optionItem: Record, i: number) => { - return i !== index - }, - ) - handleUpdateDsl(attrPath, updatedArray) - }, - [optionItems, handleUpdateDsl, attrPath], - ) - - const handleCopyOptionItem = useCallback( - (index: number) => { - let targetOptionItem = optionItems.find( - (optionItem: Record, i: number) => { - return i === index - }, - ) - if (!targetOptionItem) return - targetOptionItem = { - ...targetOptionItem, - id: generateOptionItemId(), - } - const updatedArray = [...optionItems, targetOptionItem] - handleUpdateDsl(attrPath, updatedArray) - }, - [optionItems, handleUpdateDsl, attrPath], - ) - - const handleMoveOptionItem = useCallback( - (dragIndex: number, hoverIndex: number) => { - const dragOptionItem = optionItems[dragIndex] - const newOptions = [...optionItems] - newOptions.splice(dragIndex, 1) - newOptions.splice(hoverIndex, 0, dragOptionItem) - handleUpdateDsl(attrPath, newOptions) - }, - [attrPath, optionItems, handleUpdateDsl], - ) - - const value = { - ...props, - handleDeleteOptionItem, - handleCopyOptionItem, - handleMoveOptionItem, - } - - return ( - - {props.children} - - ) -} - -OptionListSetterProvider.displayName = "OptionListSetterProvider" diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/empty.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/empty.tsx index 27bd94b996..e419a14c6c 100644 --- a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/empty.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/empty.tsx @@ -2,7 +2,7 @@ import { FC } from "react" import { emptyEmptyBodyStyle } from "@/page/App/components/PanelSetters/OptionListSetter/style" export const EmptyBody: FC = () => { - return
No options
+ return
No columns
} EmptyBody.displayName = "OptionListEmptyBody" diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/index.tsx b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/index.tsx index 94f1abd2bb..5fc5ea171d 100644 --- a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/index.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/index.tsx @@ -1,10 +1,10 @@ import { FC, useCallback, useEffect, useMemo } from "react" import { OptionListHeader } from "./header" import { ListBody } from "./body" -import { OptionListSetterProps } from "./interface" +import { ColumnListSetterProps } from "./interface" import { ListStyle } from "./style" import { generateNewOptionItem } from "./utils/generateNewOptions" -import { OptionListSetterProvider } from "./context/optionListContext" +import { ColumnsSetterProvider } from "./context/columnListContext" import { useTranslation } from "react-i18next" import { useSelector } from "react-redux" import { RootState } from "@/store" @@ -12,7 +12,7 @@ import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSe import { get } from "lodash" import { ColumnDef } from "@tanstack/react-table" -export const ColumnSetter: FC = (props) => { +export const ColumnSetter: FC = (props) => { const { attrName, handleUpdateDsl, @@ -62,10 +62,10 @@ export const ColumnSetter: FC = (props) => { }, [data]) return ( - @@ -76,7 +76,7 @@ export const ColumnSetter: FC = (props) => { /> - + ) } diff --git a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/interface.ts b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/interface.ts index 8d9749362d..6bf55a0202 100644 --- a/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/interface.ts +++ b/apps/builder/src/page/App/components/PanelSetters/ColumnSetter/interface.ts @@ -1,7 +1,7 @@ import { BaseSetter } from "@/page/App/components/PanelSetters/interface" import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" -export interface OptionItemShape { +export interface ColumnItemShape { id: string value?: string label?: string @@ -13,7 +13,7 @@ export interface HeaderProps { handleAddOption: () => void } -export interface ListItemProps extends Omit { +export interface ColumnItemProps extends Omit { index: number } @@ -25,8 +25,8 @@ export interface MoreProps { index: number } -export interface OptionListSetterProps extends BaseSetter { - value: OptionItemShape[] +export interface ColumnListSetterProps extends BaseSetter { + value: ColumnItemShape[] childrenSetter?: PanelFieldConfig[] } diff --git a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/interface.ts b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/interface.ts index 8d9749362d..6398849109 100644 --- a/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/interface.ts +++ b/apps/builder/src/page/App/components/PanelSetters/OptionListSetter/interface.ts @@ -3,6 +3,8 @@ import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" export interface OptionItemShape { id: string + header: string + accessorKey: string value?: string label?: string disabled?: string diff --git a/illa-design b/illa-design index 429dcf9f0a..1f0a6b6aed 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit 429dcf9f0a4282f5b1a4fa23d63fb608f60f20df +Subproject commit 1f0a6b6aed5629150f4989aa95f10d68ce4b1690 From 6f2261d42b2cedea539989122889d8a42f1ea68a Mon Sep 17 00:00:00 2001 From: smallSohoSolo Date: Tue, 20 Sep 2022 17:46:07 +0800 Subject: [PATCH 05/85] feat: alternative action creator --- apps/builder/src/i18n/locale/en-US.json | 9 +- apps/builder/src/i18n/locale/zh-CN.json | 6 +- .../ActionResourceCreator/index.tsx | 21 +-- .../ActionResourceCreator/interface.ts | 7 +- .../ActionResourceSelector/index.tsx | 156 ++++++++++++------ .../ActionResourceSelector/interface.ts | 13 +- .../ActionResourceSelector/style.ts | 15 -- .../ActionTypeSelector/index.tsx | 63 +++---- .../ActionTypeSelector/interface.ts | 10 +- .../ActionTypeSelector/style.ts | 22 +-- .../Actions/ActionGenerator/index.tsx | 151 ++++++----------- .../Actions/ActionGenerator/interface.ts | 8 - .../src/page/App/components/Actions/api.ts | 12 +- .../redux/currentApp/action/actionState.ts | 40 ++++- .../src/redux/resource/resourceState.ts | 19 +++ illa-design | 2 +- 16 files changed, 263 insertions(+), 291 deletions(-) diff --git a/apps/builder/src/i18n/locale/en-US.json b/apps/builder/src/i18n/locale/en-US.json index dc87309202..0de38a97a5 100644 --- a/apps/builder/src/i18n/locale/en-US.json +++ b/apps/builder/src/i18n/locale/en-US.json @@ -4,6 +4,7 @@ "exit_preview": "Exit Preview", "edit": "Edit", "edit_at": "Edited at", + "created_at": "Created at", "title": "Welcome to illa", "description": { "part1": "This is an example without namespaces." @@ -186,8 +187,10 @@ "valid_name": "Can only contain letters, numbers, '_' or '$', start with '_' or a letter", "load_action_list_fail": "Failed to get Action list: {{message}}", "load_resource_fail": "Failed to get resource list: {{message}}", - "success_created": "Successfully created!", - "success_saved": "Successfully saved!", + "success_created": "Successfully created", + "success_deleted": "Successfully deleted", + "failed_to_delete": "Failed to delete", + "success_saved": "Successfully saved", "failed": "Failed to connect to server" }, "action_generator": { @@ -786,7 +789,7 @@ "delete_success": "Deleted successfully", "delete_fail": "Failed to delete", "create_resource": "Create New", - "create_success": "Create Success!", + "create_success": "Create Success", "edit_success": "Edit Success" } }, diff --git a/apps/builder/src/i18n/locale/zh-CN.json b/apps/builder/src/i18n/locale/zh-CN.json index 6bbc496d35..ec7bdc07c3 100644 --- a/apps/builder/src/i18n/locale/zh-CN.json +++ b/apps/builder/src/i18n/locale/zh-CN.json @@ -4,6 +4,7 @@ "exit_preview": "退出预览", "edit": "编辑", "edit_at": "上次编辑于", + "created_at": "创建于", "title": "欢迎来到艾拉云", "description": { "part1": "这是一个示例。" @@ -186,8 +187,9 @@ "valid_name": "仅能包含字母，数字，'_' 或 '$'， 请以 '_' 或字母开头", "load_action_list_fail": "获取 Action 列表失败: {{message}}", "load_resource_fail": "获取资源列表失败: {{message}}", - "success_created": "创建成功!", - "success_saved": "保存成功!", + "success_created": "创建成功", + "success_saved": "保存成功", + "success_deleted": "删除成功", "failed": "服务器连接失败" }, "action_generator": { diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/index.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/index.tsx index 81556bb7f0..44c101f69f 100644 --- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/index.tsx +++ b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/index.tsx @@ -1,5 +1,5 @@ import { FC, useRef, useState } from "react" -import { useSelector, useDispatch } from "react-redux" +import { useDispatch, useSelector } from "react-redux" import { Button } from "@illa-design/button" import { PaginationPreIcon } from "@illa-design/icon" import { Notification } from "@illa-design/notification" @@ -11,13 +11,12 @@ import { Resource, ResourceContent } from "@/redux/resource/resourceState" import { resourceActions } from "@/redux/resource/resourceSlice" import { ActionResourceCreatorProps, ConnectionRef } from "./interface" import { - formContainerStyle, - formFooterStyle, backIconStyle, - formFooterFillingStyle, createResourceBtnStyle, - formTitleStyle, formBodyStyle, + formContainerStyle, + formFooterFillingStyle, + formFooterStyle, } from "./style" import { Message } from "@illa-design/message" import { getAllResources } from "@/redux/resource/resourceSelector" @@ -27,7 +26,6 @@ export const ActionResourceCreator: FC = ( ) => { const { resourceId, - category, onBack, onCreated, resourceType: resourceTypeProps, @@ -44,10 +42,6 @@ export const ActionResourceCreator: FC = ( const [createBtnLoading, setCreateBtnLoading] = useState(false) const [testConnectLoading, setTestConnectLoading] = useState(false) - const resourceTitle = resourceType - ? i18n.t(`editor.action.resource.${resourceType}.name`) - : "" - function submitForm() { formRef.current?.requestSubmit() } @@ -130,9 +124,6 @@ export const ActionResourceCreator: FC = ( return (
-
- {i18n.t("editor.action.form.title.configure", { name: resourceTitle })} -
{resourceType === "mysql" ? ( = (
- {category === "databases" ? ( + {resourceType !== "restapi" && ( - ) : null} + )}
- ) -} + console.log({ columns }) + return ( +
+ ) + }, +) export const TableWidget: FC = (props) => { const { @@ -33,8 +34,11 @@ export const TableWidget: FC = (props) => { handleUpdateDsl, handleUpdateGlobalData, handleDeleteGlobalData, + updateComponentHeight, } = props + const tableWrapperRef = useRef(null) + let columnsDef = useMemo(() => { console.log("data update") if (columns?.length) { @@ -68,5 +72,15 @@ export const TableWidget: FC = (props) => { handleDeleteGlobalData, ]) - return + useEffect(() => { + if (tableWrapperRef.current) { + updateComponentHeight(tableWrapperRef.current?.clientHeight) + } + }, [ + data, + ]) + + return
+ +
} From a203fcfd079be993b66949cb0e20183ff03ccc3d Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Tue, 20 Sep 2022 18:09:34 +0800 Subject: [PATCH 07/85] feat: update --- illa-design | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/illa-design b/illa-design index 1f0a6b6aed..3c8394b676 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit 1f0a6b6aed5629150f4989aa95f10d68ce4b1690 +Subproject commit 3c8394b676160f4d2859aeece6b11a8764c84320 From b9cdcb46462af1794bcbf6fbd64ef2e1cbf56ec1 Mon Sep 17 00:00:00 2001 From: smallSohoSolo Date: Tue, 20 Sep 2022 19:20:07 +0800 Subject: [PATCH 08/85] feat: change create action --- apps/builder/src/i18n/locale/en-US.json | 3 +- apps/builder/src/i18n/locale/zh-CN.json | 3 +- .../components/Actions/ActionCard/index.tsx | 18 + .../Actions/ActionCard/interface.ts | 9 + .../components/Actions/ActionCard/style.ts | 34 ++ .../MySQLConfigure/index.tsx | 329 ------------------ .../MySQLConfigure/interface.ts | 14 - .../MySQLConfigure/style.ts | 192 ---------- .../RestAPIConfigure/BasicAuth.tsx | 52 --- .../RestAPIConfigure/BearerAuth.tsx | 25 -- .../RestAPIConfigure/ParamList/index.tsx | 111 ------ .../RestAPIConfigure/ParamList/interface.ts | 8 - .../RestAPIConfigure/ParamList/style.tsx | 59 ---- .../RestAPIConfigure/index.tsx | 212 ----------- .../RestAPIConfigure/interface.ts | 31 -- .../RestAPIConfigure/style.ts | 5 - .../ActionResourceCreator/index.tsx | 205 ++--------- .../ActionResourceCreator/interface.ts | 12 +- .../ActionResourceCreator/style.ts | 9 + .../ActionResourceCreator/style.tsx | 36 -- .../ActionResourceSelector/index.tsx | 17 +- .../ActionTypeSelector/index.tsx | 41 +-- .../ActionTypeSelector/interface.ts | 8 - .../ActionTypeSelector/style.ts | 45 +-- .../Actions/ActionGenerator/index.tsx | 31 +- .../ActionPanel/ResourceChoose/index.tsx | 21 +- .../Dashboard/DashboardResources/index.tsx | 8 - .../DashboardResourceItemMenu/index.tsx | 9 - .../components/ResourceEditor/index.tsx | 72 ---- apps/builder/src/page/status/500/index.tsx | 1 - .../redux/currentApp/action/actionState.ts | 2 +- .../src/redux/resource/resourceState.ts | 25 +- 32 files changed, 177 insertions(+), 1470 deletions(-) create mode 100644 apps/builder/src/page/App/components/Actions/ActionCard/index.tsx create mode 100644 apps/builder/src/page/App/components/Actions/ActionCard/interface.ts create mode 100644 apps/builder/src/page/App/components/Actions/ActionCard/style.ts delete mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/index.tsx delete mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/interface.ts delete mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/style.ts delete mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/BasicAuth.tsx delete mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/BearerAuth.tsx delete mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/ParamList/index.tsx delete mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/ParamList/interface.ts delete mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/ParamList/style.tsx delete mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/index.tsx delete mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/interface.ts delete mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/RestAPIConfigure/style.ts create mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/style.ts delete mode 100644 apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/style.tsx delete mode 100644 apps/builder/src/page/Dashboard/components/ResourceEditor/index.tsx diff --git a/apps/builder/src/i18n/locale/en-US.json b/apps/builder/src/i18n/locale/en-US.json index 0de38a97a5..2b26203142 100644 --- a/apps/builder/src/i18n/locale/en-US.json +++ b/apps/builder/src/i18n/locale/en-US.json @@ -275,6 +275,7 @@ }, "resource": { "transformer": { + "name": "Transformer", "placeholder": { "tip": "// Tip: assign your external references to variables instead of chaining off the curly brackets." }, @@ -397,7 +398,7 @@ "new": "New" } }, - "postgres": { + "postgresql": { "name": "Postgres" }, "redis": { diff --git a/apps/builder/src/i18n/locale/zh-CN.json b/apps/builder/src/i18n/locale/zh-CN.json index ec7bdc07c3..5ed31a8af2 100644 --- a/apps/builder/src/i18n/locale/zh-CN.json +++ b/apps/builder/src/i18n/locale/zh-CN.json @@ -273,6 +273,7 @@ }, "resource": { "transformer": { + "name": "Transformer", "placeholder": { "tip": "// Tip: assign your external references to variables instead of chaining off the curly brackets." }, @@ -395,7 +396,7 @@ "new": "新增" } }, - "postgres": { + "postgresql": { "name": "Postgres" }, "redis": { diff --git a/apps/builder/src/page/App/components/Actions/ActionCard/index.tsx b/apps/builder/src/page/App/components/Actions/ActionCard/index.tsx new file mode 100644 index 0000000000..5fcd4af618 --- /dev/null +++ b/apps/builder/src/page/App/components/Actions/ActionCard/index.tsx @@ -0,0 +1,18 @@ +import { FC } from "react" +import { ActionTypeSelectorCardProps } from "./interface" +import { applyItemStyle, nameStyle } from "./style" +import { getIconFromActionType } from "@/page/App/components/Actions/getIcon" +import { getActionNameFromActionType } from "@/redux/resource/resourceState" + +export const ActionCard: FC = (props) => { + const { actionType, onSelect } = props + + return ( +
onSelect?.(actionType)}> + {getIconFromActionType(actionType, "32px")} + {getActionNameFromActionType(actionType)} +
+ ) +} + +ActionCard.displayName = "ActionCard" diff --git a/apps/builder/src/page/App/components/Actions/ActionCard/interface.ts b/apps/builder/src/page/App/components/Actions/ActionCard/interface.ts new file mode 100644 index 0000000000..026e27f4cb --- /dev/null +++ b/apps/builder/src/page/App/components/Actions/ActionCard/interface.ts @@ -0,0 +1,9 @@ +import { ResourceDataItem } from "@/page/App/components/Actions/ActionGenerator/config" +import { ActionType } from "@/redux/currentApp/action/actionState" + +export type ActionTypeCategory = "databases" | "apis" | "jsTransformer" + +export interface ActionTypeSelectorCardProps extends ResourceDataItem { + onSelect?: (item: ActionType) => void + category: ActionTypeCategory +} diff --git a/apps/builder/src/page/App/components/Actions/ActionCard/style.ts b/apps/builder/src/page/App/components/Actions/ActionCard/style.ts new file mode 100644 index 0000000000..952bb73621 --- /dev/null +++ b/apps/builder/src/page/App/components/Actions/ActionCard/style.ts @@ -0,0 +1,34 @@ +import { css, SerializedStyles } from "@emotion/react" +import { globalColor, illaPrefix } from "@illa-design/theme" + +export function applyItemStyle(): SerializedStyles { + 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; + ${hoverStyle}; + ` +} + +export const nameStyle = css` + margin-top: 8px; + font-size: 14px; + font-weight: 500; + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; +` diff --git a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/index.tsx b/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/index.tsx deleted file mode 100644 index b8d474a37f..0000000000 --- a/apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/MySQLConfigure/index.tsx +++ /dev/null @@ -1,329 +0,0 @@ -import { forwardRef, useImperativeHandle, useState } from "react" -import { css } from "@emotion/react" -import { Controller, SubmitHandler, useForm } from "react-hook-form" -import { Input, Password, TextArea } from "@illa-design/input" -import { Switch } from "@illa-design/switch" -import { InputNumber } from "@illa-design/input-number" -import { useSelector } from "react-redux" -import { - connectTextStyle, - descriptionStyle, - errorMessageStyle, - formStyle, - gridContainerStyle, - gridRowContainerStyle, - groupTitleStyle, - labelTextStyle, - requiredLabelTextStyle, - splitLineStyle, - formPaddingStyle, - hostnamePortStyle, - switchAreaStyle, - switchDescriptionStyle, - usernamePasswordStyle, - applyGridColIndex, -} from "./style" -import { MySQLConfigureProps, MySQLConfigureValues } from "./interface" -import i18n from "@/i18n/config" -import { getAllResources } from "@/redux/resource/resourceSelector" -import { MysqlResource } from "@/redux/resource/resourceState" - -export const MySQLConfigure = forwardRef( - (props, ref) => { - const { resourceId, connectionRef, onSubmit, onTestConnection } = props - const resourceConfig = useSelector(getAllResources).find( - (i) => i.resourceId === resourceId, - ) - const [enableSSL, setEnableSSL] = useState( - (resourceConfig?.content as MysqlResource)?.ssl?.ssl, - ) - const { - handleSubmit, - control, - formState: { errors }, - getValues, - trigger, - } = useForm({ - mode: "onChange", - defaultValues: { - resourceName: resourceConfig?.resourceName, - ...resourceConfig?.content, - } || { - port: 3306, - }, - }) - - const testConnection = () => { - const data = getValues() - const { resourceName, ...content } = data - - trigger().then((res)=>{ - if (res) { - onTestConnection?.({ - resourceName: resourceName, - resourceType: "mysql", - content: { - ...content, - port: content.port?.toString(), - }, - }) - } - }) - } - - useImperativeHandle(connectionRef, () => { - { - return { testConnection } - } - }) - - const submitForm: SubmitHandler = (data) => { - const { resourceName, ...content } = data - onSubmit?.({ - resourceName: resourceName, - resourceType: "mysql", - content: { - ...content, - port: content.port?.toString(), - ssh: { ssh: false }, - ssl: { ...content.ssl, ssl: enableSSL }, - }, - }) - } - return ( -
-
-
- - ( - - )} - rules={{ - required: i18n.t("editor.action.form.required") as string, - }} - control={control} - name="resourceName" - /> - {errors.resourceName && ( -
- {errors.resourceName.message} -
- )} -
-
- -
- ( - - )} - control={control} - name="host" - rules={{ - required: i18n.t("editor.action.form.required") as string, - }} - /> - ( - - )} - control={control} - name="port" - rules={{ - required: i18n.t("editor.action.form.required") as string, - }} - /> -
- {(errors.host || errors.port) && ( -
-
{errors.host?.message}
-
{errors.port?.message}
-
- )} -
-
- - ( - - )} - control={control} - name="databaseName" - rules={{ - required: i18n.t("editor.action.form.required") as string, - }} - /> - {errors.databaseName && ( -
- {errors.databaseName.message} -
- )} -
-
- -
- ( - - )} - control={control} - name="databaseUsername" - /> - ( - - )} - control={control} - name="databasePassword" - /> -
-
- {i18n.t("editor.action.resource.mysql.tip.username_password")} -
-
-
- -
- {i18n.t("editor.action.resource.mysql.tip.connect_type")} -
-
-
-

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

-
- -
- { - setEnableSSL(val) - }} - /> -
-
- {i18n.t("editor.action.resource.mysql.tip.ssl_options")} -
-
-
-
- {enableSSL && ( - <> -
- - ( - - )} - control={control} - /> -
-
- - ( -