mirror of
https://github.com/strapi/strapi.git
synced 2025-08-01 05:17:14 +00:00
FolderCard: Restructure component files
This commit is contained in:
parent
0d69739fe4
commit
c8ca3f49e2
@ -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 }}>
|
@ -0,0 +1 @@
|
||||
export * from './FolderCard';
|
@ -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;
|
@ -0,0 +1 @@
|
||||
export * from './FolderCardBody';
|
@ -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();
|
@ -0,0 +1 @@
|
||||
export * from './FolderCardCheckbox';
|
@ -1,6 +1,6 @@
|
||||
import { createContext, useContext } from 'react';
|
||||
|
||||
export const FolderCardContext = createContext();
|
||||
export const FolderCardContext = createContext({});
|
||||
|
||||
export function useFolderCard() {
|
||||
return useContext(FolderCardContext);
|
@ -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;
|
||||
};
|
@ -1,4 +1,5 @@
|
||||
export { FolderCard } from './FolderCard';
|
||||
export { FolderCardBody } from './FolderCardBody';
|
||||
export { FolderCardCheckbox } from './FolderCardCheckbox';
|
||||
export { FolderCardLink } from './FolderCardLink';
|
||||
|
||||
export { FolderCardLink } from './styled';
|
||||
|
@ -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}
|
||||
|
@ -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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user