List.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  3. import * as React from 'react';
  4. import warning from "rc-util/es/warning";
  5. import FieldContext from "./FieldContext";
  6. import Field from "./Field";
  7. import { move as _move, getNamePath } from "./utils/valueUtil";
  8. import ListContext from "./ListContext";
  9. function List(_ref) {
  10. var name = _ref.name,
  11. initialValue = _ref.initialValue,
  12. children = _ref.children,
  13. rules = _ref.rules,
  14. validateTrigger = _ref.validateTrigger,
  15. isListField = _ref.isListField;
  16. var context = React.useContext(FieldContext);
  17. var wrapperListContext = React.useContext(ListContext);
  18. var keyRef = React.useRef({
  19. keys: [],
  20. id: 0
  21. });
  22. var keyManager = keyRef.current;
  23. var prefixName = React.useMemo(function () {
  24. var parentPrefixName = getNamePath(context.prefixName) || [];
  25. return [].concat(_toConsumableArray(parentPrefixName), _toConsumableArray(getNamePath(name)));
  26. }, [context.prefixName, name]);
  27. var fieldContext = React.useMemo(function () {
  28. return _objectSpread(_objectSpread({}, context), {}, {
  29. prefixName: prefixName
  30. });
  31. }, [context, prefixName]);
  32. // List context
  33. var listContext = React.useMemo(function () {
  34. return {
  35. getKey: function getKey(namePath) {
  36. var len = prefixName.length;
  37. var pathName = namePath[len];
  38. return [keyManager.keys[pathName], namePath.slice(len + 1)];
  39. }
  40. };
  41. }, [prefixName]);
  42. // User should not pass `children` as other type.
  43. if (typeof children !== 'function') {
  44. warning(false, 'Form.List only accepts function as children.');
  45. return null;
  46. }
  47. var shouldUpdate = function shouldUpdate(prevValue, nextValue, _ref2) {
  48. var source = _ref2.source;
  49. if (source === 'internal') {
  50. return false;
  51. }
  52. return prevValue !== nextValue;
  53. };
  54. return /*#__PURE__*/React.createElement(ListContext.Provider, {
  55. value: listContext
  56. }, /*#__PURE__*/React.createElement(FieldContext.Provider, {
  57. value: fieldContext
  58. }, /*#__PURE__*/React.createElement(Field, {
  59. name: [],
  60. shouldUpdate: shouldUpdate,
  61. rules: rules,
  62. validateTrigger: validateTrigger,
  63. initialValue: initialValue,
  64. isList: true,
  65. isListField: isListField !== null && isListField !== void 0 ? isListField : !!wrapperListContext
  66. }, function (_ref3, meta) {
  67. var _ref3$value = _ref3.value,
  68. value = _ref3$value === void 0 ? [] : _ref3$value,
  69. onChange = _ref3.onChange;
  70. var getFieldValue = context.getFieldValue;
  71. var getNewValue = function getNewValue() {
  72. var values = getFieldValue(prefixName || []);
  73. return values || [];
  74. };
  75. /**
  76. * Always get latest value in case user update fields by `form` api.
  77. */
  78. var operations = {
  79. add: function add(defaultValue, index) {
  80. // Mapping keys
  81. var newValue = getNewValue();
  82. if (index >= 0 && index <= newValue.length) {
  83. keyManager.keys = [].concat(_toConsumableArray(keyManager.keys.slice(0, index)), [keyManager.id], _toConsumableArray(keyManager.keys.slice(index)));
  84. onChange([].concat(_toConsumableArray(newValue.slice(0, index)), [defaultValue], _toConsumableArray(newValue.slice(index))));
  85. } else {
  86. if (process.env.NODE_ENV !== 'production' && (index < 0 || index > newValue.length)) {
  87. warning(false, 'The second parameter of the add function should be a valid positive number.');
  88. }
  89. keyManager.keys = [].concat(_toConsumableArray(keyManager.keys), [keyManager.id]);
  90. onChange([].concat(_toConsumableArray(newValue), [defaultValue]));
  91. }
  92. keyManager.id += 1;
  93. },
  94. remove: function remove(index) {
  95. var newValue = getNewValue();
  96. var indexSet = new Set(Array.isArray(index) ? index : [index]);
  97. if (indexSet.size <= 0) {
  98. return;
  99. }
  100. keyManager.keys = keyManager.keys.filter(function (_, keysIndex) {
  101. return !indexSet.has(keysIndex);
  102. });
  103. // Trigger store change
  104. onChange(newValue.filter(function (_, valueIndex) {
  105. return !indexSet.has(valueIndex);
  106. }));
  107. },
  108. move: function move(from, to) {
  109. if (from === to) {
  110. return;
  111. }
  112. var newValue = getNewValue();
  113. // Do not handle out of range
  114. if (from < 0 || from >= newValue.length || to < 0 || to >= newValue.length) {
  115. return;
  116. }
  117. keyManager.keys = _move(keyManager.keys, from, to);
  118. // Trigger store change
  119. onChange(_move(newValue, from, to));
  120. }
  121. };
  122. var listValue = value || [];
  123. if (!Array.isArray(listValue)) {
  124. listValue = [];
  125. if (process.env.NODE_ENV !== 'production') {
  126. warning(false, "Current value of '".concat(prefixName.join(' > '), "' is not an array type."));
  127. }
  128. }
  129. return children(listValue.map(function (__, index) {
  130. var key = keyManager.keys[index];
  131. if (key === undefined) {
  132. keyManager.keys[index] = keyManager.id;
  133. key = keyManager.keys[index];
  134. keyManager.id += 1;
  135. }
  136. return {
  137. name: index,
  138. key: key,
  139. isListField: true
  140. };
  141. }), operations, meta);
  142. })));
  143. }
  144. export default List;