You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

DraftEditorNode.react.js.flow 3.2 KiB

пре 3 година
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @format
  8. * @flow
  9. * @emails oncall+draft_js
  10. *
  11. * This is unstable and not part of the public API and should not be used by
  12. * production systems. This file may be update/removed without notice.
  13. */
  14. 'use strict';
  15. import type { BlockNodeRecord } from "./BlockNodeRecord";
  16. import type ContentState from "./ContentState";
  17. import type { DraftDecoratorType } from "./DraftDecoratorType";
  18. import type SelectionState from "./SelectionState";
  19. import type { BidiDirection } from "fbjs/lib/UnicodeBidiDirection";
  20. const DraftEditorDecoratedLeaves = require("./DraftEditorDecoratedLeaves.react");
  21. const DraftEditorLeaf = require("./DraftEditorLeaf.react");
  22. const DraftOffsetKey = require("./DraftOffsetKey");
  23. const Immutable = require("immutable");
  24. const React = require("react");
  25. const cx = require("fbjs/lib/cx");
  26. const {
  27. List
  28. } = Immutable;
  29. type Props = {
  30. block: BlockNodeRecord,
  31. children: ?Array<React.Node>,
  32. contentState: ContentState,
  33. customStyleFn: Function,
  34. customStyleMap: Object,
  35. decorator: ?DraftDecoratorType,
  36. direction: BidiDirection,
  37. forceSelection: boolean,
  38. hasSelection: boolean,
  39. selection: SelectionState,
  40. tree: List<any>,
  41. ...
  42. };
  43. class DraftEditorNode extends React.Component<Props> {
  44. render(): React.Node {
  45. const {
  46. block,
  47. contentState,
  48. customStyleFn,
  49. customStyleMap,
  50. decorator,
  51. direction,
  52. forceSelection,
  53. hasSelection,
  54. selection,
  55. tree
  56. } = this.props;
  57. const blockKey = block.getKey();
  58. const text = block.getText();
  59. const lastLeafSet = tree.size - 1;
  60. const children = this.props.children || tree.map((leafSet, ii) => {
  61. const decoratorKey = leafSet.get('decoratorKey');
  62. const leavesForLeafSet = leafSet.get('leaves');
  63. const lastLeaf = leavesForLeafSet.size - 1;
  64. const Leaves = leavesForLeafSet.map((leaf, jj) => {
  65. const offsetKey = DraftOffsetKey.encode(blockKey, ii, jj);
  66. const start = leaf.get('start');
  67. const end = leaf.get('end');
  68. return <DraftEditorLeaf key={offsetKey} offsetKey={offsetKey} block={block} start={start} selection={hasSelection ? selection : null} forceSelection={forceSelection} text={text.slice(start, end)} styleSet={block.getInlineStyleAt(start)} customStyleMap={customStyleMap} customStyleFn={customStyleFn} isLast={decoratorKey === lastLeafSet && jj === lastLeaf} />;
  69. }).toArray();
  70. if (!decoratorKey || !decorator) {
  71. return Leaves;
  72. }
  73. return <DraftEditorDecoratedLeaves block={block} children={Leaves} contentState={contentState} decorator={decorator} decoratorKey={decoratorKey} direction={direction} leafSet={leafSet} text={text} key={ii} />;
  74. }).toArray();
  75. return <div data-offset-key={DraftOffsetKey.encode(blockKey, 0, 0)} className={cx({
  76. 'public/DraftStyleDefault/block': true,
  77. 'public/DraftStyleDefault/ltr': direction === 'LTR',
  78. 'public/DraftStyleDefault/rtl': direction === 'RTL'
  79. })}>
  80. {children}
  81. </div>;
  82. }
  83. }
  84. module.exports = DraftEditorNode;