import DemoContainer from '../demo-container' ; import { Element , ElementCapability , ElementState } from './index' ; import * as React from 'react' ; import { PlaceholderPosition , ElementLabel } from './element' ; import { EditableTitle , EditableTitleState } from '../editable-title' ; const CHILD = ( < Element id = "1" contentId = "1" state = { ElementState . Default } capabilities = { [ ElementCapability . Editable ] } open = { false } placeholder = { true } title = "Child Element" dragging = { false } / > ) ; const ElementDemo = ( ) : JSX . Element => ( < DemoContainer title = "Element" > < > Default < Element id = "1" contentId = "1" state = { ElementState . Default } capabilities = { [ ElementCapability . Editable ] } open = { false } placeholder = { true } title = "Element" dragging = { false } > < Element . ElementTitle > < ElementLabel > < EditableTitle name = "Element" state = { EditableTitleState . Editable } value = "Element" / > < /ElementLabel> < /Element.ElementTitle> < /Element> < /> < > Active < Element id = "2" contentId = "2" capabilities = { [ ElementCapability . Editable ] } open = { false } placeholder = { true } state = { ElementState . Active } title = "Element" dragging = { false } > < Element . ElementTitle > < ElementLabel > < EditableTitle name = "Element" state = { EditableTitleState . Editable } value = "Element" / > < /ElementLabel> < /Element.ElementTitle> < /Element> < /> < > Highlighted < Element id = "2" contentId = "2" capabilities = { [ ElementCapability . Editable ] } open = { false } placeholder = { true } state = { ElementState . Highlighted } title = "Element" dragging = { false } > < Element . ElementTitle > < ElementLabel > < EditableTitle name = "Element" state = { EditableTitleState . Editable } value = "Element" / > < /ElementLabel> < /Element.ElementTitle> < /Element> < /> < > Placeholder Highlighted < Element id = "2" contentId = "2" capabilities = { [ ElementCapability . Editable ] } open = { false } placeholder = { true } placeholderHighlighted = { PlaceholderPosition . Before } state = { ElementState . Default } title = "Element" dragging = { true } > < Element . ElementTitle > < ElementLabel > < EditableTitle name = "Element" state = { EditableTitleState . Editable } value = "Element" / > < /ElementLabel> < /Element.ElementTitle> < /Element> < /> < > Placeholder Highlighted after < Element id = "2" contentId = "2" capabilities = { [ ElementCapability . Editable ] } open = { false } placeholder = { true } placeholderHighlighted = { PlaceholderPosition . After } state = { ElementState . Default } title = "Element" dragging = { true } > < Element . ElementTitle > < ElementLabel > < EditableTitle name = "Element" state = { EditableTitleState . Editable } value = "Element" / > < /ElementLabel> < /Element.ElementTitle> < /Element> < /> < > Editable < Element id = "2" contentId = "2" capabilities = { [ ElementCapability . Editable ] } open = { false } placeholder = { true } state = { ElementState . Editable } title = "Element" dragging = { false } > < Element . ElementTitle > < ElementLabel > < EditableTitle name = "Element" state = { EditableTitleState . Editing } value = "Element" / > < /ElementLabel> < /Element.ElementTitle> < /Element> < /> < > May open , closed < Element id = "3" contentId = "3" capabilities = { [ ElementCapability . Editable , ElementCapability . Openable ] } open = { false } placeholder = { true } title = "Element" state = { ElementState . Default } dragging = { false } > < Element . ElementTitle > < ElementLabel > < EditableTitle name = "Element" state = { EditableTitleState . Editable } value = "Element" / > < /ElementLabel> < /Element.ElementTitle> { CHILD } < /Element> < /> < > May open , opened < Element id = "3" contentId = "3" capabilities = { [ ElementCapability . Editable , ElementCapability . Openable ] } open placeholder = { true } title = "Element" state = { ElementState . Default } dragging = { false } > < Element . ElementTitle > < ElementLabel > < EditableTitle name = "Element" state = { EditableTitleState . Editable } value = "Element" / > < /ElementLabel> < /Element.ElementTitle> { CHILD } < /Element> < /> < > With child , active and open < Element id = "4" contentId = "4" capabilities = { [ ElementCapability . Editable , ElementCapability . Openable ] } open placeholder = { true } title = "Element" state = { ElementState . Active } dragging = { false } > < Element . ElementTitle > < ElementLabel > < EditableTitle name = "Element" state = { EditableTitleState . Editable } value = "Element" / > < /ElementLabel> < /Element.ElementTitle> { CHILD } < /Element> < /> < /DemoContainer>); export default ElementDemo ;