toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-19 22:31:41 +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, { import React from 'react';
FC,
FunctionComponent,
PropsWithChildren,
CSSProperties,
} from 'react';
import { Tag, type TagProps } from '@toeverything/components/ui'; import { Tag, type TagProps } from '@toeverything/components/ui';
import { import {
DateValue, 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 React, { useState, useEffect } from 'react';
import { import { message, Option, Select } from '@toeverything/components/ui';
Input,
message,
Option,
Select,
Tooltip,
} from '@toeverything/components/ui';
import { HelpCenterIcon } from '@toeverything/components/icons';
import { AsyncBlock } from '../../editor'; import { AsyncBlock } from '../../editor';
import { IconMap, pendantOptions } from '../config'; import { IconMap, pendantOptions } from '../config';
@ -14,7 +7,6 @@ import { PendantOptions } from '../types';
import { PendantModifyPanel } from '../pendant-modify-panel'; import { PendantModifyPanel } from '../pendant-modify-panel';
import { import {
StyledDivider, StyledDivider,
StyledInputEndAdornment,
StyledOperationLabel, StyledOperationLabel,
StyledOperationTitle, StyledOperationTitle,
StyledPopoverSubTitle, StyledPopoverSubTitle,
@ -26,6 +18,7 @@ import {
getPendantConfigByType, getPendantConfigByType,
checkPendantForm, checkPendantForm,
} from '../utils'; } from '../utils';
import { FieldTitleInput } from './FieldTitleInput';
import { useOnCreateSure } from './hooks'; import { useOnCreateSure } from './hooks';
export const CreatePendantPanel = ({ export const CreatePendantPanel = ({
@ -74,19 +67,11 @@ export const CreatePendantPanel = ({
})} })}
</Select> </Select>
<StyledOperationLabel>Field Title</StyledOperationLabel> <StyledOperationLabel>Field Title</StyledOperationLabel>
<Input <FieldTitleInput
value={fieldName} value={fieldName}
placeholder="Input your field name here"
onChange={e => { onChange={e => {
setFieldName(e.target.value); setFieldName(e.target.value);
}} }}
endAdornment={
<Tooltip content="Help info here" placement="top">
<StyledInputEndAdornment>
<HelpCenterIcon />
</StyledInputEndAdornment>
</Tooltip>
}
/> />
{selectedOption ? ( {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 { useState } from 'react';
import { Input, message, Tooltip } from '@toeverything/components/ui'; import { message } from '@toeverything/components/ui';
import { HelpCenterIcon } from '@toeverything/components/icons';
import { PendantModifyPanel } from '../pendant-modify-panel'; import { PendantModifyPanel } from '../pendant-modify-panel';
import type { AsyncBlock } from '../../editor'; import type { AsyncBlock } from '../../editor';
import { import {
@ -12,13 +11,12 @@ import { checkPendantForm, getPendantConfigByType } from '../utils';
import { import {
StyledPopoverWrapper, StyledPopoverWrapper,
StyledOperationLabel, StyledOperationLabel,
StyledInputEndAdornment,
StyledDivider, StyledDivider,
StyledPopoverContent, StyledPopoverContent,
StyledPopoverSubTitle, StyledPopoverSubTitle,
} from '../StyledComponent'; } from '../StyledComponent';
import { IconMap, pendantOptions } from '../config'; import { IconMap, pendantOptions } from '../config';
import { FieldTitleInput } from './FieldTitleInput';
import { useOnUpdateSure } from './hooks'; import { useOnUpdateSure } from './hooks';
type Props = { type Props = {
@ -63,19 +61,11 @@ export const UpdatePendantPanel = ({
</StyledPopoverContent> </StyledPopoverContent>
<StyledOperationLabel>Field Title</StyledOperationLabel> <StyledOperationLabel>Field Title</StyledOperationLabel>
{titleEditable ? ( {titleEditable ? (
<Input <FieldTitleInput
value={fieldName} value={fieldName}
placeholder="Input your field name here"
onChange={e => { onChange={e => {
setFieldName(e.target.value); setFieldName(e.target.value);
}} }}
endAdornment={
<Tooltip content="Help info here" placement="top">
<StyledInputEndAdornment>
<HelpCenterIcon />
</StyledInputEndAdornment>
</Tooltip>
}
/> />
) : ( ) : (
<StyledPopoverContent>{property.name}</StyledPopoverContent> <StyledPopoverContent>{property.name}</StyledPopoverContent>