import { theme } from '@theatre/studio/css' ; import type { SequenceEditorTree_Row } from '@theatre/studio/panels/SequenceEditorPanel/layout/tree' ; import type { VoidFn } from '@theatre/shared/utils/types' ; import React from 'react' ; import { HiOutlineChevronRight } from 'react-icons/all' ; import styled from 'styled-components' ; import { propNameText } from '@theatre/studio/panels/DetailPanel/propEditors/utils/SingleRowPropEditor' ; export const Container = styled . li < { depth : number ; } > `
  --depth: ${ ( props ) => props . depth };
  margin: 0;
  padding: 0;
  list-style: none;
` ; export const BaseHeader = styled . div < { isEven : boolean ; } > `
  border-bottom: 1px solid #7695b705;
` ; const Header = styled ( BaseHeader ) < { isSelectable : boolean ; isSelected : boolean ; } > `
  padding-left: calc(16px + var(--depth) * 20px);

  display: flex;
  align-items: stretch;
  color: ${ theme . panel . body . compoudThing . label . color };

  box-sizing: border-box;

  ${ ( props ) => props . isSelected && `background: blue` };
` ; const Head_Label = styled . span `
  ${ propNameText };
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 4px;
  line-height: 26px;
  flex-wrap: nowrap;
` ; const Head_Icon = styled . span < { isOpen : boolean ; } > `
  width: 12px;
  margin-right: 8px;
  font-size: 9px;
  display: flex;
  align-items: center;

  transform: rotateZ(${ ( props ) => ( props . isOpen ? 90 : 0 ) }deg);
` ; const Children = styled . ul `
  margin: 0;
  padding: 0;
  list-style: none;
` ; const AnyCompositeRow = ( { leaf , label , children , isSelectable , isSelected , toggleSelect } ) => { const hasChildren = Array . isArray ( children ) && children . length > 0 ; return ( < Container depth = { leaf . depth } > < Header style = { { height : leaf . nodeHeight + 'px' , } } isSelectable = { isSelectable === true } isSelected = { isSelected === true } onClick = { toggleSelect } isEven = { leaf . n % 2 === 0 } > < Head_Icon isOpen = { true } > < HiOutlineChevronRight /> < /Head_Icon> < Head_Label > { label } < /Head_Label> < /Header> { hasChildren && < Children > { children } < /Children>} < /Container>); } ; export default AnyCompositeRow ;