import styled from '@emotion/styled' ; import React from 'react' ; import { TestComponentProps , TestRunner } from '../TestRunner' ; import { Tree } from '../utils/Tree' ; export const Test = ( { testIndex } ) => { return < Tree breadth = { 2 } depth = { 7 } id = { 0 } wrap = { 1 } box = { Box } / > ; } ; const StitchesTest = ( ) => { return < TestRunner numberOfRuns = { 3 } iterationN = { 50 } TestComponent = { Test } / > ; } ; export default StitchesTest ; const getColor = ( color ) => { switch ( color ) { case 0 : return '#14171A' ; case 1 : return '#AAB8C2' ; case 2 : return '#E6ECF0' ; case 3 : return '#FFAD1F' ; case 4 : return '#F45D22' ; case 5 : return '#E0245E' ; default : return 'transparent' ; } } ; const View = styled ( 'div' ) ( { alignItems : 'stretch' , borderWidth : '0' , borderStyle : 'solid' , boxSizing : 'border-box' , display : 'flex' , flexBasis : 'auto' , flexDirection : 'column' , flexShrink : 0 , margin : '0' , padding : '0' , position : 'relative' , minHeight : '0' , minWidth : '0' , } ) ; const Box = styled ( View ) ( ( props ) => ( { alignSelf : 'flex-start' , flexDirection : props . layout === 'column' ? ( 'column' as any ) : ( 'row' as any ) , padding : props . outer ? '4px' : '0' , ... ( props . fixed ? { height : '6px' , width : '6px' , } : { } ) , backgroundColor : getColor ( props . color ) , } ) ) ;