Rename InlineCell to RecordInlineCell (#2377)

rename inline cell
This commit is contained in:
bosiraphael
2023-11-06 17:18:25 +01:00
committed by GitHub
parent 3432615a17
commit 88ca846f83
12 changed files with 46 additions and 44 deletions

View File

@ -12,9 +12,9 @@ import { FieldInputEvent } from '../../field/types/FieldInputEvent';
import { isFieldRelation } from '../../field/types/guards/isFieldRelation';
import { useInlineCell } from '../hooks/useInlineCell';
import { InlineCellContainer } from './InlineCellContainer';
import { RecordInlineCellContainer } from './RecordInlineCellContainer';
export const InlineCell = () => {
export const RecordInlineCell = () => {
const { fieldDefinition } = useContext(FieldContext);
const buttonIcon = useGetButtonIcon();
@ -59,7 +59,7 @@ export const InlineCell = () => {
};
return (
<InlineCellContainer
<RecordInlineCellContainer
buttonIcon={buttonIcon}
customEditHotkeyScope={
isFieldRelation(fieldDefinition)

View File

@ -8,9 +8,9 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useInlineCell } from '../hooks/useInlineCell';
import { InlineCellDisplayMode } from './InlineCellDisplayMode';
import { InlineCellButton } from './InlineCellEditButton';
import { InlineCellEditMode } from './InlineCellEditMode';
import { RecordInlineCellDisplayMode } from './RecordInlineCellDisplayMode';
import { RecordInlineCellButton } from './RecordInlineCellEditButton';
import { RecordInlineCellEditMode } from './RecordInlineCellEditMode';
const StyledIconContainer = styled.div`
align-items: center;
@ -40,7 +40,7 @@ const StyledValueContainer = styled.div`
`;
const StyledLabel = styled.div<
Pick<InlineCellContainerProps, 'labelFixedWidth'>
Pick<RecordInlineCellContainerProps, 'labelFixedWidth'>
>`
align-items: center;
@ -74,7 +74,7 @@ const StyledInlineCellBaseContainer = styled.div`
width: 100%;
`;
type InlineCellContainerProps = {
type RecordInlineCellContainerProps = {
IconLabel?: IconComponent;
label?: string;
labelFixedWidth?: number;
@ -88,7 +88,7 @@ type InlineCellContainerProps = {
disableHoverEffect?: boolean;
};
export const InlineCellContainer = ({
export const RecordInlineCellContainer = ({
IconLabel,
label,
labelFixedWidth,
@ -100,7 +100,7 @@ export const InlineCellContainer = ({
editModeContentOnly,
isDisplayModeFixHeight,
disableHoverEffect,
}: InlineCellContainerProps) => {
}: RecordInlineCellContainerProps) => {
const [isHovered, setIsHovered] = useState(false);
const handleContainerMouseEnter = () => {
@ -141,28 +141,28 @@ export const InlineCellContainer = ({
</StyledLabelAndIconContainer>
<StyledValueContainer>
{isInlineCellInEditMode ? (
<InlineCellEditMode>{editModeContent}</InlineCellEditMode>
<RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>
) : editModeContentOnly ? (
<StyledClickableContainer>
<InlineCellDisplayMode
<RecordInlineCellDisplayMode
disableHoverEffect={disableHoverEffect}
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isHovered}
>
{editModeContent}
</InlineCellDisplayMode>
</RecordInlineCellDisplayMode>
</StyledClickableContainer>
) : (
<StyledClickableContainer onClick={handleDisplayModeClick}>
<InlineCellDisplayMode
<RecordInlineCellDisplayMode
disableHoverEffect={disableHoverEffect}
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isHovered}
>
{displayModeContent}
</InlineCellDisplayMode>
</RecordInlineCellDisplayMode>
{showEditButton && (
<StyledEditButtonContainer
initial={{ opacity: 0 }}
@ -170,7 +170,7 @@ export const InlineCellContainer = ({
transition={{ duration: 0.1 }}
whileHover={{ scale: 1.04 }}
>
<InlineCellButton Icon={buttonIcon} />
<RecordInlineCellButton Icon={buttonIcon} />
</StyledEditButtonContainer>
)}
</StyledClickableContainer>

View File

@ -1,9 +1,9 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
const StyledInlineCellNormalModeOuterContainer = styled.div<
const StyledRecordInlineCellNormalModeOuterContainer = styled.div<
Pick<
InlineCellDisplayModeProps,
RecordInlineCellDisplayModeProps,
| 'isDisplayModeContentEmpty'
| 'disableHoverEffect'
| 'isDisplayModeFixHeight'
@ -32,7 +32,7 @@ const StyledInlineCellNormalModeOuterContainer = styled.div<
}}
`;
const StyledInlineCellNormalModeInnerContainer = styled.div`
const StyledRecordInlineCellNormalModeInnerContainer = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.primary};
font-size: 'inherit';
@ -50,32 +50,32 @@ const StyledEmptyField = styled.div`
color: ${({ theme }) => theme.font.color.light};
`;
type InlineCellDisplayModeProps = {
type RecordInlineCellDisplayModeProps = {
isDisplayModeContentEmpty?: boolean;
disableHoverEffect?: boolean;
isDisplayModeFixHeight?: boolean;
isHovered?: boolean;
};
export const InlineCellDisplayMode = ({
export const RecordInlineCellDisplayMode = ({
children,
isDisplayModeContentEmpty,
disableHoverEffect,
isDisplayModeFixHeight,
isHovered,
}: React.PropsWithChildren<InlineCellDisplayModeProps>) => (
<StyledInlineCellNormalModeOuterContainer
}: React.PropsWithChildren<RecordInlineCellDisplayModeProps>) => (
<StyledRecordInlineCellNormalModeOuterContainer
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
disableHoverEffect={disableHoverEffect}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isHovered}
>
<StyledInlineCellNormalModeInnerContainer>
<StyledRecordInlineCellNormalModeInnerContainer>
{isDisplayModeContentEmpty || !children ? (
<StyledEmptyField>{'Empty'}</StyledEmptyField>
) : (
children
)}
</StyledInlineCellNormalModeInnerContainer>
</StyledInlineCellNormalModeOuterContainer>
</StyledRecordInlineCellNormalModeInnerContainer>
</StyledRecordInlineCellNormalModeOuterContainer>
);

View File

@ -3,7 +3,7 @@ import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconBut
import { useInlineCell } from '../hooks/useInlineCell';
export const InlineCellButton = ({ Icon }: { Icon: IconComponent }) => {
export const RecordInlineCellButton = ({ Icon }: { Icon: IconComponent }) => {
const { openInlineCell } = useInlineCell();
const handleClick = () => {

View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
const StyledInlineCellEditModeContainer = styled.div<InlineCellEditModeProps>`
const StyledInlineCellEditModeContainer = styled.div<RecordInlineCellEditModeProps>`
align-items: center;
display: flex;
@ -22,11 +22,13 @@ const StyledInlineCellInput = styled.div`
z-index: 10;
`;
type InlineCellEditModeProps = {
type RecordInlineCellEditModeProps = {
children: React.ReactNode;
};
export const InlineCellEditMode = ({ children }: InlineCellEditModeProps) => (
export const RecordInlineCellEditMode = ({
children,
}: RecordInlineCellEditModeProps) => (
<StyledInlineCellEditModeContainer data-testid="inline-cell-edit-mode-container">
<StyledInlineCellInput>{children}</StyledInlineCellInput>
</StyledInlineCellEditModeContainer>