Merge pull request #220 from toeverything/feat/block-pendant

Feat/block pendant

libs/components/editor-core/src/block-pendant/AddPendantPopover.tsx

@@ -4,7 +4,11 @@ import {
     Popover,
     type PopoverProps,
     PopperHandler,
+    Tag,
+    type PopperProps,
 } from '@toeverything/components/ui';
+import { TagsIcon } from '@toeverything/components/icons';
+
 import { CreatePendantPanel } from './pendant-operation-panel';
 import { IconButton } from './StyledComponent';
 import { AsyncBlock } from '../editor';
@@ -13,17 +17,21 @@ type Props = {
     block: AsyncBlock;
     onSure?: () => void;
     iconStyle?: CSSProperties;
+    useAddIcon?: boolean;
 } & Omit<PopoverProps, 'content'>;
 export const AddPendantPopover = ({
     block,
     onSure,
     iconStyle,
+    useAddIcon = true,
     ...popoverProps
 }: Props) => {
     const popoverHandlerRef = useRef<PopperHandler>();
+    const popperRef = useRef<any>();
     return (
         <Popover
-            ref={popoverHandlerRef}
+            popperHandlerRef={popoverHandlerRef}
+            popperRef={popperRef}
             content={
                 <CreatePendantPanel
                     block={block}
@@ -31,6 +39,9 @@ export const AddPendantPopover = ({
                         popoverHandlerRef.current?.setVisible(false);
                         onSure?.();
                     }}
+                    onTypeChange={() => {
+                        popperRef.current?.update?.();
+                    }}
                 />
             }
             placement="bottom-start"
@@ -38,9 +49,25 @@ export const AddPendantPopover = ({
             style={{ padding: 0 }}
             {...popoverProps}
         >
-            <IconButton style={{ marginRight: 12, ...iconStyle }}>
-                <Add sx={{ fontSize: 14 }} />
-            </IconButton>
+            {useAddIcon ? (
+                <IconButton style={{ marginRight: 12, ...iconStyle }}>
+                    <Add sx={{ fontSize: 14 }} />
+                </IconButton>
+            ) : (
+                <Tag
+                    style={{
+                        background: '#F5F7F8',
+                        color: '#98ACBD',
+                        marginRight: 12,
+                        marginBottom: 8,
+                    }}
+                    startElement={
+                        <TagsIcon style={{ fontSize: 14, marginRight: 4 }} />
+                    }
+                >
+                    Tag App
+                </Tag>
+            )}
         </Popover>
     );
 };

libs/components/editor-core/src/block-pendant/config.ts

@@ -98,8 +98,8 @@ export const pendantConfig: { [key: string]: PendantConfig } = {
     },
     [PendantTypes.Status]: {
         iconName: IconNames.STATUS,
-        background: ['#C5FBE0', '#FFF5AB', '#FFCECE', '#E3DEFF'],
-        color: ['#05683D', '#896406', '#AF1212', '#511AAB'],
+        background: ['#FFCECE', '#FFF5AB', '#C5FBE0', '#E3DEFF'],
+        color: ['#AF1212', '#896406', '#05683D', '#511AAB'],
     },
     [PendantTypes.Select]: {
         iconName: IconNames.SINGLE_SELECT,

libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx

@@ -91,7 +91,7 @@ export const PendantHistoryPanel = ({
                 return (
                     <Popover
                         key={item.id}
-                        ref={ref => {
+                        popperHandlerRef={ref => {
                             popoverHandlerRef.current[item.id] = ref;
                         }}
                         placement="bottom-start"

libs/components/editor-core/src/block-pendant/pendant-modify-panel/types.ts

@@ -11,6 +11,7 @@ export type ModifyPanelProps = {
     iconConfig?: PendantConfig;
     isStatusSelect?: boolean;
     property?: RecastMetaProperty;
+    onTypeChange?: (type: PendantTypes) => void;
 };
 
 export type ModifyPanelContentProps = {

libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx

@@ -24,9 +24,11 @@ import { useOnCreateSure } from './hooks';
 export const CreatePendantPanel = ({
     block,
     onSure,
+    onTypeChange,
 }: {
     block: AsyncBlock;
     onSure?: () => void;
+    onTypeChange?: (option: PendantOptions) => void;
 }) => {
     const [selectedOption, setSelectedOption] = useState<PendantOptions>();
     const [fieldName, setFieldName] = useState<string>('');
@@ -37,6 +39,10 @@ export const CreatePendantPanel = ({
             setFieldName(generateRandomFieldName(selectedOption.type));
     }, [selectedOption]);
 
+    useEffect(() => {
+        onTypeChange?.(selectedOption);
+    }, [selectedOption, onTypeChange]);
+
     return (
         <StyledPopoverWrapper>
             <StyledOperationTitle>Add Field</StyledOperationTitle>

libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx

@@ -17,7 +17,7 @@ export const PendantPopover = (
     const popoverHandlerRef = useRef<PopperHandler>();
     return (
         <Popover
-            ref={popoverHandlerRef}
+            popperHandlerRef={popoverHandlerRef}
             pointerEnterDelay={300}
             pointerLeaveDelay={200}
             placement="bottom-start"
@@ -26,13 +26,13 @@ export const PendantPopover = (
                     block={block}
                     endElement={
                         <AddPendantPopover
-                            container={popoverProps.container}
                             block={block}
                             onSure={() => {
                                 popoverHandlerRef.current?.setVisible(false);
                             }}
                             offset={[0, -30]}
                             trigger="click"
+                            useAddIcon={false}
                         />
                     }
                     onClose={() => {

libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx

@@ -56,7 +56,7 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => {
 
                 return (
                     <Popover
-                        ref={ref => {
+                        popperHandlerRef={ref => {
                             popoverHandlerRef.current[id] = ref;
                         }}
                         container={blockRenderContainerRef.current}
@@ -107,7 +107,7 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => {
                             iconStyle={{ marginTop: 4 }}
                             trigger="click"
                             // trigger={isKanbanView ? 'hover' : 'click'}
-                            container={blockRenderContainerRef.current}
+                            // container={blockRenderContainerRef.current}
                         />
                     </div>
                 </MuiFade>

libs/components/editor-core/src/block-pendant/utils.ts

@@ -88,7 +88,7 @@ export const generateInitialOptions = (
 ) => {
     if (type === PendantTypes.Status) {
         return [
-            generateBasicOption({ index: 0, iconConfig, name: 'No Started' }),
+            generateBasicOption({ index: 0, iconConfig, name: 'Not Started' }),
             generateBasicOption({
                 index: 1,
                 iconConfig,