Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: support editing title when editing tag, resolved #538

Browse Source
This commit is contained in:
qishaoxuan
2022-07-26 18:18:11 +08:00
parent cb7400b091
commit c6cad6a911
3 changed files with 70 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -69,6 +69,7 @@ export const PendantHistoryPanel = ({
item.id
].setVisible(false);
}}
titleEditable={false}
/>
)
}

33
libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import { useState } from 'react';
import { PendantModifyPanel } from '../pendant-modify-panel';
import type { AsyncBlock } from '../../editor';
import {
@@ -29,6 +29,8 @@ import {
StyledPopoverSubTitle,
} from '../StyledComponent';
import { IconMap, pendantOptions } from '../config';
import { Input, Tooltip } from '@toeverything/components/ui';
import { HelpCenterIcon } from '@toeverything/components/icons';
type SelectPropertyType = MultiSelectProperty | SelectProperty;
@@ -39,6 +41,7 @@ type Props = {
hasDelete?: boolean;
onSure?: () => void;
onCancel?: () => void;
titleEditable?: boolean;
};
export const UpdatePendantPanel = ({
@@ -48,6 +51,7 @@ export const UpdatePendantPanel = ({
hasDelete = false,
onSure,
onCancel,
titleEditable = false,
}: Props) => {
const { updateSelect } = useSelectProperty();
const { setPendant, removePendant } = usePendant(block);
@@ -55,6 +59,7 @@ export const UpdatePendantPanel = ({
const iconConfig = getPendantConfigByType(property.type);
const Icon = IconMap[iconConfig.iconName];
const { updateProperty } = useRecastBlockMeta();
const [fieldTitle, setFieldTitle] = useState(property.name);
return (
<StyledPopoverWrapper>
@@ -70,7 +75,25 @@ export const UpdatePendantPanel = ({
{property.type}
</StyledPopoverContent>
<StyledOperationLabel>Field Title</StyledOperationLabel>
<StyledPopoverContent>{property.name}</StyledPopoverContent>
{titleEditable ? (
<Input
value={fieldTitle}
placeholder="Input your field name here"
onChange={e => {
setFieldTitle(e.target.value);
}}
endAdornment={
<Tooltip content="Help info here">
<StyledInputEndAdornment>
<HelpCenterIcon />
</StyledInputEndAdornment>
</Tooltip>
}
/>
) : (
<StyledPopoverContent>{property.name}</StyledPopoverContent>
)}
<StyledDivider />
{pendantOption.subTitle && (
<StyledPopoverSubTitle>
@@ -190,6 +213,12 @@ export const UpdatePendantPanel = ({
await setPendant(property, newValue);
}
if (fieldTitle !== property.name) {
await updateProperty({
...property,
name: fieldTitle,
});
}
onSure?.();
}}
onDelete={

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

@@ -1,5 +1,5 @@
import React, {useRef, useState} from 'react';
import {AsyncBlock} from '../../editor';
import React, { useRef, useState } from 'react';
import { AsyncBlock } from '../../editor';
import {
getRecastItemValue,
RecastBlockValue,
@@ -12,38 +12,22 @@ import {
PopperHandler,
styled,
} from '@toeverything/components/ui';
import {PendantTag} from '../PendantTag';
import {
UpdatePendantPanel
} from '../pendant-operation-panel';
import {AddPendantPopover} from '../AddPendantPopover';
import { PendantTag } from '../PendantTag';
import { UpdatePendantPanel } from '../pendant-operation-panel';
import { AddPendantPopover } from '../AddPendantPopover';
export const PendantRender = ({block}: { block: AsyncBlock }) => {
const [propertyWithValue, setPropertyWithValue] = useState<{
value: RecastBlockValue;
property: RecastMetaProperty;
}>();
export const PendantRender = ({ block }: { block: AsyncBlock }) => {
const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({});
const blockRenderContainerRef = useRef<HTMLDivElement>(null);
const [showAddBtn, setShowAddBtn] = useState(false);
const {getProperties} = useRecastBlockMeta();
const { getProperties } = useRecastBlockMeta();
const {
getValue,
removeValue
} = getRecastItemValue(block);
const { getValue, removeValue } = getRecastItemValue(block);
const properties = getProperties();
const propertyWithValues = properties
.map(property => {
return {
value: getValue(property.id),
property,
};
})
.filter(v => v.value);
const hasAddBtn = properties.some(property => getValue(property.id));
return (
<BlockPendantContainer
@@ -55,13 +39,14 @@ export const PendantRender = ({block}: { block: AsyncBlock }) => {
setShowAddBtn(false);
}}
>
{propertyWithValues.map(pWithV => {
const {id, type} = pWithV.value;
{properties.map(property => {
const value = getValue(property.id);
/* （暂时关闭，HOOK中需要加入Scene的判断）Remove duplicate label(tag) */
// if (groupBy?.id === id) {
// return null;
// }
if (!value) {
return null;
}
const { id } = value;
return (
<Popover
@@ -73,24 +58,23 @@ export const PendantRender = ({block}: { block: AsyncBlock }) => {
trigger="click"
placement="bottom-start"
content={
propertyWithValue && (
<UpdatePendantPanel
block={block}
value={propertyWithValue.value}
property={propertyWithValue.property}
hasDelete={false}
onSure={() => {
popoverHandlerRef.current[
id
].setVisible(false);
}}
onCancel={() => {
popoverHandlerRef.current[
id
].setVisible(false);
}}
/>
)
<UpdatePendantPanel
block={block}
value={value}
property={property}
hasDelete={false}
onSure={() => {
popoverHandlerRef.current[id].setVisible(
false
);
}}
onCancel={() => {
popoverHandlerRef.current[id].setVisible(
false
);
}}
titleEditable={true}
/>
}
>
<PendantTag
@@ -99,25 +83,22 @@ export const PendantRender = ({block}: { block: AsyncBlock }) => {
marginRight: 10,
marginTop: 4,
}}
onClick={e => {
setPropertyWithValue(pWithV);
}}
value={pWithV.value}
property={pWithV.property}
value={value}
property={property}
closeable
onClose={async () => {
await removeValue(pWithV.property.id);
await removeValue(property.id);
}}
/>
</Popover>
);
})}
{propertyWithValues.length ? (
{hasAddBtn ? (
<MuiZoom in={showAddBtn}>
<div>
<AddPendantPopover
block={block}
iconStyle={{marginTop: 4}}
iconStyle={{ marginTop: 4 }}
container={blockRenderContainerRef.current}
/>
</div>