toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-18 18:42:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: update help info of pendant field title

Browse Source
This commit is contained in:
QiShaoXuan 2022-08-11 21:27:57 +08:00
parent 5e3f914182
commit 76fa003189
4 changed files with 31 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
libs/components/editor-core/src/block-pendant/PendantTag.tsx
View File

@ -1,9 +1,4 @@
import React, {
FC,
FunctionComponent,
PropsWithChildren,
CSSProperties,
} from 'react';
import React from 'react';
import { Tag, type TagProps } from '@toeverything/components/ui';
import {
DateValue,

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

@ -1,12 +1,5 @@
import React, { useState, useEffect } from 'react';
import {
Input,
message,
Option,
Select,
Tooltip,
} from '@toeverything/components/ui';
import { HelpCenterIcon } from '@toeverything/components/icons';
import { message, Option, Select } from '@toeverything/components/ui';
import { AsyncBlock } from '../../editor';
import { IconMap, pendantOptions } from '../config';
@ -14,7 +7,6 @@ import { PendantOptions } from '../types';
import { PendantModifyPanel } from '../pendant-modify-panel';
import {
StyledDivider,
StyledInputEndAdornment,
StyledOperationLabel,
StyledOperationTitle,
StyledPopoverSubTitle,
@ -26,6 +18,7 @@ import {
getPendantConfigByType,
checkPendantForm,
} from '../utils';
import { FieldTitleInput } from './FieldTitleInput';
import { useOnCreateSure } from './hooks';
export const CreatePendantPanel = ({
@ -74,19 +67,11 @@ export const CreatePendantPanel = ({
})}
</Select>
<StyledOperationLabel>Field Title</StyledOperationLabel>
<Input
<FieldTitleInput
value={fieldName}
placeholder="Input your field name here"
onChange={e => {
setFieldName(e.target.value);
}}
endAdornment={
<Tooltip content="Help info here" placement="top">
<StyledInputEndAdornment>
<HelpCenterIcon />
</StyledInputEndAdornment>
</Tooltip>
}
/>
{selectedOption ? (
<>

24
libs/components/editor-core/src/block-pendant/pendant-operation-panel/FieldTitleInput.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import { Input, Tooltip, InputProps } from '@toeverything/components/ui';
import { StyledInputEndAdornment } from '../StyledComponent';
import { HelpCenterIcon } from '@toeverything/components/icons';
export const FieldTitleInput = (props: InputProps) => {
return (
<Input
placeholder="Input your field name here"
endAdornment={
<Tooltip
offset={[15, -5]}
content="Name your tag of the current series"
placement="top"
>
<StyledInputEndAdornment>
<HelpCenterIcon />
</StyledInputEndAdornment>
</Tooltip>
}
{...props}
/>
);
};

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

@ -1,6 +1,5 @@
import { useState } from 'react';
import { Input, message, Tooltip } from '@toeverything/components/ui';
import { HelpCenterIcon } from '@toeverything/components/icons';
import { message } from '@toeverything/components/ui';
import { PendantModifyPanel } from '../pendant-modify-panel';
import type { AsyncBlock } from '../../editor';
import {
@ -12,13 +11,12 @@ import { checkPendantForm, getPendantConfigByType } from '../utils';
import {
StyledPopoverWrapper,
StyledOperationLabel,
StyledInputEndAdornment,
StyledDivider,
StyledPopoverContent,
StyledPopoverSubTitle,
} from '../StyledComponent';
import { IconMap, pendantOptions } from '../config';
import { FieldTitleInput } from './FieldTitleInput';
import { useOnUpdateSure } from './hooks';
type Props = {
@ -63,19 +61,11 @@ export const UpdatePendantPanel = ({
</StyledPopoverContent>
<StyledOperationLabel>Field Title</StyledOperationLabel>
{titleEditable ? (
<Input
<FieldTitleInput
value={fieldName}
placeholder="Input your field name here"
onChange={e => {
setFieldName(e.target.value);
}}
endAdornment={
<Tooltip content="Help info here" placement="top">
<StyledInputEndAdornment>
<HelpCenterIcon />
</StyledInputEndAdornment>
</Tooltip>
}
/>
) : (
<StyledPopoverContent>{property.name}</StyledPopoverContent>