@salutejs/plasma-new-hope 0.144.0-dev.0 → 0.145.0-canary.1421.10845314144.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (153) hide show
  1. package/cjs/components/Slider/Slider.css +12 -10
  2. package/cjs/components/Slider/Slider.js +19 -6
  3. package/cjs/components/Slider/Slider.js.map +1 -1
  4. package/cjs/components/Slider/components/Double/Double.css +6 -5
  5. package/cjs/components/Slider/components/Double/Double.js +36 -2
  6. package/cjs/components/Slider/components/Double/Double.js.map +1 -1
  7. package/cjs/components/Slider/components/Double/Double.styles.js +7 -1
  8. package/cjs/components/Slider/components/Double/Double.styles.js.map +1 -1
  9. package/cjs/components/Slider/components/Double/{Double.styles_1jhda4u.css → Double.styles_4053ky.css} +1 -0
  10. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +56 -0
  11. package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js.map +1 -0
  12. package/cjs/components/Slider/components/Single/Single.css +6 -5
  13. package/cjs/components/Slider/components/Single/Single.js +35 -12
  14. package/cjs/components/Slider/components/Single/Single.js.map +1 -1
  15. package/cjs/components/Slider/components/Single/Single.styles.js +7 -1
  16. package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -1
  17. package/cjs/components/Slider/components/Single/{Single.styles_1r9f1e0.css → Single.styles_9lxkbx.css} +1 -0
  18. package/cjs/components/Slider/utils/index.js +6 -0
  19. package/cjs/components/Slider/utils/index.js.map +1 -1
  20. package/cjs/components/TextArea/TextArea.js +3 -2
  21. package/cjs/components/TextArea/TextArea.js.map +1 -1
  22. package/cjs/hooks/useForm.js +96 -0
  23. package/cjs/hooks/useForm.js.map +1 -0
  24. package/cjs/index.css +12 -10
  25. package/cjs/index.js +5 -0
  26. package/cjs/index.js.map +1 -1
  27. package/cjs/utils/index.js.map +1 -1
  28. package/cjs/utils/setRefList.js +28 -0
  29. package/cjs/utils/setRefList.js.map +1 -0
  30. package/emotion/cjs/components/Slider/Slider.js +15 -6
  31. package/emotion/cjs/components/Slider/components/Double/Double.js +36 -2
  32. package/emotion/cjs/components/Slider/components/Double/Double.styles.js +28 -15
  33. package/emotion/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +60 -0
  34. package/emotion/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.js +5 -0
  35. package/emotion/cjs/components/Slider/components/Single/Single.js +30 -7
  36. package/emotion/cjs/components/Slider/components/Single/Single.styles.js +26 -13
  37. package/emotion/cjs/components/Slider/components/index.js +11 -0
  38. package/emotion/cjs/components/Slider/utils/index.js +6 -1
  39. package/emotion/cjs/components/TextArea/TextArea.js +3 -3
  40. package/emotion/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx +191 -0
  41. package/emotion/cjs/hooks/index.js +8 -1
  42. package/emotion/cjs/hooks/useForm.js +102 -0
  43. package/emotion/cjs/utils/index.js +15 -0
  44. package/emotion/cjs/utils/setRefList.js +27 -0
  45. package/emotion/es/components/Slider/Slider.js +16 -6
  46. package/emotion/es/components/Slider/components/Double/Double.js +38 -4
  47. package/emotion/es/components/Slider/components/Double/Double.styles.js +27 -14
  48. package/emotion/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +51 -0
  49. package/emotion/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.js +1 -0
  50. package/emotion/es/components/Slider/components/Single/Single.js +32 -9
  51. package/emotion/es/components/Slider/components/Single/Single.styles.js +25 -12
  52. package/emotion/es/components/Slider/components/index.js +1 -0
  53. package/emotion/es/components/Slider/utils/index.js +5 -0
  54. package/emotion/es/components/TextArea/TextArea.js +4 -4
  55. package/emotion/es/examples/plasma_b2c/components/Form/Form.stories.tsx +191 -0
  56. package/emotion/es/hooks/index.js +2 -1
  57. package/emotion/es/hooks/useForm.js +93 -0
  58. package/emotion/es/utils/index.js +1 -0
  59. package/emotion/es/utils/setRefList.js +20 -0
  60. package/es/components/Slider/Slider.css +12 -10
  61. package/es/components/Slider/Slider.js +20 -7
  62. package/es/components/Slider/Slider.js.map +1 -1
  63. package/es/components/Slider/components/Double/Double.css +6 -5
  64. package/es/components/Slider/components/Double/Double.js +38 -4
  65. package/es/components/Slider/components/Double/Double.js.map +1 -1
  66. package/es/components/Slider/components/Double/Double.styles.js +7 -2
  67. package/es/components/Slider/components/Double/Double.styles.js.map +1 -1
  68. package/es/components/Slider/components/Double/{Double.styles_1jhda4u.css → Double.styles_4053ky.css} +1 -0
  69. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +52 -0
  70. package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js.map +1 -0
  71. package/es/components/Slider/components/Single/Single.css +6 -5
  72. package/es/components/Slider/components/Single/Single.js +32 -9
  73. package/es/components/Slider/components/Single/Single.js.map +1 -1
  74. package/es/components/Slider/components/Single/Single.styles.js +7 -2
  75. package/es/components/Slider/components/Single/Single.styles.js.map +1 -1
  76. package/es/components/Slider/components/Single/{Single.styles_1r9f1e0.css → Single.styles_9lxkbx.css} +1 -0
  77. package/es/components/Slider/utils/index.js +6 -1
  78. package/es/components/Slider/utils/index.js.map +1 -1
  79. package/es/components/TextArea/TextArea.js +3 -2
  80. package/es/components/TextArea/TextArea.js.map +1 -1
  81. package/es/hooks/useForm.js +92 -0
  82. package/es/hooks/useForm.js.map +1 -0
  83. package/es/index.css +12 -10
  84. package/es/index.js +2 -0
  85. package/es/index.js.map +1 -1
  86. package/es/utils/index.js.map +1 -1
  87. package/es/utils/setRefList.js +23 -0
  88. package/es/utils/setRefList.js.map +1 -0
  89. package/package.json +3 -2
  90. package/styled-components/cjs/components/Slider/Slider.js +15 -6
  91. package/styled-components/cjs/components/Slider/components/Double/Double.js +36 -2
  92. package/styled-components/cjs/components/Slider/components/Double/Double.styles.js +5 -2
  93. package/styled-components/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +60 -0
  94. package/styled-components/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.js +5 -0
  95. package/styled-components/cjs/components/Slider/components/Single/Single.js +30 -7
  96. package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +5 -2
  97. package/styled-components/cjs/components/Slider/components/index.js +11 -0
  98. package/styled-components/cjs/components/Slider/utils/index.js +6 -1
  99. package/styled-components/cjs/components/TextArea/TextArea.js +2 -2
  100. package/styled-components/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx +191 -0
  101. package/styled-components/cjs/hooks/index.js +8 -1
  102. package/styled-components/cjs/hooks/useForm.js +102 -0
  103. package/styled-components/cjs/utils/index.js +15 -0
  104. package/styled-components/cjs/utils/setRefList.js +27 -0
  105. package/styled-components/es/components/Slider/Slider.js +16 -6
  106. package/styled-components/es/components/Slider/components/Double/Double.js +38 -4
  107. package/styled-components/es/components/Slider/components/Double/Double.styles.js +4 -1
  108. package/styled-components/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.js +51 -0
  109. package/styled-components/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.js +1 -0
  110. package/styled-components/es/components/Slider/components/Single/Single.js +32 -9
  111. package/styled-components/es/components/Slider/components/Single/Single.styles.js +4 -1
  112. package/styled-components/es/components/Slider/components/index.js +1 -0
  113. package/styled-components/es/components/Slider/utils/index.js +5 -0
  114. package/styled-components/es/components/TextArea/TextArea.js +3 -3
  115. package/styled-components/es/examples/plasma_b2c/components/Form/Form.stories.tsx +191 -0
  116. package/styled-components/es/hooks/index.js +2 -1
  117. package/styled-components/es/hooks/useForm.js +93 -0
  118. package/styled-components/es/utils/index.js +1 -0
  119. package/styled-components/es/utils/setRefList.js +20 -0
  120. package/types/components/Slider/Slider.d.ts.map +1 -1
  121. package/types/components/Slider/Slider.types.d.ts +2 -2
  122. package/types/components/Slider/Slider.types.d.ts.map +1 -1
  123. package/types/components/Slider/components/Double/Double.d.ts.map +1 -1
  124. package/types/components/Slider/components/Double/Double.styles.d.ts +1 -0
  125. package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
  126. package/types/components/Slider/components/Double/Double.types.d.ts +2 -0
  127. package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -1
  128. package/types/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.d.ts +4 -0
  129. package/types/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.d.ts.map +1 -0
  130. package/types/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.d.ts +5 -0
  131. package/types/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.types.d.ts.map +1 -0
  132. package/types/components/Slider/components/Single/Single.d.ts.map +1 -1
  133. package/types/components/Slider/components/Single/Single.styles.d.ts +1 -0
  134. package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -1
  135. package/types/components/Slider/components/Single/Single.types.d.ts +3 -1
  136. package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -1
  137. package/types/components/Slider/components/index.d.ts +2 -0
  138. package/types/components/Slider/components/index.d.ts.map +1 -1
  139. package/types/components/Slider/utils/index.d.ts +1 -0
  140. package/types/components/Slider/utils/index.d.ts.map +1 -1
  141. package/types/components/TextArea/TextArea.d.ts.map +1 -1
  142. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +3 -1
  143. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -1
  144. package/types/examples/plasma_web/components/Slider/Slider.d.ts +3 -1
  145. package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -1
  146. package/types/hooks/index.d.ts +1 -0
  147. package/types/hooks/index.d.ts.map +1 -1
  148. package/types/hooks/useForm.d.ts +10 -0
  149. package/types/hooks/useForm.d.ts.map +1 -0
  150. package/types/utils/index.d.ts +1 -0
  151. package/types/utils/index.d.ts.map +1 -1
  152. package/types/utils/setRefList.d.ts +6 -0
  153. package/types/utils/setRefList.d.ts.map +1 -0
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "useForceUpdate", {
21
21
  return _useForceUpdate.useForceUpdate;
22
22
  }
23
23
  });
24
+ Object.defineProperty(exports, "useFormPlasma", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _useForm.useFormPlasma;
28
+ }
29
+ });
24
30
  Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
25
31
  enumerable: true,
26
32
  get: function get() {
@@ -51,4 +57,5 @@ var _usePreviousValue = /*#__PURE__*/require("./usePreviousValue");
51
57
  var _useForceUpdate = /*#__PURE__*/require("./useForceUpdate");
52
58
  var _useDidMountEffect = /*#__PURE__*/require("./useDidMountEffect");
53
59
  var _useOutsideClick = /*#__PURE__*/require("./useOutsideClick");
54
- var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");
60
+ var _useIsomorphicLayoutEffect = /*#__PURE__*/require("./useIsomorphicLayoutEffect");
61
+ var _useForm = /*#__PURE__*/require("./useForm");
@@ -0,0 +1,102 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.useFormPlasma = void 0;
8
+ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
10
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
11
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
12
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
13
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
14
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
15
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
16
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
17
+ var initData = function initData(ref, defaultValues) {
18
+ if (ref.current) {
19
+ var form = ref.current;
20
+ var items = form.elements;
21
+ for (var i = 0; i < items.length; i++) {
22
+ var item = items[i];
23
+ var _name = item.name,
24
+ value = item.value,
25
+ type = item.type;
26
+ if ((type === 'text' || type === 'textarea') && defaultValues[_name]) {
27
+ item.value = String(defaultValues[_name]);
28
+ }
29
+ if (type === 'checkbox' && defaultValues[_name]) {
30
+ item.checked = Boolean(defaultValues[_name]);
31
+ }
32
+ if (type === 'radio' && defaultValues[_name]) {
33
+ item.checked = defaultValues[_name] === value;
34
+ }
35
+ if (type === 'number' && defaultValues[_name]) {
36
+ var sliderType = item.getAttribute('datatype');
37
+ if (sliderType === 'slider-single') {
38
+ item.setAttribute('defaultValue', String(defaultValues[_name]));
39
+ var event = new Event('setInitValue');
40
+ item.dispatchEvent(event);
41
+ }
42
+ if (sliderType === 'slider-double') {
43
+ var isMax = item.getAttribute('data-slidertype') === 'max' ? 1 : 0;
44
+ var _data = defaultValues[_name];
45
+ item.setAttribute('defaultValue', String(_data[isMax]));
46
+ var _event = new Event('setInitValue');
47
+ item.dispatchEvent(_event);
48
+ }
49
+ }
50
+ }
51
+ }
52
+ };
53
+ var valideParams = function valideParams(name) {
54
+ return name && name !== '';
55
+ };
56
+ var useFormPlasma = exports.useFormPlasma = function useFormPlasma(onSubmit, defaultValues) {
57
+ var formRef = /*#__PURE__*/_react["default"].createRef();
58
+ (0, _react.useEffect)(function () {
59
+ initData(formRef, defaultValues);
60
+ });
61
+ var formData = function formData(event) {
62
+ event.preventDefault();
63
+ var result = {};
64
+ var form = event.target;
65
+ var items = form.elements;
66
+ for (var i = 0; i < items.length; i++) {
67
+ var item = items[i];
68
+ var _name2 = item.name,
69
+ value = item.value,
70
+ type = item.type;
71
+ if ((type === 'text' || type === 'textarea') && valideParams(_name2)) {
72
+ result[_name2] = value;
73
+ } else if (type === 'checkbox' && valideParams(_name2)) {
74
+ result[_name2] = item.checked;
75
+ } else if (type === 'radio' && valideParams(_name2)) {
76
+ if (item.checked) {
77
+ result[_name2] = value;
78
+ } else if (!(_name2 in result)) {
79
+ result[_name2] = null;
80
+ }
81
+ } else if (type === 'number' && valideParams(_name2)) {
82
+ var sliderType = item.getAttribute('datatype');
83
+ if (sliderType === 'slider-single') {
84
+ result[_name2] = value;
85
+ }
86
+ if (sliderType === 'slider-double') {
87
+ var isMin = item.getAttribute('data-slidertype') === 'min';
88
+ if (isMin) {
89
+ result[_name2] = [Number(value)];
90
+ } else if (!isMin && Array.isArray(result[_name2])) {
91
+ result[_name2] = [].concat(_toConsumableArray(result[_name2]), [Number(value)]);
92
+ }
93
+ }
94
+ }
95
+ }
96
+ onSubmit(result);
97
+ };
98
+ return {
99
+ formRef: formRef,
100
+ formData: formData
101
+ };
102
+ };
@@ -13,6 +13,8 @@ var _exportNames = {
13
13
  IS_REACT_18: true,
14
14
  safeUseId: true,
15
15
  isNumber: true,
16
+ mergeRefs: true,
17
+ setRefList: true,
16
18
  isEmpty: true,
17
19
  constants: true
18
20
  };
@@ -53,17 +55,30 @@ Object.defineProperty(exports, "isNumber", {
53
55
  return _isNumber.isNumber;
54
56
  }
55
57
  });
58
+ Object.defineProperty(exports, "mergeRefs", {
59
+ enumerable: true,
60
+ get: function get() {
61
+ return _setRefList.mergeRefs;
62
+ }
63
+ });
56
64
  Object.defineProperty(exports, "safeUseId", {
57
65
  enumerable: true,
58
66
  get: function get() {
59
67
  return _react.safeUseId;
60
68
  }
61
69
  });
70
+ Object.defineProperty(exports, "setRefList", {
71
+ enumerable: true,
72
+ get: function get() {
73
+ return _setRefList.setRefList;
74
+ }
75
+ });
62
76
  var _canUseDOM = /*#__PURE__*/require("./canUseDOM");
63
77
  var _extractTextFrom = /*#__PURE__*/require("./extractTextFrom");
64
78
  var _getSizeValueFromProp = /*#__PURE__*/require("./getSizeValueFromProp");
65
79
  var _react = /*#__PURE__*/require("./react");
66
80
  var _isNumber = /*#__PURE__*/require("./isNumber");
81
+ var _setRefList = /*#__PURE__*/require("./setRefList");
67
82
  var _isEmpty = /*#__PURE__*/require("./isEmpty");
68
83
  var _constants = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("./constants"));
69
84
  exports.constants = _constants;
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.mergeRefs = mergeRefs;
7
+ exports.setRefList = setRefList;
8
+ function mergeRefs() {
9
+ for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
10
+ refs[_key] = arguments[_key];
11
+ }
12
+ return function (val) {
13
+ setRefList.apply(void 0, [val].concat(refs));
14
+ };
15
+ }
16
+ function setRefList(val) {
17
+ for (var _len2 = arguments.length, refs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
18
+ refs[_key2 - 1] = arguments[_key2];
19
+ }
20
+ refs.forEach(function (ref) {
21
+ if (typeof ref === 'function') {
22
+ ref(val);
23
+ } else if (ref != null) {
24
+ ref.current = val;
25
+ }
26
+ });
27
+ }
@@ -1,17 +1,27 @@
1
+ var _excluded = ["type"];
1
2
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
5
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
6
  import React, { forwardRef } from 'react';
3
7
  import { base as viewCSS } from './variations/_view/base';
4
8
  import { base as sizeCSS } from './variations/_size/base';
5
9
  import { base as disabledCSS } from './variations/_disabled/base';
6
- import { SingleSlider, DoubleSlider } from './components';
7
- var isSingleValueProps = function isSingleValueProps(props) {
8
- return typeof props.value === 'number';
10
+ import { SingleSlider, DoubleUncontrolled } from './components';
11
+ var isSingleValueProps = function isSingleValueProps(props, type) {
12
+ return typeof props.value === 'number' || type === 'single' && _typeof(props.value) !== 'object';
13
+ };
14
+ var isDoubleValueProps = function isDoubleValueProps(props, type) {
15
+ return _typeof(props.value) === 'object' || type === 'double';
9
16
  };
10
17
  export var sliderRoot = function sliderRoot(Root) {
11
- return /*#__PURE__*/forwardRef(function (props, ref) {
12
- return /*#__PURE__*/React.createElement(Root, _extends({
18
+ return /*#__PURE__*/forwardRef(function (_ref, ref) {
19
+ var _ref$type = _ref.type,
20
+ type = _ref$type === void 0 ? 'single' : _ref$type,
21
+ props = _objectWithoutProperties(_ref, _excluded);
22
+ return /*#__PURE__*/React.createElement(Root, _extends({}, props, {
13
23
  ref: ref
14
- }, props), isSingleValueProps(props) && /*#__PURE__*/React.createElement(SingleSlider, props), !isSingleValueProps(props) && /*#__PURE__*/React.createElement(DoubleSlider, props));
24
+ }), isSingleValueProps(props, type) && /*#__PURE__*/React.createElement(SingleSlider, props), isDoubleValueProps(props, type) && /*#__PURE__*/React.createElement(DoubleUncontrolled, props));
15
25
  });
16
26
  };
17
27
  export var sliderConfig = {
@@ -1,5 +1,5 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize"];
2
+ var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -17,10 +17,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
17
17
  import React, { useCallback, useEffect, useRef, useState } from 'react';
18
18
  import { SliderBase } from '../SliderBase/SliderBase';
19
19
  import { Handler } from '../../ui';
20
- import { sizeData } from '../../utils';
20
+ import { sizeData, setInitValue } from '../../utils';
21
21
  import { cx, isNumber } from '../../../../utils';
22
22
  import { classes } from '../../Slider.tokens';
23
- import { SliderWrapper, InputsWrapper, Label, LabelContentLeft, LabelWrapper, StyledInput, DoubleWrapper } from './Double.styles';
23
+ import { SliderWrapper, InputsWrapper, Label, LabelContentLeft, LabelWrapper, StyledInput, DoubleWrapper, InputHidden } from './Double.styles';
24
24
  function getXCenterHandle(handle) {
25
25
  var _handle$parentElement;
26
26
  var containerX = ((_handle$parentElement = handle.parentElement) === null || _handle$parentElement === void 0 || (_handle$parentElement = _handle$parentElement.getBoundingClientRect()) === null || _handle$parentElement === void 0 ? void 0 : _handle$parentElement.x) || 0;
@@ -45,6 +45,7 @@ export var DoubleSlider = function DoubleSlider(_ref) {
45
45
  ariaLabel = _ref.ariaLabel,
46
46
  _ref$multipleStepSize = _ref.multipleStepSize,
47
47
  multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
48
+ name = _ref.name,
48
49
  rest = _objectWithoutProperties(_ref, _excluded);
49
50
  var _useState = useState({
50
51
  stepSize: 0,
@@ -80,6 +81,8 @@ export var DoubleSlider = function DoubleSlider(_ref) {
80
81
  var secondHandleRef = useRef(null);
81
82
  var firstHandleValue = useRef(value[0]);
82
83
  var secondHandleValue = useRef(value[1]);
84
+ var innerRefFirst = useRef(null);
85
+ var innerRefSecond = useRef(null);
83
86
  var stepSize = state.stepSize;
84
87
  var hasLabelContent = label || labelContentLeft;
85
88
  var firstInputActiveClass = firstInputActive && !disabled ? classes.textFieldActive : undefined;
@@ -98,6 +101,23 @@ export var DoubleSlider = function DoubleSlider(_ref) {
98
101
  });
99
102
  });
100
103
  }, [value, stepSize, min, max, setFirstValue, setSecondValue]);
104
+ useEffect(function () {
105
+ if (innerRefSecond.current && onChangeCommitted) {
106
+ innerRefSecond.current.addEventListener('setInitValue', function (e) {
107
+ var firstElement = innerRefFirst.current;
108
+ var firstValueInit = Number(firstElement.getAttribute('defaultValue'));
109
+ var secondValueInit = setInitValue(e);
110
+ onChangeCommitted([firstValueInit, secondValueInit]);
111
+ setFirstValue(firstValueInit);
112
+ setSecondValue(secondValueInit);
113
+ });
114
+ }
115
+ return function () {
116
+ if (innerRefSecond.current && onChangeCommitted) {
117
+ innerRefSecond.current.addEventListener('setInitValue', function () {});
118
+ }
119
+ };
120
+ }, [innerRefSecond]);
101
121
  var setStepSize = useCallback(function (newStepSize) {
102
122
  setState(function (prevState) {
103
123
  return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -306,5 +326,19 @@ export var DoubleSlider = function DoubleSlider(_ref) {
306
326
  onChange: onSecondTextfieldChange,
307
327
  onBlur: onSecondTextfieldBlur,
308
328
  onKeyDown: onTextfieldKeyDown
309
- }))));
329
+ }))), /*#__PURE__*/React.createElement(InputHidden, {
330
+ name: name,
331
+ type: "number",
332
+ datatype: "slider-double",
333
+ "data-slidertype": "min",
334
+ value: firstValue,
335
+ ref: innerRefFirst
336
+ }), /*#__PURE__*/React.createElement(InputHidden, {
337
+ name: name,
338
+ type: "number",
339
+ datatype: "slider-double",
340
+ "data-slidertype": "max",
341
+ value: secondValue,
342
+ ref: innerRefSecond
343
+ }));
310
344
  };
@@ -26,4 +26,7 @@ export var DoubleWrapper = /*#__PURE__*/styled.div.withConfig({
26
26
  })(["opacity:var(", ");"], tokens.disabledOpacity);
27
27
  export var SliderWrapper = /*#__PURE__*/styled.div.withConfig({
28
28
  componentId: "plasma-new-hope__sc-97pdfk-6"
29
- })([""]);
29
+ })([""]);
30
+ export var InputHidden = /*#__PURE__*/styled.input.withConfig({
31
+ componentId: "plasma-new-hope__sc-97pdfk-7"
32
+ })(["visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;"]);
@@ -0,0 +1,51 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
3
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
4
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
5
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
6
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
7
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
8
+ import React, { useState } from 'react';
9
+ import { DoubleSlider } from '../index';
10
+ export var DoubleUncontrolled = function DoubleUncontrolled(props) {
11
+ var _useState = useState([props.min, props.max]),
12
+ _useState2 = _slicedToArray(_useState, 2),
13
+ sliderValue = _useState2[0],
14
+ setSliderValue = _useState2[1];
15
+ var sortValues = function sortValues(values) {
16
+ return values.map(function (val) {
17
+ if (val < props.min) {
18
+ return props.min;
19
+ }
20
+ if (val > props.max) {
21
+ return props.max;
22
+ }
23
+ return val;
24
+ }).sort(function (a, b) {
25
+ return a - b;
26
+ });
27
+ };
28
+ var onChangeHandle = function onChangeHandle(values) {
29
+ setSliderValue(sortValues(values));
30
+ };
31
+ var onChangeCommitedHandle = function onChangeCommitedHandle(values) {
32
+ setSliderValue(sortValues(values));
33
+ };
34
+ var onBlurTextField = function onBlurTextField(values) {
35
+ setSliderValue(sortValues(values));
36
+ };
37
+ var onKeyDownTextField = function onKeyDownTextField(values, event) {
38
+ if (event.key === 'Enter') {
39
+ setSliderValue(sortValues(values));
40
+ }
41
+ };
42
+ return props.value ? /*#__PURE__*/React.createElement(DoubleSlider, _extends({}, props, {
43
+ value: props.value
44
+ })) : /*#__PURE__*/React.createElement(DoubleSlider, _extends({
45
+ value: sliderValue,
46
+ onKeyDownTextField: onKeyDownTextField,
47
+ onBlurTextField: onBlurTextField,
48
+ onChangeCommitted: onChangeCommitedHandle,
49
+ onChange: onChangeHandle
50
+ }, props));
51
+ };
@@ -1,5 +1,5 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["min", "max", "value", "disabled", "onChangeCommitted", "onChange", "ariaLabel", "label", "labelContentLeft", "showRangeValues", "showCurrentValue", "hideMinValueDiff", "hideMaxValueDiff", "labelPlacement", "rangeValuesPlacement", "multipleStepSize", "size"];
2
+ var _excluded = ["min", "max", "value", "disabled", "onChangeCommitted", "onChange", "ariaLabel", "label", "labelContentLeft", "showRangeValues", "showCurrentValue", "hideMinValueDiff", "hideMaxValueDiff", "labelPlacement", "rangeValuesPlacement", "multipleStepSize", "size", "name"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -17,14 +17,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
17
17
  import React, { useCallback, useEffect, useState, useRef } from 'react';
18
18
  import { SliderBase } from '../SliderBase/SliderBase';
19
19
  import { Handler } from '../../ui';
20
- import { sizeData } from '../../utils';
20
+ import { setInitValue, sizeData } from '../../utils';
21
21
  import { cx, isNumber } from '../../../../utils';
22
22
  import { classes } from '../../Slider.tokens';
23
- import { Label, LabelContentLeft, LabelWrapper, SingleWrapper, SliderBaseWrapper, StyledRangeValue } from './Single.styles';
23
+ import { Label, LabelContentLeft, LabelWrapper, SingleWrapper, SliderBaseWrapper, StyledRangeValue, InputHidden } from './Single.styles';
24
24
  export var SingleSlider = function SingleSlider(_ref) {
25
25
  var min = _ref.min,
26
26
  max = _ref.max,
27
- value = _ref.value,
27
+ _ref$value = _ref.value,
28
+ value = _ref$value === void 0 ? min : _ref$value,
28
29
  disabled = _ref.disabled,
29
30
  onChangeCommitted = _ref.onChangeCommitted,
30
31
  onChange = _ref.onChange,
@@ -43,6 +44,7 @@ export var SingleSlider = function SingleSlider(_ref) {
43
44
  multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
44
45
  _ref$size = _ref.size,
45
46
  size = _ref$size === void 0 ? 'm' : _ref$size,
47
+ name = _ref.name,
46
48
  rest = _objectWithoutProperties(_ref, _excluded);
47
49
  var _useState = useState({
48
50
  xHandle: 0,
@@ -52,6 +54,7 @@ export var SingleSlider = function SingleSlider(_ref) {
52
54
  _useState2 = _slicedToArray(_useState, 2),
53
55
  state = _useState2[0],
54
56
  setState = _useState2[1];
57
+ var innerRef = useRef(null);
55
58
  var _useState3 = useState(0),
56
59
  _useState4 = _slicedToArray(_useState3, 2),
57
60
  startOffset = _useState4[0],
@@ -68,14 +71,14 @@ export var SingleSlider = function SingleSlider(_ref) {
68
71
  var hasLabelContent = label || labelContentLeft;
69
72
  var labelPlacementClass = labelPlacement === 'outer' ? classes.labelPlacementOuter : classes.labelPlacementInner;
70
73
  var rangeValuesPlacementClass = rangeValuesPlacement === 'outer' ? classes.rangeValuesPlacementOuter : classes.rangeValuesPlacementInner;
71
- var hideMinValueDiffClass = hideMinValueDiff && value - min <= hideMinValueDiff ? classes.hideMinValue : '';
72
- var hideMaxValueDiffClass = hideMaxValueDiff && max - value <= hideMaxValueDiff ? classes.hideMaxValue : '';
74
+ var hideMinValueDiffClass = hideMinValueDiff && dragValue - min <= hideMinValueDiff ? classes.hideMinValue : '';
75
+ var hideMaxValueDiffClass = hideMaxValueDiff && max - dragValue <= hideMaxValueDiff ? classes.hideMaxValue : '';
73
76
  var startLabelRef = useRef(null);
74
77
  var endLabelRef = useRef(null);
75
78
  var activeFirstValue = dragValue === min ? classes.activeRangeValue : undefined;
76
79
  var activeSecondValue = dragValue === max ? classes.activeRangeValue : undefined;
77
80
  useEffect(function () {
78
- var localValue = Math.min(Math.max(value, min), max) - min;
81
+ var localValue = Math.min(Math.max(dragValue, min), max) - min;
79
82
  if (rangeValuesPlacement === 'outer') {
80
83
  var _startLabelRef$curren, _endLabelRef$current;
81
84
  var startWidth = (_startLabelRef$curren = startLabelRef.current) === null || _startLabelRef$curren === void 0 ? void 0 : _startLabelRef$curren.offsetWidth;
@@ -96,7 +99,21 @@ export var SingleSlider = function SingleSlider(_ref) {
96
99
  railFillWidth: stepSize * localValue
97
100
  });
98
101
  });
99
- }, [value, labelPlacement, stepSize, rangeValuesPlacement, min, max, setStartOffset, setEndOffset]);
102
+ }, [dragValue, labelPlacement, stepSize, rangeValuesPlacement, min, max, setStartOffset, setEndOffset]);
103
+ useEffect(function () {
104
+ if (innerRef.current) {
105
+ innerRef.current.addEventListener('setInitValue', function (e) {
106
+ return setDragValue(setInitValue(e));
107
+ });
108
+ }
109
+ return function () {
110
+ if (innerRef.current) {
111
+ innerRef.current.addEventListener('setInitValue', function (e) {
112
+ return setDragValue(setInitValue(e));
113
+ });
114
+ }
115
+ };
116
+ }, [innerRef]);
100
117
  var setStepSize = useCallback(function (newStepSize) {
101
118
  setState(function (prevState) {
102
119
  return _objectSpread(_objectSpread({}, prevState), {}, {
@@ -164,5 +181,11 @@ export var SingleSlider = function SingleSlider(_ref) {
164
181
  })), showRangeValues && /*#__PURE__*/React.createElement(StyledRangeValue, {
165
182
  ref: endLabelRef,
166
183
  className: cx(classes.maxRangeValue, hideMaxValueDiffClass, activeSecondValue)
167
- }, max)));
184
+ }, max)), /*#__PURE__*/React.createElement(InputHidden, {
185
+ name: name,
186
+ type: "number",
187
+ datatype: "slider-single",
188
+ value: dragValue,
189
+ ref: innerRef
190
+ }));
168
191
  };
@@ -17,4 +17,7 @@ export var SliderBaseWrapper = /*#__PURE__*/styled.div.withConfig({
17
17
  })(["position:relative;display:flex;flex:1;&.", "{", "{position:absolute;bottom:var(", ");left:0;&.", "{left:unset;right:0;}}}&.", "{align-items:center;", "{margin-right:var(", ");&.", "{margin-right:0;margin-left:var(", ");}}}"], classes.rangeValuesPlacementOuter, StyledRangeValue, tokens.rangeValueBottomOffset, classes.maxRangeValue, classes.rangeValuesPlacementInner, StyledRangeValue, tokens.rangeMinValueMargin, classes.maxRangeValue, tokens.rangeMaxValueMargin);
18
18
  export var SingleWrapper = /*#__PURE__*/styled.div.withConfig({
19
19
  componentId: "plasma-new-hope__sc-1qm4elt-5"
20
- })(["display:flex;opacity:var(", ");&.", "{flex-direction:column;", "{margin-bottom:var(", ");}}&.", "{", "{margin-right:var(", ");}}"], tokens.disabledOpacity, classes.labelPlacementOuter, LabelWrapper, tokens.labelWrapperMarginBottom, classes.labelPlacementInner, LabelWrapper, tokens.labelWrapperMarginRight);
20
+ })(["display:flex;opacity:var(", ");&.", "{flex-direction:column;", "{margin-bottom:var(", ");}}&.", "{", "{margin-right:var(", ");}}"], tokens.disabledOpacity, classes.labelPlacementOuter, LabelWrapper, tokens.labelWrapperMarginBottom, classes.labelPlacementInner, LabelWrapper, tokens.labelWrapperMarginRight);
21
+ export var InputHidden = /*#__PURE__*/styled.input.withConfig({
22
+ componentId: "plasma-new-hope__sc-1qm4elt-6"
23
+ })(["visibility:hidden;width:0;height:0;opacity:0;margin:0;padding:0;"]);
@@ -1,3 +1,4 @@
1
1
  export * from './Single/Single';
2
2
  export * from './Double/Double';
3
+ export * from './DoubleUncontrolled/DoubleUncontrolled';
3
4
  export {};
@@ -44,4 +44,9 @@ export var sizeData = {
44
44
  indent: 0.75,
45
45
  fontSizeMultiplier: 16
46
46
  }
47
+ };
48
+ export var setInitValue = function setInitValue(e) {
49
+ var item = e.target;
50
+ var defaultValue = Number(item.getAttribute('defaultValue'));
51
+ return defaultValue;
47
52
  };
@@ -21,7 +21,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
21
21
  import React, { forwardRef, useState, createRef, useCallback } from 'react';
22
22
  import { css } from 'styled-components';
23
23
  import { useResizeObserver } from '@salutejs/plasma-core';
24
- import { cx } from '../../utils';
24
+ import { cx, mergeRefs } from '../../utils';
25
25
  import { applyDynamicLabel } from './mixins';
26
26
  import { useAutoResize, ROOT_FONT_SIZE } from './hooks';
27
27
  import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText } from './TextArea.styles';
@@ -118,7 +118,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
118
118
  _useState6 = _slicedToArray(_useState5, 2),
119
119
  uncontrolledValue = _useState6[0],
120
120
  setUncontrolledValue = _useState6[1];
121
- var outerRef = innerRef && 'current' in innerRef ? innerRef : /*#__PURE__*/createRef();
121
+ var outerRef = /*#__PURE__*/createRef();
122
122
  var innerOptional = required ? false : optional;
123
123
  var hasHelper = Boolean(leftHelper || rightHelper || helperText);
124
124
  var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
@@ -190,7 +190,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
190
190
  hasContentRight: Boolean(contentRight),
191
191
  hasHelper: hasHelper,
192
192
  applyCustomWidth: applyCustomWidth,
193
- ref: outerRef,
193
+ ref: mergeRefs(outerRef, innerRef),
194
194
  disabled: disabled,
195
195
  height: autoResize ? minAuto : height,
196
196
  width: width,