FolderCard: Restructure component files

This commit is contained in:
Gustav Hansen 2022-03-24 17:31:44 +01:00 committed by Pierre Noël
parent 0d69739fe4
commit c8ca3f49e2
13 changed files with 17 additions and 16 deletions

View File

@ -7,8 +7,8 @@ import { Box } from '@strapi/design-system/Box';
import { Stack } from '@strapi/design-system/Stack';
import Folder from '@strapi/icons/Folder';
import { FolderCardContext } from './FolderCardContext';
import useId from './utils/useId';
import { FolderCardContext } from '../contexts/FolderCard';
import useId from '../hooks/useId';
const FauxClickWrapper = styled.button`
height: 100%;
@ -31,7 +31,7 @@ const StyledFolder = styled(Folder)`
`;
export const FolderCard = ({ children, id, startAction, ariaLabel, onDoubleClick, ...props }) => {
const generatedId = useId(id);
const generatedId = useId('folder', id);
return (
<FolderCardContext.Provider value={{ id: generatedId }}>

View File

@ -0,0 +1 @@
export * from './FolderCard';

View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
import { Flex } from '@strapi/design-system/Flex';
import { useFolderCard } from './FolderCardContext';
import { useFolderCard } from '../contexts/FolderCard';
const StyledBox = styled(Flex)`
user-select: none;

View File

@ -0,0 +1 @@
export * from './FolderCardBody';

View File

@ -1,7 +1,7 @@
import React from 'react';
import { Box } from '@strapi/design-system/Box';
import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
import { useFolderCard } from './FolderCardContext';
import { useFolderCard } from '../contexts/FolderCard';
export const FolderCardCheckbox = props => {
const { id } = useFolderCard();

View File

@ -0,0 +1 @@
export * from './FolderCardCheckbox';

View File

@ -1,6 +1,6 @@
import { createContext, useContext } from 'react';
export const FolderCardContext = createContext();
export const FolderCardContext = createContext({});
export function useFolderCard() {
return useContext(FolderCardContext);

View File

@ -4,8 +4,8 @@ let id = 0;
const genId = () => ++id;
const useId = (prefix, initialId) => {
const idRef = useRef(initialId || `${prefix}-${genId()}`);
const useId = initialId => {
const idRef = useRef(`${initialId}-${genId()}`);
return idRef.current;
};

View File

@ -1,4 +1,5 @@
export { FolderCard } from './FolderCard';
export { FolderCardBody } from './FolderCardBody';
export { FolderCardCheckbox } from './FolderCardCheckbox';
export { FolderCardLink } from './FolderCardLink';
export { FolderCardLink } from './styled';

View File

@ -9,7 +9,7 @@ import { FolderCard } from '../FolderCard';
import { FolderCardBody } from '../FolderCardBody';
import { FolderCardCheckbox } from '../FolderCardCheckbox';
const ID_FIXTURE = 'folder-1';
const ID_FIXTURE = 'folder';
// eslint-disable-next-line react/prop-types
const ComponentFixture = props => {
@ -18,7 +18,6 @@ const ComponentFixture = props => {
<FolderCard
id={ID_FIXTURE}
ariaLabel="Folder 1"
href="/"
startAction={<></>}
onDoubleClick={() => {}}
{...props}

View File

@ -194,7 +194,6 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
<div>
<div
class="c0"
href="/"
>
<button
aria-hidden="true"
@ -212,7 +211,7 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
class="c5"
>
<input
aria-labelledby="folder-1-3-title"
aria-labelledby="folder-3-title"
class="c6"
type="checkbox"
/>
@ -236,7 +235,7 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
</div>
<h2
class="c9 c10 c11"
id="folder-1-3-title"
id="folder-3-title"
>
<a
class="c12"
@ -403,7 +402,6 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
<div>
<div
class="c0"
href="/"
>
<button
aria-hidden="true"
@ -436,7 +434,7 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
</div>
<h2
class="c7 c8 c9"
id="folder-1-1-title"
id="folder-1-title"
>
<a
class="c10"