preview.tsx 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import React from 'react'
  2. import { createBehavior, createResource } from '@designable/core'
  3. import { DnFC } from '@designable/react'
  4. import { createVoidFieldSchema } from '../Field'
  5. import { AllSchemas } from '../../schemas'
  6. import { AllLocales } from '../../locales'
  7. import cls from 'classnames'
  8. import './styles.less'
  9. export interface IDesignableTextProps {
  10. value?: string
  11. content?: string
  12. mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
  13. style?: React.CSSProperties
  14. className?: string
  15. }
  16. export const Text: DnFC<IDesignableTextProps> = props => {
  17. const tagName = props.mode === 'normal' || !props.mode ? 'div' : props.mode
  18. return React.createElement(
  19. tagName,
  20. {
  21. ...props,
  22. className: cls(props.className, 'dn-text'),
  23. 'data-content-editable': 'x-component-props.content'
  24. },
  25. props.content
  26. )
  27. }
  28. Text.Behavior = createBehavior({
  29. name: 'Text',
  30. extends: ['Field'],
  31. selector: node => node.props['x-component'] === 'Text',
  32. designerProps: {
  33. propsSchema: createVoidFieldSchema(AllSchemas.Text)
  34. },
  35. designerLocales: AllLocales.Text
  36. })
  37. Text.Resource = createResource({
  38. icon: 'TextSource',
  39. elements: [
  40. {
  41. componentName: 'Field',
  42. props: {
  43. type: 'string',
  44. 'x-component': 'Text'
  45. }
  46. }
  47. ]
  48. })