From b9632040c3ce8b80b36072c66cc95f3fb0e247b0 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 4 Nov 2022 18:45:47 +0800 Subject: [PATCH 01/31] feat: add menu --- apps/builder/src/i18n/locale/en-US.json | 3 + apps/builder/src/i18n/locale/zh-CN.json | 3 + .../MenuSetter/MenuSetter/body.tsx | 59 ++++++ .../MenuSetter/MenuSetter/columnItem.tsx | 20 +++ .../MenuSetter/context/columnListContext.tsx | 90 ++++++++++ .../MenuSetter/dragIconAndLabel.tsx | 98 ++++++++++ .../MenuSetter/MenuSetter/empty.tsx | 8 + .../MenuSetter/MenuSetter/header.tsx | 17 ++ .../MenuSetter/MenuSetter/index.tsx | 66 +++++++ .../MenuSetter/MenuSetter/interface.ts | 39 ++++ .../MenuSetter/MenuSetter/style.ts | 125 +++++++++++++ .../MenuSetter/utils/generateNewColumns.ts | 18 ++ .../MenuWidget/eventHandlerConfig.ts | 14 ++ .../src/widgetLibrary/MenuWidget/index.ts | 4 + .../src/widgetLibrary/MenuWidget/interface.ts | 25 +++ .../src/widgetLibrary/MenuWidget/menu.tsx | 38 ++++ .../widgetLibrary/MenuWidget/panelConfig.tsx | 169 ++++++++++++++++++ .../src/widgetLibrary/MenuWidget/utils.tsx | 11 ++ .../widgetLibrary/MenuWidget/widgetConfig.tsx | 21 +++ .../src/widgetLibrary/widgetBuilder.tsx | 12 ++ 20 files changed, 840 insertions(+) create mode 100644 apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/body.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/columnItem.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/context/columnListContext.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/dragIconAndLabel.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/empty.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/header.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/index.tsx create mode 100644 apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/interface.ts create mode 100644 apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/style.ts create mode 100644 apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/utils/generateNewColumns.ts create mode 100644 apps/builder/src/widgetLibrary/MenuWidget/eventHandlerConfig.ts create mode 100644 apps/builder/src/widgetLibrary/MenuWidget/index.ts create mode 100644 apps/builder/src/widgetLibrary/MenuWidget/interface.ts create mode 100644 apps/builder/src/widgetLibrary/MenuWidget/menu.tsx create mode 100644 apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx create mode 100644 apps/builder/src/widgetLibrary/MenuWidget/utils.tsx create mode 100644 apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx diff --git a/apps/builder/src/i18n/locale/en-US.json b/apps/builder/src/i18n/locale/en-US.json index 30120ddf35..01b91f255b 100644 --- a/apps/builder/src/i18n/locale/en-US.json +++ b/apps/builder/src/i18n/locale/en-US.json @@ -918,6 +918,9 @@ "switch": { "name": "Switch" }, + "menu": { + "name": "Menu" + }, "table": { "ascend": "Asc", "descend": "Desc", diff --git a/apps/builder/src/i18n/locale/zh-CN.json b/apps/builder/src/i18n/locale/zh-CN.json index b6b65aec7a..9043986deb 100644 --- a/apps/builder/src/i18n/locale/zh-CN.json +++ b/apps/builder/src/i18n/locale/zh-CN.json @@ -918,6 +918,9 @@ "switch": { "name": "开关" }, + "menu": { + "name": "菜单" + }, "table": { "ascend": "升序", "descend": "降序", diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/body.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/body.tsx new file mode 100644 index 0000000000..e321abb5d9 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/body.tsx @@ -0,0 +1,59 @@ +import { FC, useContext, useEffect, useState } from "react" +import { Reorder } from "framer-motion" +import { ColumnItem } from "./columnItem" +import { ColumnListSetterContext } from "./context/columnListContext" +import { EmptyBody } from "./empty" +import { isEqual } from "lodash" +import { removeNativeStyle } from "@/page/App/components/PanelSetters/TableSetter/ColumnSetter/style" + +export const ListBody: FC = () => { + const { columnItems, handleUpdateDsl, attrPath } = useContext( + ColumnListSetterContext, + ) + const [items, setItems] = useState(columnItems) + + useEffect(() => { + if (!isEqual(columnItems, items)) { + setItems(columnItems) + } + }, [columnItems]) + + if (!columnItems || !Array.isArray(columnItems) || columnItems.length === 0) + return + + return ( + + {items.map((item, index) => { + const { label, value, header, accessorKey, visible, custom, id } = item + return ( + { + handleUpdateDsl(attrPath, items) + }} + > + + + ) + })} + + ) +} diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/columnItem.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/columnItem.tsx new file mode 100644 index 0000000000..4728cc54d3 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/columnItem.tsx @@ -0,0 +1,20 @@ +import { FC, useRef } from "react" +import { ColumnItemProps } from "./interface" +import { optionListItemStyle } from "./style" +import { DragIconAndLabel } from "./dragIconAndLabel" + +export const ColumnItem: FC = (props) => { + const { accessorKey, header, value, visible, custom, index } = props + const ref = useRef(null) + + return ( +
+ +
+ ) +} diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/context/columnListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/context/columnListContext.tsx new file mode 100644 index 0000000000..607b1f6a1e --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/context/columnListContext.tsx @@ -0,0 +1,90 @@ +import { createContext, ReactNode, FC, useCallback } from "react" +import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" +import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface" +import { generateColumnItemId } from "../utils/generateNewColumns" + +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 + handleUpdateItemVisible: (attrName: string, visible?: boolean) => 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, + accessorKey: generateColumnItemId(), + } + 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 handleUpdateItemVisible = useCallback( + (attrName: string, visible?: boolean) => { + handleUpdateDsl(attrName, visible) + }, + [handleUpdateDsl], + ) + + const value = { + ...props, + handleDeleteColumnItem, + handleCopyColumnItem, + handleMoveColumnItem, + handleUpdateItemVisible, + } + + return ( + + {props.children} + + ) +} + +ColumnsSetterProvider.displayName = "ColumnsSetterProvider" diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/dragIconAndLabel.tsx new file mode 100644 index 0000000000..446f5278d6 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/dragIconAndLabel.tsx @@ -0,0 +1,98 @@ +import { FC, useCallback, useContext, useState } from "react" +import { useTranslation } from "react-i18next" +import { + ReduceIcon, + DragPointIcon, + EyeOffIcon, + EyeOnIcon, +} from "@illa-design/icon" +import { Trigger } from "@illa-design/trigger" +import { + baseIconStyle, + dragItemStyle, + iconAreaStyle, + labelNameAndIconStyle, + labelNameWrapperStyle, + movableIconWrapperStyle, +} from "./style" +import { DragIconAndLabelProps } from "./interface" +import { BaseModal } from "@/page/App/components/PanelSetters/PublicComponent/Modal" +import { ColumnListSetterContext } from "@/page/App/components/PanelSetters/TableSetter/ColumnSetter/context/columnListContext" + +export const DragIconAndLabel: FC = (props) => { + const { index, label, visible, custom } = props + const [modalVisible, setModalVisible] = useState(false) + const { + widgetDisplayName, + attrPath, + childrenSetter, + handleUpdateItemVisible, + handleDeleteColumnItem, + } = useContext(ColumnListSetterContext) + + const { t } = useTranslation() + + const handleCloseModal = useCallback(() => { + setModalVisible(false) + }, []) + + return ( + + } + trigger="click" + showArrow={false} + position="left" + clickOutsideToClose + onVisibleChange={(visible) => { + setModalVisible(visible) + }} + > +
+
+ + + + + {label || + t("editor.inspect.setter_content.option_list.list_no_label")} + +
+
+ { + handleUpdateItemVisible(`${attrPath}.${index}.visible`, !visible) + event.stopPropagation() + }} + > + {visible ? : } + + {custom ? ( + { + handleDeleteColumnItem(index) + event.stopPropagation() + }} + > + + + ) : null} +
+
+ + ) +} + +DragIconAndLabel.displayName = "DragIconAndLabel" diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/empty.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/empty.tsx new file mode 100644 index 0000000000..c26f593315 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/empty.tsx @@ -0,0 +1,8 @@ +import { FC } from "react" +import { emptyEmptyBodyStyle } from "./style" + +export const EmptyBody: FC = () => { + return
No columns
+} + +EmptyBody.displayName = "ColumnsEmptyBody" diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/header.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/header.tsx new file mode 100644 index 0000000000..f58fd3f720 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/header.tsx @@ -0,0 +1,17 @@ +import { FC } from "react" +import { optionListHeaderStyle } from "./style" +import { HeaderProps } from "./interface" +import { useTranslation } from "react-i18next" + +export const OptionListHeader: FC = (props) => { + const { labelName } = props + const { t } = useTranslation() + + return ( +
+
{labelName}
+
+ ) +} + +OptionListHeader.displayName = "OptionListHeader" diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/index.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/index.tsx new file mode 100644 index 0000000000..742180fada --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/index.tsx @@ -0,0 +1,66 @@ +import { FC, useCallback } from "react" +import { ListBody } from "./body" +import { ColumnListSetterProps } from "./interface" +import { + addIconStyle, + columnLabelStyle, + headerActionButtonStyle, + ListStyle, + optionListHeaderStyle, +} from "./style" +import { generateNewColumnItem } from "./utils/generateNewColumns" +import { ColumnsSetterProvider } from "./context/columnListContext" +import { useTranslation } from "react-i18next" +import { AddIcon } from "@illa-design/icon" + +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 = generateNewColumnItem(num) + handleUpdateDsl(attrName, [...value, newItem]) + }, [value, attrName, handleUpdateDsl]) + + if (!Array.isArray(childrenSetter) || childrenSetter.length === 0) { + return null + } + + return ( + +
+
+ {t("editor.inspect.setter_content.column_setter.label", { + number: value.length, + })} +
+
+ + {t("editor.inspect.setter_content.column_setter.new")} +
+
+
+
+
{t("editor.inspect.setter_content.column_setter.title")}
+
+ +
+ + ) +} + +ColumnSetter.displayName = "ColumnSetter" diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/interface.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/interface.ts new file mode 100644 index 0000000000..8242fe68a5 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/interface.ts @@ -0,0 +1,39 @@ +import { BaseSetter } from "@/page/App/components/PanelSetters/interface" +import { + PanelFieldConfig, + PanelLabelProps, +} from "@/page/App/components/InspectPanel/interface" +import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface" +import { ColumnsSelectSetter } from "@/page/App/components/PanelSetters/TableSetter/columsSelectSetter" + +export interface HeaderProps { + labelName: string + handleAddOption: () => void +} + +export interface ColumnItemProps extends Omit { + index: number +} + +export interface DragIconAndLabelProps { + index: number + label?: string + visible?: boolean + custom?: boolean +} + +export interface ColumnListSetterProps extends BaseSetter { + value: ColumnItemShape[] + 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/MenuSetter/MenuSetter/style.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/style.ts new file mode 100644 index 0000000000..4ace189039 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/style.ts @@ -0,0 +1,125 @@ +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; + margin: 0 8px; +` + +export const columnLabelStyle = css` + display: flex; + justify-content: space-between; + margin: 0 16px 16px; + font-size: 14px; + font-weight: 600; + line-height: 22px; +` + +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; + overflow: hidden; +` + +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 dragItemStyle = css` + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; +` + +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`)}; +` + +export const iconAreaStyle = css` + display: flex; + flex-direction: row; + gap: 16px; +` + +export const baseIconStyle = css` + font-size: 16px; + color: ${globalColor(`--${illaPrefix}-grayBlue-04`)}; + cursor: pointer; + :hover { + color: ${globalColor(`--${illaPrefix}-grayBlue-02`)}; + } +` + +export const eyeIconStyle = css` + visibility: hidden; + ${baseIconStyle} +` + +export const removeNativeStyle = css` + list-style: none; + padding: 0; + margin: 0; +` diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/utils/generateNewColumns.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/utils/generateNewColumns.ts new file mode 100644 index 0000000000..10382bde98 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/utils/generateNewColumns.ts @@ -0,0 +1,18 @@ +import { v4 } from "uuid" +import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface" + +export const generateColumnItemId = () => `column-${v4()}` + +export const generateNewColumnItem = (number: number): ColumnItemShape => { + const id = generateColumnItemId() + return { + header: `Column ${number}`, + id, + accessorKey: id, + enableSorting: true, + type: "text", + visible: true, + custom: true, + format: "YYYY-MM-DD", + } +} diff --git a/apps/builder/src/widgetLibrary/MenuWidget/eventHandlerConfig.ts b/apps/builder/src/widgetLibrary/MenuWidget/eventHandlerConfig.ts new file mode 100644 index 0000000000..90f447857d --- /dev/null +++ b/apps/builder/src/widgetLibrary/MenuWidget/eventHandlerConfig.ts @@ -0,0 +1,14 @@ +import { EventHandlerConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" + +export const MENU_EVENT_HANDLER_CONFIG: EventHandlerConfig = { + events: [ + { + label: i18n.t( + "editor.inspect.setter_content.widget_action_type_name.click", + ), + value: "click", + }, + ], + methods: [], +} diff --git a/apps/builder/src/widgetLibrary/MenuWidget/index.ts b/apps/builder/src/widgetLibrary/MenuWidget/index.ts new file mode 100644 index 0000000000..ff4eb97174 --- /dev/null +++ b/apps/builder/src/widgetLibrary/MenuWidget/index.ts @@ -0,0 +1,4 @@ +export { MENU_WIDGET_CONFIG } from "./widgetConfig" +export { MENU_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig" +export { MENU_PANEL_CONFIG } from "./panelConfig" +export { MenuWidget } from "./menu" diff --git a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts new file mode 100644 index 0000000000..b24b482bf6 --- /dev/null +++ b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts @@ -0,0 +1,25 @@ +import { MenuProps } from "@illa-design/menu" +import { BaseWidgetProps } from "@/widgetLibrary/interface" +import { HTMLAttributes } from "react" + +export interface WrappedMenuProps + extends HTMLAttributes, + MenuProps { + emptyState?: string + pageSize?: number + defaultSortKey?: string + defaultSortOrder?: "ascend" | "descend" + handleOnSortingChange?: () => void + handleOnPaginationChange?: () => void + handleOnColumnFiltersChange?: () => void +} + +const i = [ + { + title: "title", + icon: "icon", + hidden: true, + }, +] + +export interface MenuWidgetProps extends WrappedMenuProps, BaseWidgetProps {} diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx new file mode 100644 index 0000000000..cd1903d702 --- /dev/null +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -0,0 +1,38 @@ +import { FC, forwardRef, useEffect, useMemo } from "react" +import { Menu } from "@illa-design/menu" +import { MenuWidgetProps, WrappedMenuProps } from "./interface" + +export const WrappedMenu = forwardRef( + (props, ref) => { + const {} = props + + return + }, +) + +export const MenuWidget: FC = (props) => { + const { + emptyState, + pageSize, + displayName, + handleUpdateDsl, + handleUpdateGlobalData, + handleDeleteGlobalData, + } = props + + useEffect(() => { + handleUpdateGlobalData(displayName, {}) + return () => { + handleDeleteGlobalData(displayName) + } + }, [ + displayName, + handleUpdateGlobalData, + handleUpdateDsl, + handleDeleteGlobalData, + ]) + + return +} + +WrappedMenu.displayName = "WrappedMenu" diff --git a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx new file mode 100644 index 0000000000..a2d37c96e6 --- /dev/null +++ b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx @@ -0,0 +1,169 @@ +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 { MENU_EVENT_HANDLER_CONFIG } from "@/widgetLibrary/MenuWidget/eventHandlerConfig" +import { + HorizontalCenterIcon, + HorizontalEndIcon, + HorizontalStartIcon, + VerticalStartIcon, +} from "@illa-design/icon" + +const baseWidgetName = "table" + +export const MENU_PANEL_CONFIG: PanelConfig[] = [ + { + id: `${baseWidgetName}-column`, + groupName: i18n.t("editor.inspect.setter_group.column"), + children: [ + { + id: `${baseWidgetName}-basic-columns`, + useCustomLayout: true, + attrName: "columns", + setterType: "COLUMN_SETTER", + openDynamic: true, + childrenSetter: [ + { + id: `${baseWidgetName}-column-header`, + labelName: i18n.t("editor.inspect.setter_label.column_title"), + attrName: "header", + setterType: "INPUT_SETTER", + expectedType: VALIDATION_TYPES.STRING, + }, + { + id: `${baseWidgetName}-column-decimalPlaces`, + labelName: i18n.t("editor.inspect.setter_label.decimal_places"), + attrName: "decimalPlaces", + bindAttrName: ["type"], + shown: (value) => value === "number" || value === "percent", + placeholder: "{{ 0 }}", + setterType: "INPUT_SETTER", + expectedType: VALIDATION_TYPES.NUMBER, + }, + { + id: `${baseWidgetName}-column-format`, + labelName: i18n.t("editor.inspect.setter_label.format"), + attrName: "format", + bindAttrName: ["type"], + shown: (value) => value === "date", + setterType: "INPUT_SETTER", + expectedType: VALIDATION_TYPES.STRING, + }, + { + ...generatorEventHandlerConfig( + baseWidgetName, + MENU_EVENT_HANDLER_CONFIG.events, + ), + }, + { + id: `${baseWidgetName}-basic-enableSorting`, + labelName: i18n.t("editor.inspect.setter_label.enable_sorting"), + attrName: "enableSorting", + 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, + MENU_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, + }, + ], + }, + { + id: `${baseWidgetName}-layout`, + groupName: i18n.t("editor.inspect.setter_group.layout"), + children: [ + { + id: `${baseWidgetName}-layout-hidden`, + labelName: i18n.t("editor.inspect.setter_label.hidden"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.hidden"), + setterType: "DYNAMIC_SWITCH_SETTER", + attrName: "hidden", + useCustomLayout: true, + openDynamic: true, + expectedType: VALIDATION_TYPES.BOOLEAN, + }, + { + id: `${baseWidgetName}-layout-layout`, + labelName: i18n.t("editor.inspect.setter_label.layout"), + setterType: "RADIO_GROUP_SETTER", + attrName: "tabPosition", + options: [ + { + label: , + value: "horizontal", + }, + { + label: , + value: "vertical", + }, + ], + }, + { + id: `${baseWidgetName}-layout-align`, + labelName: i18n.t("editor.inspect.setter_label.align"), + attrName: "align", + setterType: "RADIO_GROUP_SETTER", + bindAttrName: ["tabPosition"], + shown: (tabPosition) => tabPosition === "horizontal", + options: [ + { + label: , + value: "flex-start", + }, + { + label: , + value: "center", + }, + { + label: , + value: "flex-end", + }, + ], + }, + ], + }, + { + id: `${baseWidgetName}-style`, + groupName: i18n.t("editor.inspect.setter_group.style"), + children: [ + { + id: `${baseWidgetName}-style-color`, + setterType: "LIST_SETTER", + labelName: i18n.t("editor.inspect.setter_label.colors"), + attrName: "styles", + useCustomLayout: true, + childrenSetter: [ + { + id: `${baseWidgetName}-style-color`, + labelName: i18n.t("editor.inspect.setter_label.text"), + setterType: "COLOR_PICKER_SETTER", + attrName: "colorScheme", + defaultValue: "blue", + }, + ], + }, + ], + }, +] diff --git a/apps/builder/src/widgetLibrary/MenuWidget/utils.tsx b/apps/builder/src/widgetLibrary/MenuWidget/utils.tsx new file mode 100644 index 0000000000..8e96034fbf --- /dev/null +++ b/apps/builder/src/widgetLibrary/MenuWidget/utils.tsx @@ -0,0 +1,11 @@ +import { CellContext } from "@tanstack/table-core" +import { Link } from "@illa-design/link" + +const renderTableLink = (props: CellContext) => { + const cellValue = props.getValue() + return cellValue ? ( + {`${cellValue}`} + ) : ( + "-" + ) +} diff --git a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx new file mode 100644 index 0000000000..7601a9413e --- /dev/null +++ b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx @@ -0,0 +1,21 @@ +import { ReactComponent as TableWidgetIcon } from "@/assets/widgetCover/table.svg" +import { WidgetConfig } from "@/widgetLibrary/interface" +import i18n from "@/i18n/config" + +export const MENU_WIDGET_CONFIG: WidgetConfig = { + displayName: "menu", + widgetName: i18n.t("widget.menu.name"), + h: 20, + w: 42, + type: "MENU_WIDGET", + icon: , + keywords: ["Menu", "菜单"], + sessionType: "PRESENTATION", + defaults: { + emptyState: "No rows found", + overFlow: "pagination", + download: false, + filter: false, + pageSize: `{{10}}`, + }, +} diff --git a/apps/builder/src/widgetLibrary/widgetBuilder.tsx b/apps/builder/src/widgetLibrary/widgetBuilder.tsx index 3f127da166..c817dcfb6b 100644 --- a/apps/builder/src/widgetLibrary/widgetBuilder.tsx +++ b/apps/builder/src/widgetLibrary/widgetBuilder.tsx @@ -142,6 +142,12 @@ import { TABS_EVENT_HANDLER_CONFIG, TabsWidget, } from "@/widgetLibrary/TabsWidget" +import { + MENU_EVENT_HANDLER_CONFIG, + MENU_PANEL_CONFIG, + MENU_WIDGET_CONFIG, + MenuWidget, +} from "@/widgetLibrary/MenuWidget" export const WidgetConfig: WidgetConfigs = { TEXT_WIDGET: { @@ -275,6 +281,12 @@ export const WidgetConfig: WidgetConfigs = { panelConfig: TABS_PANEL_CONFIG, eventHandlerConfig: TABS_EVENT_HANDLER_CONFIG, }, + MENU_WIDGET: { + widget: MenuWidget, + config: MENU_WIDGET_CONFIG, + panelConfig: MENU_PANEL_CONFIG, + eventHandlerConfig: MENU_EVENT_HANDLER_CONFIG, + }, CONTAINER_WIDGET: { widget: ContainerWidget, config: CONTAINER_WIDGET_CONFIG, From 7ba6deadac44d2d356b1a950a9ec186dc5462418 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 4 Nov 2022 19:15:51 +0800 Subject: [PATCH 02/31] feat: update name --- .../{MenuSetter => MenuOptionSetter}/body.tsx | 0 .../{MenuSetter => MenuOptionSetter}/columnItem.tsx | 0 .../context/columnListContext.tsx | 0 .../dragIconAndLabel.tsx | 0 .../{MenuSetter => MenuOptionSetter}/empty.tsx | 0 .../{MenuSetter => MenuOptionSetter}/header.tsx | 0 .../{MenuSetter => MenuOptionSetter}/index.tsx | 4 ++-- .../{MenuSetter => MenuOptionSetter}/interface.ts | 0 .../{MenuSetter => MenuOptionSetter}/style.ts | 0 .../utils/generateNewColumns.ts | 0 .../src/page/App/components/PanelSetters/index.tsx | 2 ++ apps/builder/src/widgetLibrary/MenuWidget/interface.ts | 5 ++++- .../src/widgetLibrary/MenuWidget/panelConfig.tsx | 10 ++-------- 13 files changed, 10 insertions(+), 11 deletions(-) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/{MenuSetter => MenuOptionSetter}/body.tsx (100%) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/{MenuSetter => MenuOptionSetter}/columnItem.tsx (100%) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/{MenuSetter => MenuOptionSetter}/context/columnListContext.tsx (100%) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/{MenuSetter => MenuOptionSetter}/dragIconAndLabel.tsx (100%) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/{MenuSetter => MenuOptionSetter}/empty.tsx (100%) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/{MenuSetter => MenuOptionSetter}/header.tsx (100%) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/{MenuSetter => MenuOptionSetter}/index.tsx (93%) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/{MenuSetter => MenuOptionSetter}/interface.ts (100%) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/{MenuSetter => MenuOptionSetter}/style.ts (100%) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/{MenuSetter => MenuOptionSetter}/utils/generateNewColumns.ts (100%) diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/body.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx similarity index 100% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/body.tsx rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/columnItem.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx similarity index 100% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/columnItem.tsx rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/context/columnListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx similarity index 100% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/context/columnListContext.tsx rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx similarity index 100% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/dragIconAndLabel.tsx rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/empty.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/empty.tsx similarity index 100% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/empty.tsx rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/empty.tsx diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/header.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/header.tsx similarity index 100% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/header.tsx rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/header.tsx diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/index.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/index.tsx similarity index 93% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/index.tsx rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/index.tsx index 742180fada..e9f3f94564 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/index.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/index.tsx @@ -13,7 +13,7 @@ import { ColumnsSetterProvider } from "./context/columnListContext" import { useTranslation } from "react-i18next" import { AddIcon } from "@illa-design/icon" -export const ColumnSetter: FC = (props) => { +export const MenuOptionSetter: FC = (props) => { const { attrName, handleUpdateDsl, @@ -63,4 +63,4 @@ export const ColumnSetter: FC = (props) => { ) } -ColumnSetter.displayName = "ColumnSetter" +MenuOptionSetter.displayName = "MenuOptionSetter" diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/interface.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts similarity index 100% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/interface.ts rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/style.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts similarity index 100% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/style.ts rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/utils/generateNewColumns.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewColumns.ts similarity index 100% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuSetter/utils/generateNewColumns.ts rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewColumns.ts diff --git a/apps/builder/src/page/App/components/PanelSetters/index.tsx b/apps/builder/src/page/App/components/PanelSetters/index.tsx index 898b14d685..60aa154d7f 100644 --- a/apps/builder/src/page/App/components/PanelSetters/index.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/index.tsx @@ -30,6 +30,7 @@ import { ContainerDefaultViewKeySetter } from "@/page/App/components/PanelSetter import { TabListSetter } from "@/page/App/components/PanelSetters/TabsSetter/TabListSetter" import { TabsContainerSelectSetter } from "@/page/App/components/PanelSetters/TabsSetter/TabsContainerSelectSetter" import { TabsDefaultKeySetter } from "@/page/App/components/PanelSetters/TabsSetter/defaultTabKeySetter" +import { MenuOptionSetter } from "@/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter" const SetterTypeMapSetter = { INPUT_SETTER: BaseInput, @@ -64,6 +65,7 @@ const SetterTypeMapSetter = { CHART_TYPE_SELECT_SETTER: ChartTypeSelectSetter, CONTAINER_VIEW_SETTER: ViewsSetter, CONTAINER_DEFAULT_VIEW_SETTER: ContainerDefaultViewKeySetter, + MENU_OPTION_SETTER: MenuOptionSetter, } export type SetterType = keyof typeof SetterTypeMapSetter diff --git a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts index b24b482bf6..a6bbe8ae63 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts +++ b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts @@ -14,11 +14,14 @@ export interface WrappedMenuProps handleOnColumnFiltersChange?: () => void } -const i = [ +interface MenuOption {} + +const menuOption = [ { title: "title", icon: "icon", hidden: true, + disabled: true, }, ] diff --git a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx index a2d37c96e6..4f4b86077e 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx @@ -20,8 +20,8 @@ export const MENU_PANEL_CONFIG: PanelConfig[] = [ { id: `${baseWidgetName}-basic-columns`, useCustomLayout: true, - attrName: "columns", - setterType: "COLUMN_SETTER", + attrName: "menuOption", + setterType: "MENU_OPTION_SETTER", openDynamic: true, childrenSetter: [ { @@ -73,12 +73,6 @@ export const MENU_PANEL_CONFIG: PanelConfig[] = [ id: `${baseWidgetName}-interaction`, groupName: i18n.t("editor.inspect.setter_group.interaction"), children: [ - { - ...generatorEventHandlerConfig( - baseWidgetName, - MENU_EVENT_HANDLER_CONFIG.events, - ), - }, { id: `${baseWidgetName}-interaction-disabled`, labelName: i18n.t("editor.inspect.setter_label.disabled"), From 386c46c9176ada6dfab67cce0d3bdc707e93f07d Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Tue, 8 Nov 2022 18:48:17 +0800 Subject: [PATCH 03/31] feat: update menu setter --- apps/builder/src/assets/widgetCover/menu.svg | 9 ++ .../MenuSetter/MenuOptionSetter/body.tsx | 40 +++------ .../MenuOptionSetter/columnItem.tsx | 45 ++++++++-- .../context/columnListContext.tsx | 6 +- .../MenuOptionSetter/dragIconAndLabel.tsx | 25 ++---- .../MenuSetter/MenuOptionSetter/interface.ts | 10 +-- .../MenuSetter/MenuOptionSetter/style.ts | 13 ++- .../MenuOptionSetter/subMenuLabel.tsx | 88 +++++++++++++++++++ .../utils/generateNewColumns.ts | 11 +-- .../TabListSetter/dragIconAndLabel.tsx | 1 + .../src/widgetLibrary/MenuWidget/interface.ts | 20 +++-- .../src/widgetLibrary/MenuWidget/menu.tsx | 29 +++++- .../widgetLibrary/MenuWidget/panelConfig.tsx | 28 +++--- .../widgetLibrary/MenuWidget/widgetConfig.tsx | 48 +++++++++- illa-design | 2 +- 15 files changed, 275 insertions(+), 100 deletions(-) create mode 100644 apps/builder/src/assets/widgetCover/menu.svg create mode 100644 apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx diff --git a/apps/builder/src/assets/widgetCover/menu.svg b/apps/builder/src/assets/widgetCover/menu.svg new file mode 100644 index 0000000000..e7aef9c5e2 --- /dev/null +++ b/apps/builder/src/assets/widgetCover/menu.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx index e321abb5d9..ad53ce4dfd 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx @@ -1,22 +1,14 @@ -import { FC, useContext, useEffect, useState } from "react" -import { Reorder } from "framer-motion" -import { ColumnItem } from "./columnItem" +import { FC, useContext } from "react" +import { Reorder, useDragControls } from "framer-motion" import { ColumnListSetterContext } from "./context/columnListContext" import { EmptyBody } from "./empty" -import { isEqual } from "lodash" import { removeNativeStyle } from "@/page/App/components/PanelSetters/TableSetter/ColumnSetter/style" +import { ColumnItem } from "@/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem" export const ListBody: FC = () => { const { columnItems, handleUpdateDsl, attrPath } = useContext( ColumnListSetterContext, ) - const [items, setItems] = useState(columnItems) - - useEffect(() => { - if (!isEqual(columnItems, items)) { - setItems(columnItems) - } - }, [columnItems]) if (!columnItems || !Array.isArray(columnItems) || columnItems.length === 0) return @@ -25,32 +17,22 @@ export const ListBody: FC = () => { { + handleUpdateDsl(attrPath, value) + }} css={removeNativeStyle} > - {items.map((item, index) => { - const { label, value, header, accessorKey, visible, custom, id } = item + {columnItems.map((item, index) => { + const { title, id, disabled, icon, subMenu } = item return ( { - handleUpdateDsl(attrPath, items) - }} > - + ) })} diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx index 4728cc54d3..c50d12cc53 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx @@ -1,20 +1,51 @@ -import { FC, useRef } from "react" +import { FC, useContext } from "react" import { ColumnItemProps } from "./interface" import { optionListItemStyle } from "./style" import { DragIconAndLabel } from "./dragIconAndLabel" +import { Reorder } from "framer-motion" +import { removeNativeStyle } from "@/page/App/components/PanelSetters/TableSetter/ColumnSetter/style" +import { ColumnListSetterContext } from "@/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext" +import { SubMenuLabel } from "@/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel" export const ColumnItem: FC = (props) => { - const { accessorKey, header, value, visible, custom, index } = props - const ref = useRef(null) + const { handleUpdateDsl, attrPath } = useContext(ColumnListSetterContext) + const { title, id, disabled, icon, subMenu, index } = props return ( -
+
+ {subMenu ? ( + { + handleUpdateDsl(`${attrPath}.${index}.subMenu`, value) + }} + css={removeNativeStyle} + > + {subMenu?.map((item, index) => { + return ( + { + // handleUpdateDsl(attrPath, items) + }} + > + + + ) + })} + + ) : null}
) } diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx index 607b1f6a1e..52a5a47985 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx @@ -1,10 +1,10 @@ import { createContext, ReactNode, FC, useCallback } from "react" import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" -import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface" import { generateColumnItemId } from "../utils/generateNewColumns" +import { MenuList } from "@/widgetLibrary/MenuWidget/interface" interface ProviderProps { - columnItems: ColumnItemShape[] + columnItems: MenuList[] childrenSetter: PanelFieldConfig[] widgetDisplayName: string attrPath: string @@ -46,7 +46,7 @@ export const ColumnsSetterProvider: FC = (props) => { if (!targetOptionItem) return targetOptionItem = { ...targetOptionItem, - accessorKey: generateColumnItemId(), + id: generateColumnItemId(), } const updatedArray = [...columnItems, targetOptionItem] handleUpdateDsl(attrPath, updatedArray) diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx index 446f5278d6..27e27f2d50 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx @@ -17,10 +17,10 @@ import { } from "./style" import { DragIconAndLabelProps } from "./interface" import { BaseModal } from "@/page/App/components/PanelSetters/PublicComponent/Modal" -import { ColumnListSetterContext } from "@/page/App/components/PanelSetters/TableSetter/ColumnSetter/context/columnListContext" +import { ColumnListSetterContext } from "./context/columnListContext" export const DragIconAndLabel: FC = (props) => { - const { index, label, visible, custom } = props + const { index, title } = props const [modalVisible, setModalVisible] = useState(false) const { widgetDisplayName, @@ -30,6 +30,8 @@ export const DragIconAndLabel: FC = (props) => { handleDeleteColumnItem, } = useContext(ColumnListSetterContext) + console.log(childrenSetter, "childrenSetter") + const { t } = useTranslation() const handleCloseModal = useCallback(() => { @@ -43,7 +45,7 @@ export const DragIconAndLabel: FC = (props) => { popupVisible={modalVisible} content={ = (props) => { - {label || + {title || t("editor.inspect.setter_content.option_list.list_no_label")}
@@ -72,23 +74,12 @@ export const DragIconAndLabel: FC = (props) => { { - handleUpdateItemVisible(`${attrPath}.${index}.visible`, !visible) + handleDeleteColumnItem(index) event.stopPropagation() }} > - {visible ? : } + - {custom ? ( - { - handleDeleteColumnItem(index) - event.stopPropagation() - }} - > - - - ) : null} diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts index 8242fe68a5..1fc65f3cf6 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts @@ -5,25 +5,23 @@ import { } from "@/page/App/components/InspectPanel/interface" import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface" import { ColumnsSelectSetter } from "@/page/App/components/PanelSetters/TableSetter/columsSelectSetter" +import { MenuList, SubMenu } from "@/widgetLibrary/MenuWidget/interface" export interface HeaderProps { labelName: string handleAddOption: () => void } -export interface ColumnItemProps extends Omit { +export interface ColumnItemProps extends MenuList { index: number } -export interface DragIconAndLabelProps { +export interface DragIconAndLabelProps extends SubMenu { index: number - label?: string - visible?: boolean - custom?: boolean } export interface ColumnListSetterProps extends BaseSetter { - value: ColumnItemShape[] + value: MenuList[] childrenSetter?: PanelFieldConfig[] } diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts index 4ace189039..c599d24d05 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts @@ -47,10 +47,10 @@ export const ListStyle = css` ` export const optionListItemStyle = css` - display: flex; - justify-content: space-between; + //display: flex; + //justify-content: space-between; padding-right: 16px; - height: 40px; + //height: 40px; align-items: center; cursor: pointer; @@ -63,12 +63,17 @@ export const optionListItemStyle = css` export const dragItemStyle = css` width: 100%; - height: 100%; + height: 42px; display: flex; align-items: center; justify-content: space-between; ` +export const subMenuItemStyle = css` + padding-left: 16px; + height: 32px; +` + export const labelNameAndIconStyle = css` width: 100%; height: 100%; diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx new file mode 100644 index 0000000000..b435b1eef0 --- /dev/null +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx @@ -0,0 +1,88 @@ +import { FC, useCallback, useContext, useState } from "react" +import { useTranslation } from "react-i18next" +import { + ReduceIcon, + DragPointIcon, + EyeOffIcon, + EyeOnIcon, +} from "@illa-design/icon" +import { Trigger } from "@illa-design/trigger" +import { + baseIconStyle, + dragItemStyle, + iconAreaStyle, + labelNameAndIconStyle, + labelNameWrapperStyle, + movableIconWrapperStyle, + subMenuItemStyle, +} from "./style" +import { DragIconAndLabelProps } from "./interface" +import { BaseModal } from "@/page/App/components/PanelSetters/PublicComponent/Modal" +import { ColumnListSetterContext } from "./context/columnListContext" + +export const SubMenuLabel: FC = (props) => { + const { index, title } = props + const [modalVisible, setModalVisible] = useState(false) + const { + widgetDisplayName, + attrPath, + childrenSetter, + handleUpdateItemVisible, + handleDeleteColumnItem, + } = useContext(ColumnListSetterContext) + + const { t } = useTranslation() + + const handleCloseModal = useCallback(() => { + setModalVisible(false) + }, []) + + return ( + + } + trigger="click" + showArrow={false} + position="left" + clickOutsideToClose + onVisibleChange={(visible) => { + setModalVisible(visible) + }} + > +
+
+ + + + + {title || + t("editor.inspect.setter_content.option_list.list_no_label")} + +
+
+ { + handleDeleteColumnItem(index) + event.stopPropagation() + }} + > + + +
+
+ + ) +} + +SubMenuLabel.displayName = "SubMenuLabel" diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewColumns.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewColumns.ts index 10382bde98..7c40a5eddf 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewColumns.ts +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewColumns.ts @@ -1,18 +1,13 @@ import { v4 } from "uuid" import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface" +import { MenuList } from "@/widgetLibrary/MenuWidget/interface" export const generateColumnItemId = () => `column-${v4()}` -export const generateNewColumnItem = (number: number): ColumnItemShape => { +export const generateNewColumnItem = (number: number): MenuList => { const id = generateColumnItemId() return { - header: `Column ${number}`, + title: `Column ${number}`, id, - accessorKey: id, - enableSorting: true, - type: "text", - visible: true, - custom: true, - format: "YYYY-MM-DD", } } diff --git a/apps/builder/src/page/App/components/PanelSetters/TabsSetter/TabListSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/TabsSetter/TabListSetter/dragIconAndLabel.tsx index 3cc632cf50..1f9be27fed 100644 --- a/apps/builder/src/page/App/components/PanelSetters/TabsSetter/TabListSetter/dragIconAndLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/TabsSetter/TabListSetter/dragIconAndLabel.tsx @@ -46,6 +46,7 @@ export const DragIconAndLabel: FC = (props) => { `${widgetDisplayName}.${attrPath}.${index}.label`, ) }, [executionResult, widgetDisplayName, attrPath, index]) + console.log(labelName, "labelName") return ( diff --git a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts index a6bbe8ae63..f4ca7d8064 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts +++ b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts @@ -5,6 +5,7 @@ import { HTMLAttributes } from "react" export interface WrappedMenuProps extends HTMLAttributes, MenuProps { + menuList?: MenuList[] emptyState?: string pageSize?: number defaultSortKey?: string @@ -14,15 +15,16 @@ export interface WrappedMenuProps handleOnColumnFiltersChange?: () => void } -interface MenuOption {} +export interface SubMenu { + id?: string + title: string + icon?: string + hidden?: boolean + disabled?: boolean +} -const menuOption = [ - { - title: "title", - icon: "icon", - hidden: true, - disabled: true, - }, -] +export interface MenuList extends SubMenu { + subMenu?: SubMenu[] +} export interface MenuWidgetProps extends WrappedMenuProps, BaseWidgetProps {} diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx index cd1903d702..dbed4f998c 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -4,14 +4,31 @@ import { MenuWidgetProps, WrappedMenuProps } from "./interface" export const WrappedMenu = forwardRef( (props, ref) => { - const {} = props + const { menuList } = props + const { Item, SubMenu } = Menu - return + return ( + + {menuList?.map((item, index) => { + if (item.subMenu) { + return ( + + {item.subMenu.map((subItem, index) => { + return + })} + + ) + } + return + })} + + ) }, ) export const MenuWidget: FC = (props) => { const { + menuList, emptyState, pageSize, displayName, @@ -32,7 +49,13 @@ export const MenuWidget: FC = (props) => { handleDeleteGlobalData, ]) - return + return ( + + ) } WrappedMenu.displayName = "WrappedMenu" diff --git a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx index 4f4b86077e..54ed5a61f3 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx @@ -18,28 +18,34 @@ export const MENU_PANEL_CONFIG: PanelConfig[] = [ groupName: i18n.t("editor.inspect.setter_group.column"), children: [ { - id: `${baseWidgetName}-basic-columns`, + id: `${baseWidgetName}-basic-menuList`, useCustomLayout: true, - attrName: "menuOption", + attrName: "menuList", setterType: "MENU_OPTION_SETTER", openDynamic: true, childrenSetter: [ { - id: `${baseWidgetName}-column-header`, + id: `${baseWidgetName}-column-title`, labelName: i18n.t("editor.inspect.setter_label.column_title"), - attrName: "header", + attrName: "title", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { - id: `${baseWidgetName}-column-decimalPlaces`, - labelName: i18n.t("editor.inspect.setter_label.decimal_places"), - attrName: "decimalPlaces", - bindAttrName: ["type"], - shown: (value) => value === "number" || value === "percent", - placeholder: "{{ 0 }}", + id: `${baseWidgetName}-column-icon`, + labelName: i18n.t("editor.inspect.setter_label.column_title"), + attrName: "icon", setterType: "INPUT_SETTER", - expectedType: VALIDATION_TYPES.NUMBER, + expectedType: VALIDATION_TYPES.STRING, + }, + { + id: `${baseWidgetName}-basic-hidden`, + labelName: i18n.t("editor.inspect.setter_label.hidden"), + attrName: "hidden", + setterType: "DYNAMIC_SWITCH_SETTER", + expectedType: VALIDATION_TYPES.BOOLEAN, + openDynamic: true, + useCustomLayout: true, }, { id: `${baseWidgetName}-column-format`, diff --git a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx index 7601a9413e..fcf5f41ff9 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx @@ -1,17 +1,61 @@ -import { ReactComponent as TableWidgetIcon } from "@/assets/widgetCover/table.svg" +import { ReactComponent as MenuWidgetIcon } from "@/assets/widgetCover/menu.svg" import { WidgetConfig } from "@/widgetLibrary/interface" import i18n from "@/i18n/config" +const menuList = [ + { + title: "title", + icon: "icon", + hidden: true, + disabled: true, + subMenu: [ + { + title: "1111", + icon: "icon", + hidden: true, + disabled: true, + }, + { + title: "2222", + icon: "icon", + hidden: true, + disabled: true, + }, + ], + }, + { + title: "answer", + icon: "icon", + hidden: true, + disabled: true, + subMenu: [ + { + title: "abcd", + icon: "icon", + hidden: true, + disabled: true, + }, + { + title: "edfg", + icon: "icon", + hidden: true, + disabled: true, + }, + ], + }, +] + export const MENU_WIDGET_CONFIG: WidgetConfig = { displayName: "menu", widgetName: i18n.t("widget.menu.name"), h: 20, w: 42, type: "MENU_WIDGET", - icon: , + icon: , keywords: ["Menu", "菜单"], sessionType: "PRESENTATION", defaults: { + menuList, emptyState: "No rows found", overFlow: "pagination", download: false, diff --git a/illa-design b/illa-design index cb836e014e..73a8f11560 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit cb836e014e412dc14e6500b7bb73242a45de7b2a +Subproject commit 73a8f115609086fa0050414cde1086504d29bca0 From 2646c5819922d42e6fe749fa7343286d1c498f3a Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Tue, 8 Nov 2022 19:44:03 +0800 Subject: [PATCH 04/31] feat: add submenu option --- .../MenuOptionSetter/columnItem.tsx | 9 +++- .../context/columnListContext.tsx | 23 +++++++-- .../MenuOptionSetter/dragIconAndLabel.tsx | 25 ++++++--- .../MenuSetter/MenuOptionSetter/interface.ts | 7 +++ .../MenuSetter/MenuOptionSetter/style.ts | 4 ++ .../MenuOptionSetter/subMenuLabel.tsx | 51 ++++++++----------- .../PublicComponent/Modal/index.tsx | 2 + .../PublicComponent/Modal/interface.ts | 1 + 8 files changed, 79 insertions(+), 43 deletions(-) diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx index c50d12cc53..dd1c0b13cb 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx @@ -29,7 +29,7 @@ export const ColumnItem: FC = (props) => { }} css={removeNativeStyle} > - {subMenu?.map((item, index) => { + {subMenu?.map((item, subIndex) => { return ( = (props) => { // handleUpdateDsl(attrPath, items) }} > - + ) })} diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx index 52a5a47985..b9049de778 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx @@ -1,4 +1,4 @@ -import { createContext, ReactNode, FC, useCallback } from "react" +import { createContext, FC, ReactNode, useCallback } from "react" import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" import { generateColumnItemId } from "../utils/generateNewColumns" import { MenuList } from "@/widgetLibrary/MenuWidget/interface" @@ -13,8 +13,9 @@ interface ProviderProps { } interface Inject extends Omit { - handleDeleteColumnItem: (index: number) => void + handleDeleteMenuItem: (index: number) => void handleCopyColumnItem: (index: number) => void + handleDeleteSubMenuItem: (index: number, subIndex: number) => void handleMoveColumnItem: (dragIndex: number, hoverIndex: number) => void handleUpdateItemVisible: (attrName: string, visible?: boolean) => void } @@ -24,7 +25,7 @@ export const ColumnListSetterContext = createContext({} as Inject) export const ColumnsSetterProvider: FC = (props) => { const { columnItems, attrPath, handleUpdateDsl } = props - const handleDeleteColumnItem = useCallback( + const handleDeleteMenuItem = useCallback( (index: number) => { const updatedArray = columnItems.filter( (optionItem: Record, i: number) => { @@ -36,6 +37,19 @@ export const ColumnsSetterProvider: FC = (props) => { [columnItems, handleUpdateDsl, attrPath], ) + const handleDeleteSubMenuItem = useCallback( + (index: number, subIndex: number) => { + const updatedArray = JSON.parse(JSON.stringify(columnItems)) + updatedArray[index].subMenu = updatedArray[index].subMenu?.filter( + (optionItem: Record, i: number) => { + return i !== subIndex + }, + ) + handleUpdateDsl(attrPath, updatedArray) + }, + [columnItems, handleUpdateDsl, attrPath], + ) + const handleCopyColumnItem = useCallback( (index: number) => { let targetOptionItem = columnItems.find( @@ -74,10 +88,11 @@ export const ColumnsSetterProvider: FC = (props) => { const value = { ...props, - handleDeleteColumnItem, + handleDeleteMenuItem, handleCopyColumnItem, handleMoveColumnItem, handleUpdateItemVisible, + handleDeleteSubMenuItem, } return ( diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx index 27e27f2d50..db612625cd 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx @@ -1,14 +1,10 @@ import { FC, useCallback, useContext, useState } from "react" import { useTranslation } from "react-i18next" -import { - ReduceIcon, - DragPointIcon, - EyeOffIcon, - EyeOnIcon, -} from "@illa-design/icon" +import { ReduceIcon, DragPointIcon } from "@illa-design/icon" import { Trigger } from "@illa-design/trigger" import { baseIconStyle, + deleteButtonStyle, dragItemStyle, iconAreaStyle, labelNameAndIconStyle, @@ -18,6 +14,7 @@ import { import { DragIconAndLabelProps } from "./interface" import { BaseModal } from "@/page/App/components/PanelSetters/PublicComponent/Modal" import { ColumnListSetterContext } from "./context/columnListContext" +import { Button } from "@illa-design/button" export const DragIconAndLabel: FC = (props) => { const { index, title } = props @@ -27,7 +24,7 @@ export const DragIconAndLabel: FC = (props) => { attrPath, childrenSetter, handleUpdateItemVisible, - handleDeleteColumnItem, + handleDeleteMenuItem, } = useContext(ColumnListSetterContext) console.log(childrenSetter, "childrenSetter") @@ -50,6 +47,18 @@ export const DragIconAndLabel: FC = (props) => { attrPath={`${attrPath}.${index}`} widgetDisplayName={widgetDisplayName} childrenSetter={childrenSetter} + extraElement={ + + } /> } trigger="click" @@ -74,7 +83,7 @@ export const DragIconAndLabel: FC = (props) => { { - handleDeleteColumnItem(index) + handleDeleteMenuItem(index) event.stopPropagation() }} > diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts index 1fc65f3cf6..e9ea921b6c 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts @@ -6,6 +6,7 @@ import { import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface" import { ColumnsSelectSetter } from "@/page/App/components/PanelSetters/TableSetter/columsSelectSetter" import { MenuList, SubMenu } from "@/widgetLibrary/MenuWidget/interface" +import { SubMenuLabel } from "@/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel" export interface HeaderProps { labelName: string @@ -20,6 +21,12 @@ export interface DragIconAndLabelProps extends SubMenu { index: number } +export interface SubMenuLabelProps extends SubMenu { + index: number + subIndex: number + attrPath: string +} + export interface ColumnListSetterProps extends BaseSetter { value: MenuList[] childrenSetter?: PanelFieldConfig[] diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts index c599d24d05..bec5cb9d82 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts @@ -73,6 +73,10 @@ export const subMenuItemStyle = css` padding-left: 16px; height: 32px; ` +export const deleteButtonStyle = css` + width: calc(100% - 32px); + margin: 0 16px 16px; +` export const labelNameAndIconStyle = css` width: 100%; diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx index b435b1eef0..646902370a 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx @@ -1,14 +1,9 @@ import { FC, useCallback, useContext, useState } from "react" import { useTranslation } from "react-i18next" -import { - ReduceIcon, - DragPointIcon, - EyeOffIcon, - EyeOnIcon, -} from "@illa-design/icon" +import { DragPointIcon } from "@illa-design/icon" import { Trigger } from "@illa-design/trigger" import { - baseIconStyle, + deleteButtonStyle, dragItemStyle, iconAreaStyle, labelNameAndIconStyle, @@ -16,20 +11,16 @@ import { movableIconWrapperStyle, subMenuItemStyle, } from "./style" -import { DragIconAndLabelProps } from "./interface" +import { SubMenuLabelProps } from "./interface" import { BaseModal } from "@/page/App/components/PanelSetters/PublicComponent/Modal" import { ColumnListSetterContext } from "./context/columnListContext" +import { Button } from "@illa-design/button" -export const SubMenuLabel: FC = (props) => { - const { index, title } = props +export const SubMenuLabel: FC = (props) => { + const { index, subIndex, title, attrPath } = props const [modalVisible, setModalVisible] = useState(false) - const { - widgetDisplayName, - attrPath, - childrenSetter, - handleUpdateItemVisible, - handleDeleteColumnItem, - } = useContext(ColumnListSetterContext) + const { widgetDisplayName, childrenSetter, handleDeleteSubMenuItem } = + useContext(ColumnListSetterContext) const { t } = useTranslation() @@ -46,9 +37,21 @@ export const SubMenuLabel: FC = (props) => { { + handleDeleteSubMenuItem(index, subIndex) + }} + > + Delete + + } /> } trigger="click" @@ -69,17 +72,7 @@ export const SubMenuLabel: FC = (props) => { t("editor.inspect.setter_content.option_list.list_no_label")} -
- { - handleDeleteColumnItem(index) - event.stopPropagation() - }} - > - - -
+
) diff --git a/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/index.tsx b/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/index.tsx index 47a2d05c68..7a66881cf7 100644 --- a/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/index.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/index.tsx @@ -15,6 +15,7 @@ export const BaseModal: FC = (props) => { children, _css, header, + extraElement, } = props const _header = useMemo(() => { @@ -42,6 +43,7 @@ export const BaseModal: FC = (props) => {
{_header} {renderBody} + {extraElement}
) } diff --git a/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/interface.ts b/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/interface.ts index ddd1fb528b..2b5b20db47 100644 --- a/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/interface.ts +++ b/apps/builder/src/page/App/components/PanelSetters/PublicComponent/Modal/interface.ts @@ -24,4 +24,5 @@ export interface ModalProps extends HeaderProps { children?: ReactNode _css?: SerializedStyles header?: ReactNode + extraElement?: ReactNode } From 12ffb8387b6c78ab963059435e32bc7785f5aea7 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Tue, 8 Nov 2022 19:51:19 +0800 Subject: [PATCH 05/31] feat: add handleAddSubMenuItem --- .../context/columnListContext.tsx | 20 ++++++++++++++++++- .../MenuOptionSetter/dragIconAndLabel.tsx | 3 ++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx index b9049de778..3b9d5ed0e0 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx @@ -1,6 +1,9 @@ import { createContext, FC, ReactNode, useCallback } from "react" import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" -import { generateColumnItemId } from "../utils/generateNewColumns" +import { + generateColumnItemId, + generateNewColumnItem, +} from "../utils/generateNewColumns" import { MenuList } from "@/widgetLibrary/MenuWidget/interface" interface ProviderProps { @@ -15,6 +18,7 @@ interface ProviderProps { interface Inject extends Omit { handleDeleteMenuItem: (index: number) => void handleCopyColumnItem: (index: number) => void + handleAddSubMenuItem: (index: number) => void handleDeleteSubMenuItem: (index: number, subIndex: number) => void handleMoveColumnItem: (dragIndex: number, hoverIndex: number) => void handleUpdateItemVisible: (attrName: string, visible?: boolean) => void @@ -50,6 +54,19 @@ export const ColumnsSetterProvider: FC = (props) => { [columnItems, handleUpdateDsl, attrPath], ) + const handleAddSubMenuItem = useCallback( + (index: number) => { + const updatedArray = JSON.parse(JSON.stringify(columnItems)) + const num = updatedArray[index].subMenu.length + 1 + const newItem = generateNewColumnItem(num) + // updatedArray[index].subMenu = [...updatedArray[index].subMenu, newItem] + updatedArray[index].subMenu.push(newItem) + + handleUpdateDsl(attrPath, updatedArray) + }, + [columnItems, handleUpdateDsl, attrPath], + ) + const handleCopyColumnItem = useCallback( (index: number) => { let targetOptionItem = columnItems.find( @@ -91,6 +108,7 @@ export const ColumnsSetterProvider: FC = (props) => { handleDeleteMenuItem, handleCopyColumnItem, handleMoveColumnItem, + handleAddSubMenuItem, handleUpdateItemVisible, handleDeleteSubMenuItem, } diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx index db612625cd..d61221183a 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx @@ -24,6 +24,7 @@ export const DragIconAndLabel: FC = (props) => { attrPath, childrenSetter, handleUpdateItemVisible, + handleAddSubMenuItem, handleDeleteMenuItem, } = useContext(ColumnListSetterContext) @@ -83,7 +84,7 @@ export const DragIconAndLabel: FC = (props) => { { - handleDeleteMenuItem(index) + handleAddSubMenuItem(index) event.stopPropagation() }} > From fd3752585919da591f22058e409216ee858ebdb0 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Wed, 9 Nov 2022 17:33:33 +0800 Subject: [PATCH 06/31] feat: add submenu action --- apps/builder/src/i18n/locale/en-US.json | 6 ++++ apps/builder/src/i18n/locale/zh-CN.json | 6 ++++ .../MenuSetter/MenuOptionSetter/body.tsx | 2 +- .../MenuOptionSetter/columnItem.tsx | 3 +- .../context/columnListContext.tsx | 17 ++++++---- .../MenuOptionSetter/dragIconAndLabel.tsx | 23 ++++++------- .../MenuSetter/MenuOptionSetter/index.tsx | 25 +++++++------- .../MenuSetter/MenuOptionSetter/style.ts | 7 +++- .../utils/generateNewColumns.ts | 17 +++++++--- .../src/widgetLibrary/MenuWidget/interface.ts | 2 +- .../src/widgetLibrary/MenuWidget/menu.tsx | 33 +++++++++++++------ .../widgetLibrary/MenuWidget/panelConfig.tsx | 30 ++++++++++++----- .../widgetLibrary/MenuWidget/widgetConfig.tsx | 11 +++++++ illa-design | 2 +- 14 files changed, 125 insertions(+), 59 deletions(-) diff --git a/apps/builder/src/i18n/locale/en-US.json b/apps/builder/src/i18n/locale/en-US.json index 01b91f255b..657c077b37 100644 --- a/apps/builder/src/i18n/locale/en-US.json +++ b/apps/builder/src/i18n/locale/en-US.json @@ -388,6 +388,11 @@ "new": "New", "title": "Title" }, + "menu_setter": { + "label": "Menus ({{number}})", + "new": "New", + "sub": "Sub" + }, "event_handler_list": { "empty": "Trigger queries, control components, or call other APIs in response to component events.", "incomplete_selection": "Incomplete selection", @@ -444,6 +449,7 @@ "interaction": "INTERACTION", "label": "LABEL", "layout": "LAYOUT", + "menu": "MENU", "options": "OPTIONS", "pagination": "PAGINATION", "row_selection": "ROW SELECTION", diff --git a/apps/builder/src/i18n/locale/zh-CN.json b/apps/builder/src/i18n/locale/zh-CN.json index 9043986deb..68cbd55930 100644 --- a/apps/builder/src/i18n/locale/zh-CN.json +++ b/apps/builder/src/i18n/locale/zh-CN.json @@ -388,6 +388,11 @@ "new": "新建", "title": "标题" }, + "menu_setter": { + "label": "菜单 ({{number}})", + "new": "新建", + "sub": "子菜单" + }, "event_handler_list": { "empty": "触发查询、控制组件或调用其他API以响应组件事件。", "incomplete_selection": "不完整的选择", @@ -444,6 +449,7 @@ "interaction": "交互", "label": "标签", "layout": "布局", + "menu": "菜单", "options": "选项", "pagination": "翻页", "row_selection": "行选择", diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx index ad53ce4dfd..6696438320 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx @@ -29,7 +29,7 @@ export const ListBody: FC = () => { diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx index dd1c0b13cb..f33cb20356 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx @@ -14,6 +14,7 @@ export const ColumnItem: FC = (props) => { return (
= (props) => { { // handleUpdateDsl(attrPath, items) diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx index 3b9d5ed0e0..0cc91d257b 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx @@ -1,8 +1,8 @@ import { createContext, FC, ReactNode, useCallback } from "react" import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" import { - generateColumnItemId, - generateNewColumnItem, + generateMenuItemId, + generateNewSubMenuItem, } from "../utils/generateNewColumns" import { MenuList } from "@/widgetLibrary/MenuWidget/interface" @@ -57,10 +57,13 @@ export const ColumnsSetterProvider: FC = (props) => { const handleAddSubMenuItem = useCallback( (index: number) => { const updatedArray = JSON.parse(JSON.stringify(columnItems)) - const num = updatedArray[index].subMenu.length + 1 - const newItem = generateNewColumnItem(num) - // updatedArray[index].subMenu = [...updatedArray[index].subMenu, newItem] - updatedArray[index].subMenu.push(newItem) + const num = (updatedArray[index]?.subMenu?.length ?? 0) + 1 + const newItem = generateNewSubMenuItem(num) + if (updatedArray[index].subMenu) { + updatedArray[index].subMenu.push(newItem) + } else { + updatedArray[index]["subMenu"] = [newItem] + } handleUpdateDsl(attrPath, updatedArray) }, @@ -77,7 +80,7 @@ export const ColumnsSetterProvider: FC = (props) => { if (!targetOptionItem) return targetOptionItem = { ...targetOptionItem, - id: generateColumnItemId(), + id: generateMenuItemId(), } const updatedArray = [...columnItems, targetOptionItem] handleUpdateDsl(attrPath, updatedArray) diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx index d61221183a..c666b4a38a 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx @@ -1,11 +1,13 @@ import { FC, useCallback, useContext, useState } from "react" import { useTranslation } from "react-i18next" -import { ReduceIcon, DragPointIcon } from "@illa-design/icon" +import { ReduceIcon, DragPointIcon, AddIcon } from "@illa-design/icon" import { Trigger } from "@illa-design/trigger" import { + addIconStyle, baseIconStyle, deleteButtonStyle, dragItemStyle, + headerActionButtonStyle, iconAreaStyle, labelNameAndIconStyle, labelNameWrapperStyle, @@ -80,16 +82,15 @@ export const DragIconAndLabel: FC = (props) => { t("editor.inspect.setter_content.option_list.list_no_label")}
-
- { - handleAddSubMenuItem(index) - event.stopPropagation() - }} - > - - +
{ + handleAddSubMenuItem(index) + event.stopPropagation() + }} + > + + {t("editor.inspect.setter_content.menu_setter.sub")}
diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/index.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/index.tsx index e9f3f94564..9a7151c2e0 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/index.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/index.tsx @@ -8,7 +8,7 @@ import { ListStyle, optionListHeaderStyle, } from "./style" -import { generateNewColumnItem } from "./utils/generateNewColumns" +import { generateNewMenuItem } from "./utils/generateNewColumns" import { ColumnsSetterProvider } from "./context/columnListContext" import { useTranslation } from "react-i18next" import { AddIcon } from "@illa-design/icon" @@ -26,7 +26,7 @@ export const MenuOptionSetter: FC = (props) => { const handleAddOption = useCallback(() => { const num = value.length + 1 - const newItem = generateNewColumnItem(num) + const newItem = generateNewMenuItem(num) handleUpdateDsl(attrName, [...value, newItem]) }, [value, attrName, handleUpdateDsl]) @@ -42,20 +42,17 @@ export const MenuOptionSetter: FC = (props) => { attrPath={attrName} handleUpdateDsl={handleUpdateDsl} > -
-
- {t("editor.inspect.setter_content.column_setter.label", { - number: value.length, - })} -
-
- - {t("editor.inspect.setter_content.column_setter.new")} -
-
-
{t("editor.inspect.setter_content.column_setter.title")}
+
+ {t("editor.inspect.setter_content.menu_setter.label", { + number: value.length, + })} +
+
+ + {t("editor.inspect.setter_content.column_setter.new")} +
diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts index bec5cb9d82..b6aa7e7d33 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts @@ -110,7 +110,12 @@ export const emptyEmptyBodyStyle = css` export const iconAreaStyle = css` display: flex; flex-direction: row; - gap: 16px; + align-items: center; + justify-content: center; + color: ${globalColor(`--${illaPrefix}-purple-01`)}; + cursor: pointer; + font-weight: 400; + white-space: pre; ` export const baseIconStyle = css` diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewColumns.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewColumns.ts index 7c40a5eddf..6701dc22f1 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewColumns.ts +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewColumns.ts @@ -2,12 +2,21 @@ import { v4 } from "uuid" import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface" import { MenuList } from "@/widgetLibrary/MenuWidget/interface" -export const generateColumnItemId = () => `column-${v4()}` +export const generateMenuItemId = () => `menu-${v4()}` +export const generateSubMenuItemId = () => `subMenu-${v4()}` -export const generateNewColumnItem = (number: number): MenuList => { - const id = generateColumnItemId() +export const generateNewMenuItem = (number: number): MenuList => { + const id = generateMenuItemId() return { - title: `Column ${number}`, id, + title: `Menu ${number}`, + } +} + +export const generateNewSubMenuItem = (number: number): MenuList => { + const id = generateSubMenuItemId() + return { + id, + title: `subMenu ${number}`, } } diff --git a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts index f4ca7d8064..609d21bc47 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts +++ b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts @@ -16,7 +16,7 @@ export interface WrappedMenuProps } export interface SubMenu { - id?: string + id: string title: string icon?: string hidden?: boolean diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx index dbed4f998c..f93c6687fd 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -1,25 +1,25 @@ -import { FC, forwardRef, useEffect, useMemo } from "react" +import { FC, forwardRef, useEffect, useMemo, useRef } from "react" import { Menu } from "@illa-design/menu" import { MenuWidgetProps, WrappedMenuProps } from "./interface" export const WrappedMenu = forwardRef( (props, ref) => { - const { menuList } = props + const { menuList, mode } = props const { Item, SubMenu } = Menu return ( - + {menuList?.map((item, index) => { if (item.subMenu) { return ( - + {item.subMenu.map((subItem, index) => { return })} ) } - return + return })} ) @@ -28,6 +28,7 @@ export const WrappedMenu = forwardRef( export const MenuWidget: FC = (props) => { const { + mode, menuList, emptyState, pageSize, @@ -35,6 +36,7 @@ export const MenuWidget: FC = (props) => { handleUpdateDsl, handleUpdateGlobalData, handleDeleteGlobalData, + updateComponentHeight, } = props useEffect(() => { @@ -49,12 +51,23 @@ export const MenuWidget: FC = (props) => { handleDeleteGlobalData, ]) + const wrapperRef = useRef(null) + + useEffect(() => { + if (wrapperRef.current) { + updateComponentHeight(wrapperRef.current?.clientHeight) + } + }, [mode]) + return ( - +
+ +
) } diff --git a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx index 54ed5a61f3..d9e8a709c4 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx @@ -14,32 +14,32 @@ const baseWidgetName = "table" export const MENU_PANEL_CONFIG: PanelConfig[] = [ { - id: `${baseWidgetName}-column`, - groupName: i18n.t("editor.inspect.setter_group.column"), + id: `${baseWidgetName}-menu`, + groupName: i18n.t("editor.inspect.setter_group.menu"), children: [ { - id: `${baseWidgetName}-basic-menuList`, + id: `${baseWidgetName}-menuList`, useCustomLayout: true, attrName: "menuList", setterType: "MENU_OPTION_SETTER", openDynamic: true, childrenSetter: [ { - id: `${baseWidgetName}-column-title`, + id: `${baseWidgetName}-menu-title`, labelName: i18n.t("editor.inspect.setter_label.column_title"), attrName: "title", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { - id: `${baseWidgetName}-column-icon`, + id: `${baseWidgetName}-menu-icon`, labelName: i18n.t("editor.inspect.setter_label.column_title"), attrName: "icon", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { - id: `${baseWidgetName}-basic-hidden`, + id: `${baseWidgetName}-menu-hidden`, labelName: i18n.t("editor.inspect.setter_label.hidden"), attrName: "hidden", setterType: "DYNAMIC_SWITCH_SETTER", @@ -48,7 +48,7 @@ export const MENU_PANEL_CONFIG: PanelConfig[] = [ useCustomLayout: true, }, { - id: `${baseWidgetName}-column-format`, + id: `${baseWidgetName}-menu-format`, labelName: i18n.t("editor.inspect.setter_label.format"), attrName: "format", bindAttrName: ["type"], @@ -63,7 +63,7 @@ export const MENU_PANEL_CONFIG: PanelConfig[] = [ ), }, { - id: `${baseWidgetName}-basic-enableSorting`, + id: `${baseWidgetName}-menu-enableSorting`, labelName: i18n.t("editor.inspect.setter_label.enable_sorting"), attrName: "enableSorting", setterType: "DYNAMIC_SWITCH_SETTER", @@ -104,6 +104,20 @@ export const MENU_PANEL_CONFIG: PanelConfig[] = [ openDynamic: true, expectedType: VALIDATION_TYPES.BOOLEAN, }, + { + id: `${baseWidgetName}-layout-direction`, + labelName: i18n.t("editor.inspect.setter_label.direction"), + labelDesc: i18n.t("editor.inspect.setter_tooltip.timeline_direction"), + setterType: "RADIO_GROUP_SETTER", + attrName: "mode", + options: [ + { label: i18n.t("widget.timeline.vertical"), value: "vertical" }, + { + label: i18n.t("widget.timeline.horizontal"), + value: "horizontal", + }, + ], + }, { id: `${baseWidgetName}-layout-layout`, labelName: i18n.t("editor.inspect.setter_label.layout"), diff --git a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx index fcf5f41ff9..1acf6a1c6f 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx @@ -4,18 +4,21 @@ import i18n from "@/i18n/config" const menuList = [ { + id: "1", title: "title", icon: "icon", hidden: true, disabled: true, subMenu: [ { + id: "1-1", title: "1111", icon: "icon", hidden: true, disabled: true, }, { + id: "1-2", title: "2222", icon: "icon", hidden: true, @@ -24,18 +27,21 @@ const menuList = [ ], }, { + id: "2", title: "answer", icon: "icon", hidden: true, disabled: true, subMenu: [ { + id: "2-1", title: "abcd", icon: "icon", hidden: true, disabled: true, }, { + id: "2-2", title: "edfg", icon: "icon", hidden: true, @@ -43,6 +49,10 @@ const menuList = [ }, ], }, + { + id: "3", + title: "title", + }, ] export const MENU_WIDGET_CONFIG: WidgetConfig = { @@ -56,6 +66,7 @@ export const MENU_WIDGET_CONFIG: WidgetConfig = { sessionType: "PRESENTATION", defaults: { menuList, + mode: "vertical", emptyState: "No rows found", overFlow: "pagination", download: false, diff --git a/illa-design b/illa-design index 73a8f11560..826c38c6c6 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit 73a8f115609086fa0050414cde1086504d29bca0 +Subproject commit 826c38c6c69af7cc9fc1bcf3c6cabfdc288e4be3 From dba05ed86b094cb3df561052fb3c87f4e59ff56e Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Wed, 9 Nov 2022 19:58:34 +0800 Subject: [PATCH 07/31] feat: support icon --- .../MenuOptionSetter/dragIconAndLabel.tsx | 4 +-- .../MenuWidget/MenuItemLabel.tsx | 20 +++++++++++++++ .../src/widgetLibrary/MenuWidget/interface.ts | 8 ++++++ .../src/widgetLibrary/MenuWidget/menu.tsx | 20 +++++++++++++-- .../src/widgetLibrary/MenuWidget/style.ts | 25 +++++++++++++++++++ illa-design | 2 +- 6 files changed, 73 insertions(+), 6 deletions(-) create mode 100644 apps/builder/src/widgetLibrary/MenuWidget/MenuItemLabel.tsx create mode 100644 apps/builder/src/widgetLibrary/MenuWidget/style.ts diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx index c666b4a38a..eb898582fe 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx @@ -1,13 +1,11 @@ import { FC, useCallback, useContext, useState } from "react" import { useTranslation } from "react-i18next" -import { ReduceIcon, DragPointIcon, AddIcon } from "@illa-design/icon" +import { DragPointIcon, AddIcon } from "@illa-design/icon" import { Trigger } from "@illa-design/trigger" import { addIconStyle, - baseIconStyle, deleteButtonStyle, dragItemStyle, - headerActionButtonStyle, iconAreaStyle, labelNameAndIconStyle, labelNameWrapperStyle, diff --git a/apps/builder/src/widgetLibrary/MenuWidget/MenuItemLabel.tsx b/apps/builder/src/widgetLibrary/MenuWidget/MenuItemLabel.tsx new file mode 100644 index 0000000000..76f9dc8196 --- /dev/null +++ b/apps/builder/src/widgetLibrary/MenuWidget/MenuItemLabel.tsx @@ -0,0 +1,20 @@ +import { FC } from "react" +import { MenuItemLabelProps } from "@/widgetLibrary/MenuWidget/interface" +import { + applyMenuItemIconStyle, + menuItemLabelStyle, +} from "@/widgetLibrary/MenuWidget/style" + +export const MenuItemLabel: FC = (props) => { + const { title, icon, mode } = props + return ( + + {icon ? ( + {title} + ) : null} + {title} + + ) +} + +MenuItemLabel.displayName = "MenuItemLabel" diff --git a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts index 609d21bc47..da871a51dc 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts +++ b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts @@ -15,6 +15,14 @@ export interface WrappedMenuProps handleOnColumnFiltersChange?: () => void } +export type MenuMode = "vertical" | "horizontal" + +export interface MenuItemLabelProps { + title?: string + icon?: string + mode?: MenuMode +} + export interface SubMenu { id: string title: string diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx index f93c6687fd..3c792e96af 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -1,6 +1,8 @@ import { FC, forwardRef, useEffect, useMemo, useRef } from "react" import { Menu } from "@illa-design/menu" import { MenuWidgetProps, WrappedMenuProps } from "./interface" +import { css } from "@emotion/react" +import { MenuItemLabel } from "@/widgetLibrary/MenuWidget/MenuItemLabel" export const WrappedMenu = forwardRef( (props, ref) => { @@ -12,9 +14,19 @@ export const WrappedMenu = forwardRef( {menuList?.map((item, index) => { if (item.subMenu) { return ( - + } + > {item.subMenu.map((subItem, index) => { - return + return ( + + } + /> + ) })} ) @@ -59,6 +71,10 @@ export const MenuWidget: FC = (props) => { } }, [mode]) + const menu = useMemo(() => { + menuList?.map((item, index) => {}) + }, [menuList]) + return (
{ + const modeStyle = + mode === "horizontal" + ? css` + margin-right: 8px; + ` + : css` + margin-right: 16px; + ` + return css` + width: 14px; + height: 14px; + ${modeStyle}; + ` +} diff --git a/illa-design b/illa-design index 826c38c6c6..42d3a3dd1d 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit 826c38c6c69af7cc9fc1bcf3c6cabfdc288e4be3 +Subproject commit 42d3a3dd1d9dbc3545bf2716f0cecac284f899d0 From 9b8b71eca18346d018a4a58f7606bdbde11098d3 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Thu, 10 Nov 2022 14:57:27 +0800 Subject: [PATCH 08/31] feat: add menu hidden --- .../MenuSetter/MenuOptionSetter/body.tsx | 10 ++++----- ...umnListContext.tsx => menuListContext.tsx} | 21 ++++++------------- .../MenuOptionSetter/dragIconAndLabel.tsx | 7 ++----- .../MenuSetter/MenuOptionSetter/index.tsx | 8 +++---- .../MenuSetter/MenuOptionSetter/interface.ts | 21 ++----------------- .../{columnItem.tsx => menuItem.tsx} | 10 +++++---- .../MenuOptionSetter/subMenuLabel.tsx | 4 ++-- ...nerateNewColumns.ts => generateNewMenu.ts} | 0 .../MenuWidget/MenuItemLabel.tsx | 2 +- .../src/widgetLibrary/MenuWidget/menu.tsx | 21 ++++++++++--------- .../widgetLibrary/MenuWidget/panelConfig.tsx | 9 -------- .../src/widgetLibrary/MenuWidget/style.ts | 2 +- 12 files changed, 40 insertions(+), 75 deletions(-) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/{columnListContext.tsx => menuListContext.tsx} (84%) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/{columnItem.tsx => menuItem.tsx} (82%) rename apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/{generateNewColumns.ts => generateNewMenu.ts} (100%) diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx index 6696438320..f2357e17d8 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/body.tsx @@ -1,13 +1,13 @@ import { FC, useContext } from "react" -import { Reorder, useDragControls } from "framer-motion" -import { ColumnListSetterContext } from "./context/columnListContext" +import { Reorder } from "framer-motion" +import { MenuListSetterContext } from "./context/menuListContext" import { EmptyBody } from "./empty" import { removeNativeStyle } from "@/page/App/components/PanelSetters/TableSetter/ColumnSetter/style" -import { ColumnItem } from "@/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem" +import { MenuItem } from "@/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/menuItem" export const ListBody: FC = () => { const { columnItems, handleUpdateDsl, attrPath } = useContext( - ColumnListSetterContext, + MenuListSetterContext, ) if (!columnItems || !Array.isArray(columnItems) || columnItems.length === 0) @@ -32,7 +32,7 @@ export const ListBody: FC = () => { key={item.id} value={item} > - + ) })} diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/menuListContext.tsx similarity index 84% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/menuListContext.tsx index 0cc91d257b..af327ac64a 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/menuListContext.tsx @@ -3,7 +3,7 @@ import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" import { generateMenuItemId, generateNewSubMenuItem, -} from "../utils/generateNewColumns" +} from "../utils/generateNewMenu" import { MenuList } from "@/widgetLibrary/MenuWidget/interface" interface ProviderProps { @@ -21,12 +21,11 @@ interface Inject extends Omit { handleAddSubMenuItem: (index: number) => void handleDeleteSubMenuItem: (index: number, subIndex: number) => void handleMoveColumnItem: (dragIndex: number, hoverIndex: number) => void - handleUpdateItemVisible: (attrName: string, visible?: boolean) => void } -export const ColumnListSetterContext = createContext({} as Inject) +export const MenuListSetterContext = createContext({} as Inject) -export const ColumnsSetterProvider: FC = (props) => { +export const MenusSetterProvider: FC = (props) => { const { columnItems, attrPath, handleUpdateDsl } = props const handleDeleteMenuItem = useCallback( @@ -99,28 +98,20 @@ export const ColumnsSetterProvider: FC = (props) => { [attrPath, columnItems, handleUpdateDsl], ) - const handleUpdateItemVisible = useCallback( - (attrName: string, visible?: boolean) => { - handleUpdateDsl(attrName, visible) - }, - [handleUpdateDsl], - ) - const value = { ...props, handleDeleteMenuItem, handleCopyColumnItem, handleMoveColumnItem, handleAddSubMenuItem, - handleUpdateItemVisible, handleDeleteSubMenuItem, } return ( - + {props.children} - + ) } -ColumnsSetterProvider.displayName = "ColumnsSetterProvider" +MenusSetterProvider.displayName = "ColumnsSetterProvider" diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx index eb898582fe..122e89a573 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx @@ -13,7 +13,7 @@ import { } from "./style" import { DragIconAndLabelProps } from "./interface" import { BaseModal } from "@/page/App/components/PanelSetters/PublicComponent/Modal" -import { ColumnListSetterContext } from "./context/columnListContext" +import { MenuListSetterContext } from "./context/menuListContext" import { Button } from "@illa-design/button" export const DragIconAndLabel: FC = (props) => { @@ -23,12 +23,9 @@ export const DragIconAndLabel: FC = (props) => { widgetDisplayName, attrPath, childrenSetter, - handleUpdateItemVisible, handleAddSubMenuItem, handleDeleteMenuItem, - } = useContext(ColumnListSetterContext) - - console.log(childrenSetter, "childrenSetter") + } = useContext(MenuListSetterContext) const { t } = useTranslation() diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/index.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/index.tsx index 9a7151c2e0..2b5b6056cc 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/index.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/index.tsx @@ -8,8 +8,8 @@ import { ListStyle, optionListHeaderStyle, } from "./style" -import { generateNewMenuItem } from "./utils/generateNewColumns" -import { ColumnsSetterProvider } from "./context/columnListContext" +import { generateNewMenuItem } from "./utils/generateNewMenu" +import { MenusSetterProvider } from "./context/menuListContext" import { useTranslation } from "react-i18next" import { AddIcon } from "@illa-design/icon" @@ -35,7 +35,7 @@ export const MenuOptionSetter: FC = (props) => { } return ( - = (props) => {
- + ) } diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts index e9ea921b6c..307987102f 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/interface.ts @@ -1,19 +1,13 @@ import { BaseSetter } from "@/page/App/components/PanelSetters/interface" -import { - PanelFieldConfig, - PanelLabelProps, -} from "@/page/App/components/InspectPanel/interface" -import { ColumnItemShape } from "@/widgetLibrary/TableWidget/interface" -import { ColumnsSelectSetter } from "@/page/App/components/PanelSetters/TableSetter/columsSelectSetter" +import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" import { MenuList, SubMenu } from "@/widgetLibrary/MenuWidget/interface" -import { SubMenuLabel } from "@/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel" export interface HeaderProps { labelName: string handleAddOption: () => void } -export interface ColumnItemProps extends MenuList { +export interface MenuItemProps extends MenuList { index: number } @@ -31,14 +25,3 @@ export interface ColumnListSetterProps extends BaseSetter { value: MenuList[] 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/MenuSetter/MenuOptionSetter/columnItem.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/menuItem.tsx similarity index 82% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/menuItem.tsx index f33cb20356..e505c38106 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/columnItem.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/menuItem.tsx @@ -1,14 +1,14 @@ import { FC, useContext } from "react" -import { ColumnItemProps } from "./interface" +import { MenuItemProps } from "./interface" import { optionListItemStyle } from "./style" import { DragIconAndLabel } from "./dragIconAndLabel" import { Reorder } from "framer-motion" import { removeNativeStyle } from "@/page/App/components/PanelSetters/TableSetter/ColumnSetter/style" -import { ColumnListSetterContext } from "@/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/columnListContext" +import { MenuListSetterContext } from "@/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/menuListContext" import { SubMenuLabel } from "@/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel" -export const ColumnItem: FC = (props) => { - const { handleUpdateDsl, attrPath } = useContext(ColumnListSetterContext) +export const MenuItem: FC = (props) => { + const { handleUpdateDsl, attrPath } = useContext(MenuListSetterContext) const { title, id, disabled, icon, subMenu, index } = props return ( @@ -55,3 +55,5 @@ export const ColumnItem: FC = (props) => { ) } + +MenuItem.displayName = "MenuItem" diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx index 646902370a..9e0d9ac3f8 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx @@ -13,14 +13,14 @@ import { } from "./style" import { SubMenuLabelProps } from "./interface" import { BaseModal } from "@/page/App/components/PanelSetters/PublicComponent/Modal" -import { ColumnListSetterContext } from "./context/columnListContext" +import { MenuListSetterContext } from "./context/menuListContext" import { Button } from "@illa-design/button" export const SubMenuLabel: FC = (props) => { const { index, subIndex, title, attrPath } = props const [modalVisible, setModalVisible] = useState(false) const { widgetDisplayName, childrenSetter, handleDeleteSubMenuItem } = - useContext(ColumnListSetterContext) + useContext(MenuListSetterContext) const { t } = useTranslation() diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewColumns.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewMenu.ts similarity index 100% rename from apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewColumns.ts rename to apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/utils/generateNewMenu.ts diff --git a/apps/builder/src/widgetLibrary/MenuWidget/MenuItemLabel.tsx b/apps/builder/src/widgetLibrary/MenuWidget/MenuItemLabel.tsx index 76f9dc8196..1c37221750 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/MenuItemLabel.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/MenuItemLabel.tsx @@ -10,7 +10,7 @@ export const MenuItemLabel: FC = (props) => { return ( {icon ? ( - {title} + icon ) : null} {title} diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx index 3c792e96af..4772591f05 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -4,26 +4,31 @@ import { MenuWidgetProps, WrappedMenuProps } from "./interface" import { css } from "@emotion/react" import { MenuItemLabel } from "@/widgetLibrary/MenuWidget/MenuItemLabel" -export const WrappedMenu = forwardRef( +export const WrappedMenu = forwardRef( (props, ref) => { const { menuList, mode } = props const { Item, SubMenu } = Menu return ( - - {menuList?.map((item, index) => { + + {menuList?.map((item) => { + if (item.hidden) return null if (item.subMenu) { return ( } > - {item.subMenu.map((subItem, index) => { + {item.subMenu.map((subItem) => { + if (subItem.hidden) return null return ( + } /> ) @@ -71,10 +76,6 @@ export const MenuWidget: FC = (props) => { } }, [mode]) - const menu = useMemo(() => { - menuList?.map((item, index) => {}) - }, [menuList]) - return (
Date: Thu, 10 Nov 2022 16:01:12 +0800 Subject: [PATCH 09/31] feat: add align props --- .../src/widgetLibrary/MenuWidget/interface.ts | 2 ++ .../src/widgetLibrary/MenuWidget/menu.tsx | 27 ++++++++++++++----- .../widgetLibrary/MenuWidget/panelConfig.tsx | 22 +++------------ .../src/widgetLibrary/MenuWidget/style.ts | 5 +++- .../src/widgetLibrary/TabsWidget/style.tsx | 5 +--- .../src/widgetLibrary/TabsWidget/tabs.tsx | 2 +- illa-design | 2 +- 7 files changed, 33 insertions(+), 32 deletions(-) diff --git a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts index da871a51dc..43b4a2af70 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts +++ b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts @@ -2,6 +2,8 @@ import { MenuProps } from "@illa-design/menu" import { BaseWidgetProps } from "@/widgetLibrary/interface" import { HTMLAttributes } from "react" +export type MenuHorizontalAlign = "flex-start" | "center" | "flex-end" + export interface WrappedMenuProps extends HTMLAttributes, MenuProps { diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx index 4772591f05..23a35ca22a 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -1,16 +1,20 @@ -import { FC, forwardRef, useEffect, useMemo, useRef } from "react" +import { FC, forwardRef, useCallback, useEffect, useRef } from "react" import { Menu } from "@illa-design/menu" import { MenuWidgetProps, WrappedMenuProps } from "./interface" -import { css } from "@emotion/react" import { MenuItemLabel } from "@/widgetLibrary/MenuWidget/MenuItemLabel" export const WrappedMenu = forwardRef( (props, ref) => { - const { menuList, mode } = props + const { menuList, mode, horizontalAlign, onClickSubMenu } = props const { Item, SubMenu } = Menu return ( - + {menuList?.map((item) => { if (item.hidden) return null if (item.subMenu) { @@ -50,6 +54,7 @@ export const MenuWidget: FC = (props) => { emptyState, pageSize, displayName, + horizontalAlign, handleUpdateDsl, handleUpdateGlobalData, handleDeleteGlobalData, @@ -70,19 +75,29 @@ export const MenuWidget: FC = (props) => { const wrapperRef = useRef(null) - useEffect(() => { + const updateHeight = useCallback(() => { if (wrapperRef.current) { updateComponentHeight(wrapperRef.current?.clientHeight) } - }, [mode]) + }, [updateComponentHeight]) + + useEffect(() => { + updateHeight() + }, [mode, updateHeight]) return (
{ + setTimeout(() => { + updateHeight() + }, 180) + }} />
) diff --git a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx index f6fa0509e5..a673bfe7a7 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx @@ -109,29 +109,13 @@ export const MENU_PANEL_CONFIG: PanelConfig[] = [ }, ], }, - { - id: `${baseWidgetName}-layout-layout`, - labelName: i18n.t("editor.inspect.setter_label.layout"), - setterType: "RADIO_GROUP_SETTER", - attrName: "tabPosition", - options: [ - { - label: , - value: "horizontal", - }, - { - label: , - value: "vertical", - }, - ], - }, { id: `${baseWidgetName}-layout-align`, labelName: i18n.t("editor.inspect.setter_label.align"), - attrName: "align", + attrName: "horizontalAlign", setterType: "RADIO_GROUP_SETTER", - bindAttrName: ["tabPosition"], - shown: (tabPosition) => tabPosition === "horizontal", + bindAttrName: ["mode"], + shown: (mode) => mode === "horizontal", options: [ { label: , diff --git a/apps/builder/src/widgetLibrary/MenuWidget/style.ts b/apps/builder/src/widgetLibrary/MenuWidget/style.ts index e58002b393..f0731e1914 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/style.ts +++ b/apps/builder/src/widgetLibrary/MenuWidget/style.ts @@ -1,6 +1,9 @@ import { css, SerializedStyles } from "@emotion/react" import { globalColor, illaPrefix } from "@illa-design/theme" -import { MenuMode } from "@/widgetLibrary/MenuWidget/interface" +import { + MenuHorizontalAlign, + MenuMode, +} from "@/widgetLibrary/MenuWidget/interface" export const menuItemLabelStyle = css` display: inline-flex; diff --git a/apps/builder/src/widgetLibrary/TabsWidget/style.tsx b/apps/builder/src/widgetLibrary/TabsWidget/style.tsx index 289ee2d719..a3e888bfd3 100644 --- a/apps/builder/src/widgetLibrary/TabsWidget/style.tsx +++ b/apps/builder/src/widgetLibrary/TabsWidget/style.tsx @@ -1,8 +1,5 @@ import { css, SerializedStyles } from "@emotion/react" -import { - HorizontalAlign, - VerticalAlign, -} from "@/widgetLibrary/TextWidget/interface" +import { HorizontalAlign } from "@/widgetLibrary/TextWidget/interface" export function applyAlignStyle( horizontalAlign?: HorizontalAlign, diff --git a/apps/builder/src/widgetLibrary/TabsWidget/tabs.tsx b/apps/builder/src/widgetLibrary/TabsWidget/tabs.tsx index 6c74f94cf9..032d53e0e4 100644 --- a/apps/builder/src/widgetLibrary/TabsWidget/tabs.tsx +++ b/apps/builder/src/widgetLibrary/TabsWidget/tabs.tsx @@ -35,7 +35,7 @@ export const WrappedTabs: FC = (props) => { }} > {tabList?.map((item) => { - if (item.hidden) return + if (item.hidden) return null return ( Date: Thu, 10 Nov 2022 16:08:00 +0800 Subject: [PATCH 10/31] feat: update menu config --- .../widgetLibrary/MenuWidget/panelConfig.tsx | 37 ----------------- .../src/widgetLibrary/MenuWidget/style.ts | 6 +-- .../widgetLibrary/MenuWidget/widgetConfig.tsx | 40 ++++--------------- 3 files changed, 8 insertions(+), 75 deletions(-) diff --git a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx index a673bfe7a7..0cd5335160 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx @@ -66,21 +66,6 @@ export const MENU_PANEL_CONFIG: PanelConfig[] = [ }, ], }, - { - id: `${baseWidgetName}-interaction`, - groupName: i18n.t("editor.inspect.setter_group.interaction"), - children: [ - { - 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, - }, - ], - }, { id: `${baseWidgetName}-layout`, groupName: i18n.t("editor.inspect.setter_group.layout"), @@ -133,26 +118,4 @@ export const MENU_PANEL_CONFIG: PanelConfig[] = [ }, ], }, - { - id: `${baseWidgetName}-style`, - groupName: i18n.t("editor.inspect.setter_group.style"), - children: [ - { - id: `${baseWidgetName}-style-color`, - setterType: "LIST_SETTER", - labelName: i18n.t("editor.inspect.setter_label.colors"), - attrName: "styles", - useCustomLayout: true, - childrenSetter: [ - { - id: `${baseWidgetName}-style-color`, - labelName: i18n.t("editor.inspect.setter_label.text"), - setterType: "COLOR_PICKER_SETTER", - attrName: "colorScheme", - defaultValue: "blue", - }, - ], - }, - ], - }, ] diff --git a/apps/builder/src/widgetLibrary/MenuWidget/style.ts b/apps/builder/src/widgetLibrary/MenuWidget/style.ts index f0731e1914..362d642481 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/style.ts +++ b/apps/builder/src/widgetLibrary/MenuWidget/style.ts @@ -1,9 +1,5 @@ import { css, SerializedStyles } from "@emotion/react" -import { globalColor, illaPrefix } from "@illa-design/theme" -import { - MenuHorizontalAlign, - MenuMode, -} from "@/widgetLibrary/MenuWidget/interface" +import { MenuMode } from "@/widgetLibrary/MenuWidget/interface" export const menuItemLabelStyle = css` display: inline-flex; diff --git a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx index 1acf6a1c6f..3dcacd58c7 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx @@ -5,54 +5,32 @@ import i18n from "@/i18n/config" const menuList = [ { id: "1", - title: "title", - icon: "icon", - hidden: true, - disabled: true, + title: "Menu 1", subMenu: [ { id: "1-1", - title: "1111", - icon: "icon", - hidden: true, - disabled: true, + title: "SubMenu 1", }, { id: "1-2", - title: "2222", - icon: "icon", - hidden: true, - disabled: true, + title: "SubMenu 2", }, ], }, { id: "2", - title: "answer", - icon: "icon", - hidden: true, - disabled: true, + title: "Menu 2", subMenu: [ { id: "2-1", - title: "abcd", - icon: "icon", - hidden: true, - disabled: true, + title: "SubMenu 1", }, { id: "2-2", - title: "edfg", - icon: "icon", - hidden: true, - disabled: true, + title: "SubMenu 2", }, ], }, - { - id: "3", - title: "title", - }, ] export const MENU_WIDGET_CONFIG: WidgetConfig = { @@ -67,10 +45,6 @@ export const MENU_WIDGET_CONFIG: WidgetConfig = { defaults: { menuList, mode: "vertical", - emptyState: "No rows found", - overFlow: "pagination", - download: false, - filter: false, - pageSize: `{{10}}`, + horizontalAlign: "flex-start", }, } From 7b92b1753e091aeacd23222f9a70a4dd2ad30412 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Thu, 10 Nov 2022 16:18:02 +0800 Subject: [PATCH 11/31] feat: add menu key value --- .../src/widgetLibrary/MenuWidget/interface.ts | 1 + .../src/widgetLibrary/MenuWidget/menu.tsx | 19 ++++++++++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts index 43b4a2af70..dc0bc2fb22 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts +++ b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts @@ -15,6 +15,7 @@ export interface WrappedMenuProps handleOnSortingChange?: () => void handleOnPaginationChange?: () => void handleOnColumnFiltersChange?: () => void + handleUpdateOriginalDSLMultiAttr: (updateSlice: Record) => void } export type MenuMode = "vertical" | "horizontal" diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx index 23a35ca22a..d47b1555cd 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -5,15 +5,28 @@ import { MenuItemLabel } from "@/widgetLibrary/MenuWidget/MenuItemLabel" export const WrappedMenu = forwardRef( (props, ref) => { - const { menuList, mode, horizontalAlign, onClickSubMenu } = props + const { + menuList, + mode, + horizontalAlign, + selectedKeys, + onClickSubMenu, + handleUpdateOriginalDSLMultiAttr, + } = props const { Item, SubMenu } = Menu return ( { + handleUpdateOriginalDSLMultiAttr({ + selectedKeys: value, + }) + }} > {menuList?.map((item) => { if (item.hidden) return null @@ -52,6 +65,7 @@ export const MenuWidget: FC = (props) => { mode, menuList, emptyState, + selectedKeys, pageSize, displayName, horizontalAlign, @@ -59,6 +73,7 @@ export const MenuWidget: FC = (props) => { handleUpdateGlobalData, handleDeleteGlobalData, updateComponentHeight, + handleUpdateOriginalDSLMultiAttr, } = props useEffect(() => { @@ -89,10 +104,12 @@ export const MenuWidget: FC = (props) => {
{ setTimeout(() => { updateHeight() From e9f89f294950c5509e02e444045f552219aef6a9 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Thu, 10 Nov 2022 17:09:38 +0800 Subject: [PATCH 12/31] feat: update menu event --- .../MenuWidget/eventHandlerConfig.ts | 2 +- .../src/widgetLibrary/MenuWidget/interface.ts | 1 + .../src/widgetLibrary/MenuWidget/menu.tsx | 29 +++++++++++++++---- .../TransformWidgetWrapper/index.tsx | 21 ++++++++++++++ 4 files changed, 47 insertions(+), 6 deletions(-) diff --git a/apps/builder/src/widgetLibrary/MenuWidget/eventHandlerConfig.ts b/apps/builder/src/widgetLibrary/MenuWidget/eventHandlerConfig.ts index 90f447857d..97f11cd47c 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/eventHandlerConfig.ts +++ b/apps/builder/src/widgetLibrary/MenuWidget/eventHandlerConfig.ts @@ -7,7 +7,7 @@ export const MENU_EVENT_HANDLER_CONFIG: EventHandlerConfig = { label: i18n.t( "editor.inspect.setter_content.widget_action_type_name.click", ), - value: "click", + value: "clickMenuItem", }, ], methods: [], diff --git a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts index dc0bc2fb22..a3ed8d05db 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/interface.ts +++ b/apps/builder/src/widgetLibrary/MenuWidget/interface.ts @@ -16,6 +16,7 @@ export interface WrappedMenuProps handleOnPaginationChange?: () => void handleOnColumnFiltersChange?: () => void handleUpdateOriginalDSLMultiAttr: (updateSlice: Record) => void + handleOnClickMenuItem: (path: string) => void } export type MenuMode = "vertical" | "horizontal" diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx index d47b1555cd..f47aea8933 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -11,6 +11,7 @@ export const WrappedMenu = forwardRef( horizontalAlign, selectedKeys, onClickSubMenu, + handleOnClickMenuItem, handleUpdateOriginalDSLMultiAttr, } = props const { Item, SubMenu } = Menu @@ -22,9 +23,27 @@ export const WrappedMenu = forwardRef( selectedKeys={selectedKeys} horizontalAlign={horizontalAlign} onClickSubMenu={onClickSubMenu} - onClickMenuItem={(value) => { - handleUpdateOriginalDSLMultiAttr({ - selectedKeys: value, + onClickMenuItem={(key) => { + let path = "" + menuList?.forEach((item, index) => { + if (item.id === key) { + path = `menuList.${index}.events` + return + } + item?.subMenu?.forEach((subItem, subIndex) => { + if (subItem.id === key) { + path = `menuList.${index}.subMenu.${subIndex}.events` + return + } + }) + }) + new Promise((resolve) => { + handleUpdateOriginalDSLMultiAttr({ + selectedKeys: key, + }) + resolve(true) + }).then(() => { + handleOnClickMenuItem?.(path) }) }} > @@ -73,7 +92,7 @@ export const MenuWidget: FC = (props) => { handleUpdateGlobalData, handleDeleteGlobalData, updateComponentHeight, - handleUpdateOriginalDSLMultiAttr, + ...rest } = props useEffect(() => { @@ -103,13 +122,13 @@ export const MenuWidget: FC = (props) => { return (
{ setTimeout(() => { updateHeight() diff --git a/apps/builder/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx b/apps/builder/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx index cc0181f01c..4c002c670e 100644 --- a/apps/builder/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx +++ b/apps/builder/src/widgetLibrary/PublicSector/TransformWidgetWrapper/index.tsx @@ -177,6 +177,17 @@ export const TransformWidgetWrapper: FC = memo( return [] }, [realProps]) + const getOnClickMenuItemEventScripts = useCallback( + (path: string) => { + const events = get(realProps, path) + if (events) { + return getEventScripts(events, "clickMenuItem") + } + return [] + }, + [realProps], + ) + const getOnSortingChangeEventScripts = useCallback(() => { const events = get(realProps, "events") if (events) { @@ -213,6 +224,15 @@ export const TransformWidgetWrapper: FC = memo( }) }, [getOnClickEventScripts]) + const handleOnClickMenuItem = useCallback( + (path: string) => { + getOnClickMenuItemEventScripts(path).forEach((scriptObj) => { + runEventHandler(scriptObj, BUILDER_CALC_CONTEXT) + }) + }, + [getOnClickMenuItemEventScripts], + ) + const handleOnSortingChange = useCallback(() => { getOnSortingChangeEventScripts().forEach((scriptObj) => { runEventHandler(scriptObj, BUILDER_CALC_CONTEXT) @@ -298,6 +318,7 @@ export const TransformWidgetWrapper: FC = memo( } handleOnChange={handleOnChange} handleOnClick={handleOnClick} + handleOnClickMenuItem={handleOnClickMenuItem} handleOnSortingChange={handleOnSortingChange} handleOnPaginationChange={handleOnPaginationChange} handleOnColumnFiltersChange={handleOnColumnFiltersChange} From 34aa7a15a771ef789929d4efea91fe124a084058 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Thu, 10 Nov 2022 17:18:24 +0800 Subject: [PATCH 13/31] feat: update menu config --- apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx | 4 ++-- apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx index 0cd5335160..9005a60be7 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/panelConfig.tsx @@ -26,14 +26,14 @@ export const MENU_PANEL_CONFIG: PanelConfig[] = [ childrenSetter: [ { id: `${baseWidgetName}-menu-title`, - labelName: i18n.t("editor.inspect.setter_label.column_title"), + labelName: i18n.t("editor.inspect.setter_label.label"), attrName: "title", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, }, { id: `${baseWidgetName}-menu-icon`, - labelName: i18n.t("editor.inspect.setter_label.column_title"), + labelName: i18n.t("editor.inspect.setter_label.icon"), attrName: "icon", setterType: "INPUT_SETTER", expectedType: VALIDATION_TYPES.STRING, diff --git a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx index 3dcacd58c7..c5cc36fd64 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx @@ -44,7 +44,7 @@ export const MENU_WIDGET_CONFIG: WidgetConfig = { sessionType: "PRESENTATION", defaults: { menuList, - mode: "vertical", + mode: "horizontal", horizontalAlign: "flex-start", }, } From 465805d6168b45eb6ce7f696788752ea5b0d3447 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Thu, 10 Nov 2022 17:46:25 +0800 Subject: [PATCH 14/31] chore: update design --- illa-design | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/illa-design b/illa-design index ae26752e0d..95adb2eb15 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit ae26752e0d59c60a375e959788e23dc79ecd7d8d +Subproject commit 95adb2eb1522da3552077f49f97396203ec9dc36 From cfa749faeb06585fa4bf28620c654d36b87a03a1 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Thu, 10 Nov 2022 17:51:38 +0800 Subject: [PATCH 15/31] feat: change the time of update height --- .../src/widgetLibrary/MenuWidget/menu.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx index f47aea8933..10b56f2d82 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -110,13 +110,18 @@ export const MenuWidget: FC = (props) => { const wrapperRef = useRef(null) const updateHeight = useCallback(() => { - if (wrapperRef.current) { - updateComponentHeight(wrapperRef.current?.clientHeight) - } + setTimeout(() => { + if (wrapperRef.current) { + updateComponentHeight(wrapperRef.current?.clientHeight) + } + }, 180) }, [updateComponentHeight]) useEffect(() => { updateHeight() + return () => { + clearTimeout() + } }, [mode, updateHeight]) return ( @@ -129,11 +134,7 @@ export const MenuWidget: FC = (props) => { menuList={menuList} emptyState={emptyState} pageSize={pageSize} - onClickSubMenu={() => { - setTimeout(() => { - updateHeight() - }, 180) - }} + onClickSubMenu={updateHeight} />
) From 173b4f82cd38a18bf69f834a8af27d07df57de83 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Thu, 10 Nov 2022 18:28:33 +0800 Subject: [PATCH 16/31] delete: useless code --- .../context/menuListContext.tsx | 38 +------------------ 1 file changed, 1 insertion(+), 37 deletions(-) diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/menuListContext.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/menuListContext.tsx index af327ac64a..ef9c92c1f5 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/menuListContext.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/context/menuListContext.tsx @@ -1,9 +1,6 @@ import { createContext, FC, ReactNode, useCallback } from "react" import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface" -import { - generateMenuItemId, - generateNewSubMenuItem, -} from "../utils/generateNewMenu" +import { generateNewSubMenuItem } from "../utils/generateNewMenu" import { MenuList } from "@/widgetLibrary/MenuWidget/interface" interface ProviderProps { @@ -17,10 +14,8 @@ interface ProviderProps { interface Inject extends Omit { handleDeleteMenuItem: (index: number) => void - handleCopyColumnItem: (index: number) => void handleAddSubMenuItem: (index: number) => void handleDeleteSubMenuItem: (index: number, subIndex: number) => void - handleMoveColumnItem: (dragIndex: number, hoverIndex: number) => void } export const MenuListSetterContext = createContext({} as Inject) @@ -69,40 +64,9 @@ export const MenusSetterProvider: FC = (props) => { [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: generateMenuItemId(), - } - 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, handleDeleteMenuItem, - handleCopyColumnItem, - handleMoveColumnItem, handleAddSubMenuItem, handleDeleteSubMenuItem, } From 3ed6f8403208b989f3923efefceb7c51d74a313e Mon Sep 17 00:00:00 2001 From: AruSeito Date: Thu, 10 Nov 2022 19:58:53 +0800 Subject: [PATCH 17/31] =?UTF-8?q?fix:=20=F0=9F=90=9B=20homepage=20error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/builder/src/page/App/components/DotPanel/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/builder/src/page/App/components/DotPanel/index.tsx b/apps/builder/src/page/App/components/DotPanel/index.tsx index 3d3ff6fd81..ff3980ae7c 100644 --- a/apps/builder/src/page/App/components/DotPanel/index.tsx +++ b/apps/builder/src/page/App/components/DotPanel/index.tsx @@ -20,7 +20,7 @@ export const DotPanel: FC = () => { pageSortedKey, homepageDisplayName, } = rootExecutionProps - let { pageName = "page1" } = useParams() + let { pageName } = useParams() const currentDisplayName = useMemo(() => { if (mode === "production") { return pageName || homepageDisplayName From 424558b5cb8de98fdb51ab6d98bfe0ce7515c8ef Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 11 Nov 2022 10:59:03 +0800 Subject: [PATCH 18/31] fix: menu ui --- .../Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx | 2 -- .../PanelSetters/ChartSetter/chartKeysSelectSetter.tsx | 1 - .../PanelSetters/TabsSetter/TabListSetter/dragIconAndLabel.tsx | 1 - apps/builder/src/widgetLibrary/MenuWidget/menu.tsx | 2 +- 4 files changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/builder/src/page/App/components/Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx b/apps/builder/src/page/App/components/Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx index 262f69aab0..bbd036856f 100644 --- a/apps/builder/src/page/App/components/Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx +++ b/apps/builder/src/page/App/components/Actions/ActionPanel/RestApiPanel/BodyEditor/index.tsx @@ -101,8 +101,6 @@ export const BodyEditor: FC = (props) => { } } - console.log("longbo", newBody) - dispatch( configActions.updateCachedAction({ ...actionItem, diff --git a/apps/builder/src/page/App/components/PanelSetters/ChartSetter/chartKeysSelectSetter.tsx b/apps/builder/src/page/App/components/PanelSetters/ChartSetter/chartKeysSelectSetter.tsx index 13b537ff00..4123da6493 100644 --- a/apps/builder/src/page/App/components/PanelSetters/ChartSetter/chartKeysSelectSetter.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/ChartSetter/chartKeysSelectSetter.tsx @@ -97,7 +97,6 @@ export const ChartKeysSelectSetter: FC = ( if (attrName === "groupBy") { if ((!!value && !newValue) || (!value && !!newValue)) { const newDatasets = generateNewDatasets(!!newValue) - console.log("newDatasets", newDatasets) handleUpdateMultiAttrDSL?.({ datasets: newDatasets, [attrName]: newValue, diff --git a/apps/builder/src/page/App/components/PanelSetters/TabsSetter/TabListSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/TabsSetter/TabListSetter/dragIconAndLabel.tsx index 1f9be27fed..3cc632cf50 100644 --- a/apps/builder/src/page/App/components/PanelSetters/TabsSetter/TabListSetter/dragIconAndLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/TabsSetter/TabListSetter/dragIconAndLabel.tsx @@ -46,7 +46,6 @@ export const DragIconAndLabel: FC = (props) => { `${widgetDisplayName}.${attrPath}.${index}.label`, ) }, [executionResult, widgetDisplayName, attrPath, index]) - console.log(labelName, "labelName") return ( diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx index 10b56f2d82..8fd4a45f52 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -49,7 +49,7 @@ export const WrappedMenu = forwardRef( > {menuList?.map((item) => { if (item.hidden) return null - if (item.subMenu) { + if (item.subMenu?.length) { return ( Date: Fri, 11 Nov 2022 11:01:23 +0800 Subject: [PATCH 19/31] fix: timeout --- apps/builder/src/widgetLibrary/MenuWidget/menu.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx index 8fd4a45f52..d96f52c50e 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -106,11 +106,11 @@ export const MenuWidget: FC = (props) => { handleUpdateDsl, handleDeleteGlobalData, ]) - + const timeoutId = useRef() const wrapperRef = useRef(null) const updateHeight = useCallback(() => { - setTimeout(() => { + timeoutId.current = setTimeout(() => { if (wrapperRef.current) { updateComponentHeight(wrapperRef.current?.clientHeight) } @@ -120,7 +120,7 @@ export const MenuWidget: FC = (props) => { useEffect(() => { updateHeight() return () => { - clearTimeout() + clearTimeout(timeoutId.current) } }, [mode, updateHeight]) From 6aafa7102fd589192bc08564bed099914376e9f5 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 11 Nov 2022 11:04:13 +0800 Subject: [PATCH 20/31] fix: i18n --- apps/builder/src/i18n/locale/en-US.json | 3 ++- apps/builder/src/i18n/locale/zh-CN.json | 3 ++- .../MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx | 2 +- .../PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx | 2 +- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/builder/src/i18n/locale/en-US.json b/apps/builder/src/i18n/locale/en-US.json index 657c077b37..477ac44444 100644 --- a/apps/builder/src/i18n/locale/en-US.json +++ b/apps/builder/src/i18n/locale/en-US.json @@ -391,7 +391,8 @@ "menu_setter": { "label": "Menus ({{number}})", "new": "New", - "sub": "Sub" + "sub": "Sub", + "delete": "Delete" }, "event_handler_list": { "empty": "Trigger queries, control components, or call other APIs in response to component events.", diff --git a/apps/builder/src/i18n/locale/zh-CN.json b/apps/builder/src/i18n/locale/zh-CN.json index 68cbd55930..99ffaade64 100644 --- a/apps/builder/src/i18n/locale/zh-CN.json +++ b/apps/builder/src/i18n/locale/zh-CN.json @@ -391,7 +391,8 @@ "menu_setter": { "label": "菜单 ({{number}})", "new": "新建", - "sub": "子菜单" + "sub": "子菜单", + "delete": "删除" }, "event_handler_list": { "empty": "触发查询、控制组件或调用其他API以响应组件事件。", diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx index 122e89a573..a64da97d89 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx @@ -54,7 +54,7 @@ export const DragIconAndLabel: FC = (props) => { handleDeleteMenuItem(index) }} > - Delete + {t("editor.inspect.setter_content.menu_setter.delete")} } /> diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx index 9e0d9ac3f8..d127ee5c89 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx @@ -49,7 +49,7 @@ export const SubMenuLabel: FC = (props) => { handleDeleteSubMenuItem(index, subIndex) }} > - Delete + {t("editor.inspect.setter_content.menu_setter.delete")} } /> From f875b24b064601bb3f13c6d336ce1786cf1de5e3 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 11 Nov 2022 15:25:10 +0800 Subject: [PATCH 21/31] feat: add i18n --- apps/builder/src/i18n/locale/en-US.json | 1 + apps/builder/src/i18n/locale/zh-CN.json | 1 + illa-design | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/builder/src/i18n/locale/en-US.json b/apps/builder/src/i18n/locale/en-US.json index 0ca4ae3d78..0b2c34d793 100644 --- a/apps/builder/src/i18n/locale/en-US.json +++ b/apps/builder/src/i18n/locale/en-US.json @@ -430,6 +430,7 @@ "invalid": "Invalid", "paginationChange": "Page change", "sortingChange": "Sort change", + "clickMenuItem": "Click", "submit": "Submit", "success": "Success" } diff --git a/apps/builder/src/i18n/locale/zh-CN.json b/apps/builder/src/i18n/locale/zh-CN.json index 49d627deeb..936755c30b 100644 --- a/apps/builder/src/i18n/locale/zh-CN.json +++ b/apps/builder/src/i18n/locale/zh-CN.json @@ -430,6 +430,7 @@ "invalid": "校验失败", "paginationChange": "翻页配置改变", "sortingChange": "排序方式改变", + "clickMenuItem": "单击", "submit": "提交", "success": "成功后" } diff --git a/illa-design b/illa-design index 95adb2eb15..9afc811133 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit 95adb2eb1522da3552077f49f97396203ec9dc36 +Subproject commit 9afc8111331d234ba7d89e86678f6931ac08a5bc From c74499c3b2852daf998896061610fab82b542de3 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 11 Nov 2022 15:36:23 +0800 Subject: [PATCH 22/31] style: update menu ui --- .../PanelSetters/MenuSetter/MenuOptionSetter/style.ts | 4 ++-- illa-design | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts index b6aa7e7d33..b16dbaffe3 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/style.ts @@ -19,7 +19,7 @@ export const headerActionButtonStyle = css` display: flex; align-items: center; justify-content: center; - color: ${globalColor(`--${illaPrefix}-purple-01`)}; + color: ${globalColor(`--${illaPrefix}-techPurple-01`)}; cursor: pointer; font-weight: 400; margin: 0 8px; @@ -112,7 +112,7 @@ export const iconAreaStyle = css` flex-direction: row; align-items: center; justify-content: center; - color: ${globalColor(`--${illaPrefix}-purple-01`)}; + color: ${globalColor(`--${illaPrefix}-techPurple-01`)}; cursor: pointer; font-weight: 400; white-space: pre; diff --git a/illa-design b/illa-design index 9afc811133..4c5ad21c0b 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit 9afc8111331d234ba7d89e86678f6931ac08a5bc +Subproject commit 4c5ad21c0b38ae897fc67fafa11e0308104489b6 From 17269be0046f874b21752d3e7300d8066d3ea0a3 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 11 Nov 2022 15:39:23 +0800 Subject: [PATCH 23/31] feat: update modal width --- .../MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx | 2 ++ .../PanelSetters/MenuSetter/MenuOptionSetter/style.ts | 4 ++++ .../PanelSetters/MenuSetter/MenuOptionSetter/subMenuLabel.tsx | 2 ++ 3 files changed, 8 insertions(+) diff --git a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx index a64da97d89..4028de1c51 100644 --- a/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx +++ b/apps/builder/src/page/App/components/PanelSetters/MenuSetter/MenuOptionSetter/dragIconAndLabel.tsx @@ -9,6 +9,7 @@ import { iconAreaStyle, labelNameAndIconStyle, labelNameWrapperStyle, + modalStyle, movableIconWrapperStyle, } from "./style" import { DragIconAndLabelProps } from "./interface" @@ -40,6 +41,7 @@ export const DragIconAndLabel: FC = (props) => { popupVisible={modalVisible} content={ = (props) => { popupVisible={modalVisible} content={ Date: Fri, 11 Nov 2022 16:21:42 +0800 Subject: [PATCH 24/31] =?UTF-8?q?fix:=20=F0=9F=90=9B=20deploy=20bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/builder/src/page/App/components/DotPanel/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/builder/src/page/App/components/DotPanel/index.tsx b/apps/builder/src/page/App/components/DotPanel/index.tsx index ff3980ae7c..f1c33daadc 100644 --- a/apps/builder/src/page/App/components/DotPanel/index.tsx +++ b/apps/builder/src/page/App/components/DotPanel/index.tsx @@ -23,7 +23,7 @@ export const DotPanel: FC = () => { let { pageName } = useParams() const currentDisplayName = useMemo(() => { if (mode === "production") { - return pageName || homepageDisplayName + return pageName || homepageDisplayName || "page1" } else { return pageSortedKey[currentPageIndex] || homepageDisplayName } From 0d31951dffb7d5084a7552775d58a0fa32622db0 Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 11 Nov 2022 16:38:27 +0800 Subject: [PATCH 25/31] =?UTF-8?q?fix:=20=F0=9F=90=9B=20render=20page=20err?= =?UTF-8?q?or?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/builder/src/page/App/components/DotPanel/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/builder/src/page/App/components/DotPanel/index.tsx b/apps/builder/src/page/App/components/DotPanel/index.tsx index f1c33daadc..d7a6f269e1 100644 --- a/apps/builder/src/page/App/components/DotPanel/index.tsx +++ b/apps/builder/src/page/App/components/DotPanel/index.tsx @@ -23,7 +23,12 @@ export const DotPanel: FC = () => { let { pageName } = useParams() const currentDisplayName = useMemo(() => { if (mode === "production") { - return pageName || homepageDisplayName || "page1" + return ( + pageName || + homepageDisplayName || + pageSortedKey[currentPageIndex] || + "page1" + ) } else { return pageSortedKey[currentPageIndex] || homepageDisplayName } From 8bc3b2feaceed617fde95035473feb441ed1cbe3 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 11 Nov 2022 17:08:11 +0800 Subject: [PATCH 26/31] fix: selectKey type --- apps/builder/src/widgetLibrary/MenuWidget/menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx index d96f52c50e..68eea5b5fe 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -39,7 +39,7 @@ export const WrappedMenu = forwardRef( }) new Promise((resolve) => { handleUpdateOriginalDSLMultiAttr({ - selectedKeys: key, + selectedKeys: [key], }) resolve(true) }).then(() => { From 2a7ee361acd54dd1940807422d520e86dce9f7f6 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 11 Nov 2022 17:28:46 +0800 Subject: [PATCH 27/31] feat: update menu config --- apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx | 4 ++-- illa-design | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx index c5cc36fd64..54b3bf246c 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx @@ -36,8 +36,8 @@ const menuList = [ export const MENU_WIDGET_CONFIG: WidgetConfig = { displayName: "menu", widgetName: i18n.t("widget.menu.name"), - h: 20, - w: 42, + h: 7, + w: 30, type: "MENU_WIDGET", icon: , keywords: ["Menu", "菜单"], diff --git a/illa-design b/illa-design index 4c5ad21c0b..ce9c4940a5 160000 --- a/illa-design +++ b/illa-design @@ -1 +1 @@ -Subproject commit 4c5ad21c0b38ae897fc67fafa11e0308104489b6 +Subproject commit ce9c4940a572325d63712df4940bc51be2797c07 From e790650ef62f46e2cb76c585cd0510321b087613 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 11 Nov 2022 17:44:19 +0800 Subject: [PATCH 28/31] feat: update default value --- .../widgetLibrary/MenuWidget/widgetConfig.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx index 54b3bf246c..8e4087c3b1 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/widgetConfig.tsx @@ -6,27 +6,31 @@ const menuList = [ { id: "1", title: "Menu 1", + }, + { + id: "2", + title: "Menu 2", subMenu: [ { - id: "1-1", + id: "2-1", title: "SubMenu 1", }, { - id: "1-2", + id: "2-2", title: "SubMenu 2", }, ], }, { - id: "2", - title: "Menu 2", + id: "3", + title: "Menu 3", subMenu: [ { - id: "2-1", + id: "3-1", title: "SubMenu 1", }, { - id: "2-2", + id: "3-2", title: "SubMenu 2", }, ], @@ -44,6 +48,7 @@ export const MENU_WIDGET_CONFIG: WidgetConfig = { sessionType: "PRESENTATION", defaults: { menuList, + selectedKeys: ["1"], mode: "horizontal", horizontalAlign: "flex-start", }, From 0a1b5b4c66e787e75d4ee18065b1009ea0ca5a23 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 11 Nov 2022 18:45:13 +0800 Subject: [PATCH 29/31] fix: type of table data input --- apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx index f15508f1aa..ced281182b 100644 --- a/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx +++ b/apps/builder/src/widgetLibrary/TableWidget/panelConfig.tsx @@ -18,6 +18,7 @@ export const TABLE_PANEL_CONFIG: PanelConfig[] = [ attrName: "data", isSetterSingleRow: true, setterType: "TABLE_DATA_INPUT_SETTER", + expectedType: VALIDATION_TYPES.ARRAY, }, { id: `${baseWidgetName}-basic-emptyState`, From f76d317b098dd9c41a38a06653b683329ef7a9a6 Mon Sep 17 00:00:00 2001 From: xiaoyu Date: Fri, 11 Nov 2022 18:55:39 +0800 Subject: [PATCH 30/31] fix: always change height --- apps/builder/src/widgetLibrary/MenuWidget/menu.tsx | 2 +- apps/builder/src/widgetLibrary/MenuWidget/utils.tsx | 11 ----------- 2 files changed, 1 insertion(+), 12 deletions(-) delete mode 100644 apps/builder/src/widgetLibrary/MenuWidget/utils.tsx diff --git a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx index 68eea5b5fe..57ca0a8765 100644 --- a/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx +++ b/apps/builder/src/widgetLibrary/MenuWidget/menu.tsx @@ -122,7 +122,7 @@ export const MenuWidget: FC = (props) => { return () => { clearTimeout(timeoutId.current) } - }, [mode, updateHeight]) + }, [mode]) return (
diff --git a/apps/builder/src/widgetLibrary/MenuWidget/utils.tsx b/apps/builder/src/widgetLibrary/MenuWidget/utils.tsx deleted file mode 100644 index 8e96034fbf..0000000000 --- a/apps/builder/src/widgetLibrary/MenuWidget/utils.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { CellContext } from "@tanstack/table-core" -import { Link } from "@illa-design/link" - -const renderTableLink = (props: CellContext) => { - const cellValue = props.getValue() - return cellValue ? ( - {`${cellValue}`} - ) : ( - "-" - ) -} From c177f22e5841d4dc43a63d33f20830d49844e52f Mon Sep 17 00:00:00 2001 From: AruSeito Date: Fri, 11 Nov 2022 19:15:01 +0800 Subject: [PATCH 31/31] =?UTF-8?q?feat:=20=E2=9C=A8=20update=20403?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/builder/src/i18n/locale/en-US.json | 5 ++++- apps/builder/src/i18n/locale/zh-CN.json | 3 +++ apps/builder/src/page/status/403/index.tsx | 20 +++++++++++++++++++- apps/builder/src/router/routerConfig.tsx | 1 + 4 files changed, 27 insertions(+), 2 deletions(-) diff --git a/apps/builder/src/i18n/locale/en-US.json b/apps/builder/src/i18n/locale/en-US.json index 3dea468a48..832dbfb510 100644 --- a/apps/builder/src/i18n/locale/en-US.json +++ b/apps/builder/src/i18n/locale/en-US.json @@ -406,7 +406,7 @@ "placeholder": "Select a page" }, "select_view_setter": { - "placeholder": "" + "placeholder": "Select a view" }, "tabs_setter": { "tabs": "Tabs" @@ -749,6 +749,9 @@ }, "share": "Share", "status": { + "403": { + "des": "Access denied" + }, "404": { "again": "Refresh", "des": "It seems that the page you were looking for could not be found." diff --git a/apps/builder/src/i18n/locale/zh-CN.json b/apps/builder/src/i18n/locale/zh-CN.json index 5c1030bca1..3461476cb9 100644 --- a/apps/builder/src/i18n/locale/zh-CN.json +++ b/apps/builder/src/i18n/locale/zh-CN.json @@ -749,6 +749,9 @@ }, "share": "分享", "status": { + "403": { + "des": "访问被拒绝" + }, "404": { "again": "刷新", "des": "您访问的页面不存在" diff --git a/apps/builder/src/page/status/403/index.tsx b/apps/builder/src/page/status/403/index.tsx index b26b635834..8dcc6d3422 100644 --- a/apps/builder/src/page/status/403/index.tsx +++ b/apps/builder/src/page/status/403/index.tsx @@ -1,5 +1,23 @@ import { FC } from "react" +import { ErrorPage } from "@/page/status/errorPage" +import { Result403Icon } from "@illa-design/icon" +import { buttonStyle, iconStyle } from "@/page/status/style" +import { Button } from "@illa-design/button" +import { useNavigate } from "react-router-dom" +import { useTranslation } from "react-i18next" export const Page403: FC = () => { - return
403
+ const navigate = useNavigate() + const { t } = useTranslation() + return ( + } + > +
+ +
+ + ) } diff --git a/apps/builder/src/router/routerConfig.tsx b/apps/builder/src/router/routerConfig.tsx index fcdbf28ff0..a9562866f3 100644 --- a/apps/builder/src/router/routerConfig.tsx +++ b/apps/builder/src/router/routerConfig.tsx @@ -71,6 +71,7 @@ export const routerConfig: RoutesObjectPro[] = [ path: "/app/:appId", element: , needLogin: true, + errorElement: , }, { path: "/setting",