@salutejs/plasma-new-hope 0.325.0-canary.1715.15255555914.0 → 0.325.0-canary.1941.15255593421.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/CodeField/CodeField.css +14 -0
- package/cjs/components/CodeField/CodeField.js +290 -0
- package/cjs/components/CodeField/CodeField.js.map +1 -0
- package/cjs/components/CodeField/CodeField.styles.js +57 -0
- package/cjs/components/CodeField/CodeField.styles.js.map +1 -0
- package/cjs/components/CodeField/CodeField.styles_7zxgpc.css +6 -0
- package/cjs/components/CodeField/CodeField.tokens.js +59 -0
- package/cjs/components/CodeField/CodeField.tokens.js.map +1 -0
- package/cjs/components/CodeField/utils/constants.js +18 -0
- package/cjs/components/CodeField/utils/constants.js.map +1 -0
- package/cjs/components/CodeField/utils/handleCodeError.js +55 -0
- package/cjs/components/CodeField/utils/handleCodeError.js.map +1 -0
- package/cjs/components/CodeField/utils/handleItemError.js +53 -0
- package/cjs/components/CodeField/utils/handleItemError.js.map +1 -0
- package/cjs/components/CodeField/utils/initialValuesHelper.js +33 -0
- package/cjs/components/CodeField/utils/initialValuesHelper.js.map +1 -0
- package/cjs/components/CodeField/variations/_disabled/base.js +9 -0
- package/cjs/components/CodeField/variations/_disabled/base.js.map +1 -0
- package/cjs/components/CodeField/variations/_disabled/base_obsae2.css +1 -0
- package/cjs/components/CodeField/variations/_shape/base.js +9 -0
- package/cjs/components/CodeField/variations/_shape/base.js.map +1 -0
- package/cjs/components/CodeField/variations/_shape/base_1scsyya.css +1 -0
- package/cjs/components/CodeField/variations/_size/base.js +9 -0
- package/cjs/components/CodeField/variations/_size/base.js.map +1 -0
- package/cjs/components/CodeField/variations/_size/base_1wrvbr5.css +1 -0
- package/cjs/components/CodeField/variations/_view/base.js +9 -0
- package/cjs/components/CodeField/variations/_view/base.js.map +1 -0
- package/cjs/components/CodeField/variations/_view/base_9a5yza.css +1 -0
- package/cjs/components/NumberInput/ui/Input/Input.js +0 -3
- package/cjs/components/NumberInput/ui/Input/Input.js.map +1 -1
- package/cjs/index.css +15 -0
- package/cjs/index.js +10 -0
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/CodeField/CodeField.js +299 -0
- package/emotion/cjs/components/CodeField/CodeField.styles.js +65 -0
- package/emotion/cjs/components/CodeField/CodeField.template-doc.mdx +150 -0
- package/emotion/cjs/components/CodeField/CodeField.tokens.js +57 -0
- package/emotion/cjs/components/CodeField/CodeField.types.js +5 -0
- package/emotion/cjs/components/CodeField/index.js +50 -0
- package/emotion/cjs/components/CodeField/utils/constants.js +12 -0
- package/emotion/cjs/components/CodeField/utils/handleCodeError.js +58 -0
- package/emotion/cjs/components/CodeField/utils/handleItemError.js +56 -0
- package/emotion/cjs/components/CodeField/utils/index.js +38 -0
- package/emotion/cjs/components/CodeField/utils/initialValuesHelper.js +30 -0
- package/emotion/cjs/components/CodeField/variations/_disabled/base.js +9 -0
- package/emotion/cjs/components/CodeField/variations/_disabled/tokens.json +4 -0
- package/emotion/cjs/components/CodeField/variations/_shape/base.js +10 -0
- package/emotion/cjs/components/CodeField/variations/_shape/tokens.json +1 -0
- package/emotion/cjs/components/CodeField/variations/_size/base.js +10 -0
- package/emotion/cjs/components/CodeField/variations/_size/tokens.json +19 -0
- package/emotion/cjs/components/CodeField/variations/_view/base.js +10 -0
- package/emotion/cjs/components/CodeField/variations/_view/tokens.json +0 -0
- package/emotion/cjs/components/NumberInput/ui/Input/Input.js +0 -3
- package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.config.js +31 -0
- package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.js +11 -0
- package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +22 -23
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +3 -4
- package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.config.js +31 -0
- package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.js +11 -0
- package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +22 -23
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +4 -5
- package/emotion/cjs/index.js +11 -0
- package/emotion/es/components/CodeField/CodeField.js +290 -0
- package/emotion/es/components/CodeField/CodeField.styles.js +58 -0
- package/emotion/es/components/CodeField/CodeField.template-doc.mdx +150 -0
- package/emotion/es/components/CodeField/CodeField.tokens.js +51 -0
- package/emotion/es/components/CodeField/CodeField.types.js +1 -0
- package/emotion/es/components/CodeField/index.js +3 -0
- package/emotion/es/components/CodeField/utils/constants.js +6 -0
- package/emotion/es/components/CodeField/utils/handleCodeError.js +52 -0
- package/emotion/es/components/CodeField/utils/handleItemError.js +50 -0
- package/emotion/es/components/CodeField/utils/index.js +3 -0
- package/emotion/es/components/CodeField/utils/initialValuesHelper.js +24 -0
- package/emotion/es/components/CodeField/variations/_disabled/base.js +3 -0
- package/emotion/es/components/CodeField/variations/_disabled/tokens.json +4 -0
- package/emotion/es/components/CodeField/variations/_shape/base.js +4 -0
- package/emotion/es/components/CodeField/variations/_shape/tokens.json +1 -0
- package/emotion/es/components/CodeField/variations/_size/base.js +4 -0
- package/emotion/es/components/CodeField/variations/_size/tokens.json +19 -0
- package/emotion/es/components/CodeField/variations/_view/base.js +4 -0
- package/emotion/es/components/CodeField/variations/_view/tokens.json +0 -0
- package/emotion/es/components/NumberInput/ui/Input/Input.js +0 -3
- package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.config.js +25 -0
- package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.js +5 -0
- package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +22 -23
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +3 -4
- package/emotion/es/examples/plasma_web/components/CodeField/CodeField.config.js +25 -0
- package/emotion/es/examples/plasma_web/components/CodeField/CodeField.js +5 -0
- package/emotion/es/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
- package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +22 -23
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +4 -5
- package/emotion/es/index.js +2 -1
- package/es/components/CodeField/CodeField.css +14 -0
- package/es/components/CodeField/CodeField.js +280 -0
- package/es/components/CodeField/CodeField.js.map +1 -0
- package/es/components/CodeField/CodeField.styles.js +48 -0
- package/es/components/CodeField/CodeField.styles.js.map +1 -0
- package/es/components/CodeField/CodeField.styles_7zxgpc.css +6 -0
- package/es/components/CodeField/CodeField.tokens.js +54 -0
- package/es/components/CodeField/CodeField.tokens.js.map +1 -0
- package/es/components/CodeField/utils/constants.js +9 -0
- package/es/components/CodeField/utils/constants.js.map +1 -0
- package/es/components/CodeField/utils/handleCodeError.js +51 -0
- package/es/components/CodeField/utils/handleCodeError.js.map +1 -0
- package/es/components/CodeField/utils/handleItemError.js +49 -0
- package/es/components/CodeField/utils/handleItemError.js.map +1 -0
- package/es/components/CodeField/utils/initialValuesHelper.js +27 -0
- package/es/components/CodeField/utils/initialValuesHelper.js.map +1 -0
- package/es/components/CodeField/variations/_disabled/base.js +5 -0
- package/es/components/CodeField/variations/_disabled/base.js.map +1 -0
- package/es/components/CodeField/variations/_disabled/base_obsae2.css +1 -0
- package/es/components/CodeField/variations/_shape/base.js +5 -0
- package/es/components/CodeField/variations/_shape/base.js.map +1 -0
- package/es/components/CodeField/variations/_shape/base_1scsyya.css +1 -0
- package/es/components/CodeField/variations/_size/base.js +5 -0
- package/es/components/CodeField/variations/_size/base.js.map +1 -0
- package/es/components/CodeField/variations/_size/base_1wrvbr5.css +1 -0
- package/es/components/CodeField/variations/_view/base.js +5 -0
- package/es/components/CodeField/variations/_view/base.js.map +1 -0
- package/es/components/CodeField/variations/_view/base_9a5yza.css +1 -0
- package/es/components/NumberInput/ui/Input/Input.js +0 -3
- package/es/components/NumberInput/ui/Input/Input.js.map +1 -1
- package/es/index.css +15 -0
- package/es/index.js +3 -0
- package/es/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/CodeField/CodeField.js +299 -0
- package/styled-components/cjs/components/CodeField/CodeField.styles.js +38 -0
- package/styled-components/cjs/components/CodeField/CodeField.template-doc.mdx +150 -0
- package/styled-components/cjs/components/CodeField/CodeField.tokens.js +57 -0
- package/styled-components/cjs/components/CodeField/CodeField.types.js +5 -0
- package/styled-components/cjs/components/CodeField/index.js +50 -0
- package/styled-components/cjs/components/CodeField/utils/constants.js +12 -0
- package/styled-components/cjs/components/CodeField/utils/handleCodeError.js +58 -0
- package/styled-components/cjs/components/CodeField/utils/handleItemError.js +56 -0
- package/styled-components/cjs/components/CodeField/utils/index.js +38 -0
- package/styled-components/cjs/components/CodeField/utils/initialValuesHelper.js +30 -0
- package/styled-components/cjs/components/CodeField/variations/_disabled/base.js +9 -0
- package/styled-components/cjs/components/CodeField/variations/_disabled/tokens.json +4 -0
- package/styled-components/cjs/components/CodeField/variations/_shape/base.js +10 -0
- package/styled-components/cjs/components/CodeField/variations/_shape/tokens.json +1 -0
- package/styled-components/cjs/components/CodeField/variations/_size/base.js +10 -0
- package/styled-components/cjs/components/CodeField/variations/_size/tokens.json +19 -0
- package/styled-components/cjs/components/CodeField/variations/_view/base.js +10 -0
- package/styled-components/cjs/components/CodeField/variations/_view/tokens.json +0 -0
- package/styled-components/cjs/components/NumberInput/ui/Input/Input.js +0 -3
- package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.config.js +31 -0
- package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +1 -2
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +3 -4
- package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.config.js +31 -0
- package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.js +11 -0
- package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +6 -7
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +4 -5
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/es/components/CodeField/CodeField.js +290 -0
- package/styled-components/es/components/CodeField/CodeField.styles.js +30 -0
- package/styled-components/es/components/CodeField/CodeField.template-doc.mdx +150 -0
- package/styled-components/es/components/CodeField/CodeField.tokens.js +51 -0
- package/styled-components/es/components/CodeField/CodeField.types.js +1 -0
- package/styled-components/es/components/CodeField/index.js +3 -0
- package/styled-components/es/components/CodeField/utils/constants.js +6 -0
- package/styled-components/es/components/CodeField/utils/handleCodeError.js +52 -0
- package/styled-components/es/components/CodeField/utils/handleItemError.js +50 -0
- package/styled-components/es/components/CodeField/utils/index.js +3 -0
- package/styled-components/es/components/CodeField/utils/initialValuesHelper.js +24 -0
- package/styled-components/es/components/CodeField/variations/_disabled/base.js +3 -0
- package/styled-components/es/components/CodeField/variations/_disabled/tokens.json +4 -0
- package/styled-components/es/components/CodeField/variations/_shape/base.js +4 -0
- package/styled-components/es/components/CodeField/variations/_shape/tokens.json +1 -0
- package/styled-components/es/components/CodeField/variations/_size/base.js +4 -0
- package/styled-components/es/components/CodeField/variations/_size/tokens.json +19 -0
- package/styled-components/es/components/CodeField/variations/_view/base.js +4 -0
- package/styled-components/es/components/CodeField/variations/_view/tokens.json +0 -0
- package/styled-components/es/components/NumberInput/ui/Input/Input.js +0 -3
- package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.config.js +25 -0
- package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.stories.tsx +107 -0
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +1 -2
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +3 -4
- package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.config.js +25 -0
- package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.js +5 -0
- package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.stories.tsx +107 -0
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +6 -7
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +4 -5
- package/styled-components/es/index.js +2 -1
- package/types/components/CodeField/CodeField.d.ts +69 -0
- package/types/components/CodeField/CodeField.d.ts.map +1 -0
- package/types/components/CodeField/CodeField.styles.d.ts +11 -0
- package/types/components/CodeField/CodeField.styles.d.ts.map +1 -0
- package/types/components/CodeField/CodeField.tokens.d.ts +52 -0
- package/types/components/CodeField/CodeField.tokens.d.ts.map +1 -0
- package/types/components/CodeField/CodeField.types.d.ts +93 -0
- package/types/components/CodeField/CodeField.types.d.ts.map +1 -0
- package/types/components/CodeField/index.d.ts +4 -0
- package/types/components/CodeField/index.d.ts.map +1 -0
- package/types/components/CodeField/utils/constants.d.ts +7 -0
- package/types/components/CodeField/utils/constants.d.ts.map +1 -0
- package/types/components/CodeField/utils/handleCodeError.d.ts +15 -0
- package/types/components/CodeField/utils/handleCodeError.d.ts.map +1 -0
- package/types/components/CodeField/utils/handleItemError.d.ts +14 -0
- package/types/components/CodeField/utils/handleItemError.d.ts.map +1 -0
- package/types/components/CodeField/utils/index.d.ts +4 -0
- package/types/components/CodeField/utils/index.d.ts.map +1 -0
- package/types/components/CodeField/utils/initialValuesHelper.d.ts +4 -0
- package/types/components/CodeField/utils/initialValuesHelper.d.ts.map +1 -0
- package/types/components/CodeField/variations/_disabled/base.d.ts +2 -0
- package/types/components/CodeField/variations/_disabled/base.d.ts.map +1 -0
- package/types/components/CodeField/variations/_shape/base.d.ts +2 -0
- package/types/components/CodeField/variations/_shape/base.d.ts.map +1 -0
- package/types/components/CodeField/variations/_size/base.d.ts +2 -0
- package/types/components/CodeField/variations/_size/base.d.ts.map +1 -0
- package/types/components/CodeField/variations/_view/base.d.ts +2 -0
- package/types/components/CodeField/variations/_view/base.d.ts.map +1 -0
- package/types/components/NumberInput/ui/Input/Input.d.ts.map +1 -1
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
@@ -0,0 +1,299 @@
|
|
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.codeFieldRoot = exports.codeFieldConfig = void 0;
|
8
|
+
var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"));
|
9
|
+
var _classnames = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("classnames"));
|
10
|
+
var _hooks = /*#__PURE__*/require("../../hooks");
|
11
|
+
var _utils = /*#__PURE__*/require("../../utils");
|
12
|
+
var _constants = /*#__PURE__*/require("./utils/constants");
|
13
|
+
var _utils2 = /*#__PURE__*/require("./utils");
|
14
|
+
var _CodeField = /*#__PURE__*/require("./CodeField.tokens");
|
15
|
+
var _CodeField2 = /*#__PURE__*/require("./CodeField.styles");
|
16
|
+
var _base = /*#__PURE__*/require("./variations/_view/base");
|
17
|
+
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
18
|
+
var _base3 = /*#__PURE__*/require("./variations/_shape/base");
|
19
|
+
var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
|
20
|
+
var _Separator;
|
21
|
+
var _excluded = ["className", "value", "placeholder", "autoFocus", "codeLength", "caption", "captionAlign", "width", "shape", "view", "size", "disabled", "isError", "allowedSymbols", "itemErrorBehavior", "codeErrorBehavior", "autoComplete", "setIsError", "onChange", "onFullCodeEnter"];
|
22
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
23
|
+
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); }
|
24
|
+
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; }
|
25
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
26
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
27
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
28
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
29
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
30
|
+
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."); }
|
31
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
32
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
33
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
34
|
+
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."); }
|
35
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
36
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
37
|
+
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; } }
|
38
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
39
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
40
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
41
|
+
var codeFieldRoot = exports.codeFieldRoot = function codeFieldRoot(Root) {
|
42
|
+
return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
43
|
+
var className = _ref.className,
|
44
|
+
outerValue = _ref.value,
|
45
|
+
placeholder = _ref.placeholder,
|
46
|
+
autoFocus = _ref.autoFocus,
|
47
|
+
_ref$codeLength = _ref.codeLength,
|
48
|
+
codeLength = _ref$codeLength === void 0 ? 6 : _ref$codeLength,
|
49
|
+
caption = _ref.caption,
|
50
|
+
_ref$captionAlign = _ref.captionAlign,
|
51
|
+
captionAlign = _ref$captionAlign === void 0 ? 'left' : _ref$captionAlign,
|
52
|
+
width = _ref.width,
|
53
|
+
_ref$shape = _ref.shape,
|
54
|
+
shape = _ref$shape === void 0 ? 'default' : _ref$shape,
|
55
|
+
view = _ref.view,
|
56
|
+
size = _ref.size,
|
57
|
+
disabled = _ref.disabled,
|
58
|
+
isError = _ref.isError,
|
59
|
+
_ref$allowedSymbols = _ref.allowedSymbols,
|
60
|
+
allowedSymbols = _ref$allowedSymbols === void 0 ? _constants.ONLY_DIGITS_PATTERN : _ref$allowedSymbols,
|
61
|
+
_ref$itemErrorBehavio = _ref.itemErrorBehavior,
|
62
|
+
itemErrorBehavior = _ref$itemErrorBehavio === void 0 ? 'remove-symbol' : _ref$itemErrorBehavio,
|
63
|
+
_ref$codeErrorBehavio = _ref.codeErrorBehavior,
|
64
|
+
codeErrorBehavior = _ref$codeErrorBehavio === void 0 ? 'remove-code' : _ref$codeErrorBehavio,
|
65
|
+
_ref$autoComplete = _ref.autoComplete,
|
66
|
+
autoComplete = _ref$autoComplete === void 0 ? 'one-time-code' : _ref$autoComplete,
|
67
|
+
setIsError = _ref.setIsError,
|
68
|
+
onChange = _ref.onChange,
|
69
|
+
onFullCodeEnter = _ref.onFullCodeEnter,
|
70
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
71
|
+
var _useState = (0, _react.useState)((0, _utils2.getCodeValue)(codeLength, outerValue || '')),
|
72
|
+
_useState2 = _slicedToArray(_useState, 2),
|
73
|
+
code = _useState2[0],
|
74
|
+
setCode = _useState2[1];
|
75
|
+
var _useState3 = (0, _react.useState)(code.join('')),
|
76
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
77
|
+
originalValue = _useState4[0],
|
78
|
+
setOriginalValue = _useState4[1];
|
79
|
+
var inputRefs = (0, _react.useRef)([]);
|
80
|
+
var inputContainerRef = (0, _react.useRef)(null);
|
81
|
+
var captionRef = (0, _react.useRef)(null);
|
82
|
+
var fieldPattern = (0, _utils2.getFieldPattern)(allowedSymbols);
|
83
|
+
var placeholderValue = (0, _utils2.getPlaceholderValue)(codeLength, placeholder);
|
84
|
+
var parts = codeLength === 6 ? 2 : 1;
|
85
|
+
var widthValue = width ? (0, _utils.getSizeValueFromProp)(width, 'rem') : undefined;
|
86
|
+
var getLastActiveIndex = function getLastActiveIndex() {
|
87
|
+
if (code.length && code.length < codeLength) {
|
88
|
+
return code.length;
|
89
|
+
}
|
90
|
+
var lastEmptyIndex = code.findIndex(function (digit) {
|
91
|
+
return digit === '';
|
92
|
+
});
|
93
|
+
return lastEmptyIndex >= 0 ? lastEmptyIndex : codeLength - 1;
|
94
|
+
};
|
95
|
+
var handleClick = function handleClick() {
|
96
|
+
if (disabled) {
|
97
|
+
return;
|
98
|
+
}
|
99
|
+
var lastActiveIndex = getLastActiveIndex();
|
100
|
+
if (inputRefs.current[lastActiveIndex]) {
|
101
|
+
inputRefs.current[lastActiveIndex].focus();
|
102
|
+
}
|
103
|
+
};
|
104
|
+
var handleOnKeyDown = function handleOnKeyDown(event, index) {
|
105
|
+
if (disabled) {
|
106
|
+
return;
|
107
|
+
}
|
108
|
+
var key = event.key;
|
109
|
+
if (_constants.FORBIDDEN_KEYS.includes(key)) {
|
110
|
+
event.preventDefault();
|
111
|
+
return;
|
112
|
+
}
|
113
|
+
if (key === _constants.BACKSPACE_KEY) {
|
114
|
+
if (index > 0 && code[index] === '') {
|
115
|
+
var _inputRefs$current;
|
116
|
+
(_inputRefs$current = inputRefs.current[index - 1]) === null || _inputRefs$current === void 0 || _inputRefs$current.focus();
|
117
|
+
}
|
118
|
+
}
|
119
|
+
};
|
120
|
+
var codeSetter = function codeSetter(newCode) {
|
121
|
+
setCode(newCode);
|
122
|
+
setOriginalValue(newCode.join(''));
|
123
|
+
if (onChange) {
|
124
|
+
onChange(newCode.join(''));
|
125
|
+
}
|
126
|
+
};
|
127
|
+
var handleChange = function handleChange(event, index) {
|
128
|
+
var _inputRefs$current$in;
|
129
|
+
if (disabled) {
|
130
|
+
return;
|
131
|
+
}
|
132
|
+
var rawSymbol = event.currentTarget.value;
|
133
|
+
var symbol = rawSymbol.charAt(rawSymbol.length - 1);
|
134
|
+
var newCode = _toConsumableArray(code);
|
135
|
+
(_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.classList.remove(_CodeField.classes.itemError);
|
136
|
+
if (isError) {
|
137
|
+
var _captionRef$current;
|
138
|
+
(_captionRef$current = captionRef.current) === null || _captionRef$current === void 0 || _captionRef$current.classList.remove(_CodeField.classes.captionError);
|
139
|
+
if (codeErrorBehavior === 'keep') {
|
140
|
+
var _inputContainerRef$cu;
|
141
|
+
(_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 || _inputContainerRef$cu.classList.remove(_CodeField.classes.codeError, _CodeField.classes.codeErrorAnimation);
|
142
|
+
}
|
143
|
+
if (setIsError) {
|
144
|
+
setIsError(false);
|
145
|
+
}
|
146
|
+
}
|
147
|
+
if (!fieldPattern) {
|
148
|
+
newCode[index] = symbol;
|
149
|
+
codeSetter(newCode);
|
150
|
+
if (symbol && index < codeLength - 1) {
|
151
|
+
var _inputRefs$current2;
|
152
|
+
(_inputRefs$current2 = inputRefs.current[index + 1]) === null || _inputRefs$current2 === void 0 || _inputRefs$current2.focus();
|
153
|
+
}
|
154
|
+
return;
|
155
|
+
}
|
156
|
+
if (!symbol) {
|
157
|
+
newCode[index] = '';
|
158
|
+
codeSetter(newCode);
|
159
|
+
return;
|
160
|
+
}
|
161
|
+
if (fieldPattern.test(symbol)) {
|
162
|
+
newCode[index] = symbol.charAt(symbol.length - 1);
|
163
|
+
codeSetter(newCode);
|
164
|
+
if (index < codeLength - 1) {
|
165
|
+
var _inputRefs$current3;
|
166
|
+
(_inputRefs$current3 = inputRefs.current[index + 1]) === null || _inputRefs$current3 === void 0 || _inputRefs$current3.focus();
|
167
|
+
}
|
168
|
+
} else {
|
169
|
+
newCode[index] = symbol.charAt(symbol.length - 1);
|
170
|
+
(0, _utils2.handleItemError)({
|
171
|
+
currentSymbol: symbol,
|
172
|
+
itemErrorBehavior: itemErrorBehavior,
|
173
|
+
index: index,
|
174
|
+
newCode: newCode,
|
175
|
+
inputRefs: inputRefs,
|
176
|
+
setCode: setCode,
|
177
|
+
codeSetter: codeSetter
|
178
|
+
});
|
179
|
+
}
|
180
|
+
};
|
181
|
+
var handlePaste = function handlePaste(event) {
|
182
|
+
var _inputRefs$current$ac;
|
183
|
+
if (disabled) {
|
184
|
+
return;
|
185
|
+
}
|
186
|
+
event.preventDefault();
|
187
|
+
var rawData = event.clipboardData.getData('text/plain');
|
188
|
+
var pastedData = (fieldPattern ? rawData.split('').map(function (symb) {
|
189
|
+
var _symb$match;
|
190
|
+
return ((_symb$match = symb.match(fieldPattern)) === null || _symb$match === void 0 ? void 0 : _symb$match[0]) || '';
|
191
|
+
}).filter(Boolean) || [] : rawData.split('')).slice(0, codeLength);
|
192
|
+
var activeIndex = Math.min(pastedData.length, codeLength - 1);
|
193
|
+
(_inputRefs$current$ac = inputRefs.current[activeIndex]) === null || _inputRefs$current$ac === void 0 || _inputRefs$current$ac.focus();
|
194
|
+
codeSetter(pastedData);
|
195
|
+
};
|
196
|
+
var handleFullCodeEnter = (0, _react.useCallback)(function (fullCode) {
|
197
|
+
if (onFullCodeEnter) {
|
198
|
+
onFullCodeEnter(fullCode);
|
199
|
+
}
|
200
|
+
}, []);
|
201
|
+
(0, _react.useEffect)(function () {
|
202
|
+
inputRefs.current = inputRefs.current.slice(0, codeLength);
|
203
|
+
}, [codeLength]);
|
204
|
+
(0, _react.useEffect)(function () {
|
205
|
+
if (autoFocus && !disabled) {
|
206
|
+
var _inputRefs$current$la;
|
207
|
+
var lastActiveIndex = getLastActiveIndex();
|
208
|
+
(_inputRefs$current$la = inputRefs.current[lastActiveIndex]) === null || _inputRefs$current$la === void 0 || _inputRefs$current$la.focus();
|
209
|
+
}
|
210
|
+
}, [autoFocus]);
|
211
|
+
(0, _hooks.useDidMountEffect)(function () {
|
212
|
+
if (handleFullCodeEnter && originalValue.length === codeLength) {
|
213
|
+
handleFullCodeEnter(originalValue);
|
214
|
+
}
|
215
|
+
}, [originalValue, handleFullCodeEnter]);
|
216
|
+
(0, _hooks.useDidMountEffect)(function () {
|
217
|
+
if (isError) {
|
218
|
+
(0, _utils2.handleCodeError)({
|
219
|
+
codeLength: codeLength,
|
220
|
+
codeErrorBehavior: codeErrorBehavior,
|
221
|
+
currentCode: code,
|
222
|
+
inputRefs: inputRefs,
|
223
|
+
inputContainerRef: inputContainerRef,
|
224
|
+
captionRef: captionRef,
|
225
|
+
setCode: setCode,
|
226
|
+
codeSetter: codeSetter
|
227
|
+
});
|
228
|
+
}
|
229
|
+
}, [isError]);
|
230
|
+
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
231
|
+
ref: ref,
|
232
|
+
view: view,
|
233
|
+
size: size,
|
234
|
+
shape: shape,
|
235
|
+
disabled: disabled,
|
236
|
+
onClick: handleClick,
|
237
|
+
className: (0, _classnames["default"])(className, _defineProperty({}, _CodeField.classes.captionAlignLeft, captionAlign === 'left'))
|
238
|
+
}, rest), /*#__PURE__*/_react["default"].createElement(_CodeField2.CodeWrapper, {
|
239
|
+
ref: inputContainerRef
|
240
|
+
}, _toConsumableArray(Array(parts)).map(function (_, partIndex) {
|
241
|
+
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
|
242
|
+
key: partIndex
|
243
|
+
}, /*#__PURE__*/_react["default"].createElement(_CodeField2.CodeGroup, {
|
244
|
+
role: "group"
|
245
|
+
}, _toConsumableArray(Array(codeLength / parts)).map(function (_, i) {
|
246
|
+
var inputCorrectIndex = i + codeLength / parts * partIndex;
|
247
|
+
return /*#__PURE__*/_react["default"].createElement(_CodeField2.ItemInput, _extends({
|
248
|
+
key: partIndex + i + partIndex * i,
|
249
|
+
ref: function ref(element) {
|
250
|
+
inputRefs.current[inputCorrectIndex] = element;
|
251
|
+
},
|
252
|
+
className: (0, _classnames["default"])(_defineProperty(_defineProperty({}, _CodeField.classes.segmented, shape === 'segmented'), _CodeField.classes.hoverEnabled, inputCorrectIndex >= originalValue.length)),
|
253
|
+
value: code[inputCorrectIndex] || '',
|
254
|
+
autoComplete: autoComplete,
|
255
|
+
onChange: function onChange(e) {
|
256
|
+
handleChange(e, inputCorrectIndex);
|
257
|
+
},
|
258
|
+
onKeyDown: function onKeyDown(e) {
|
259
|
+
handleOnKeyDown(e, inputCorrectIndex);
|
260
|
+
},
|
261
|
+
onPaste: handlePaste,
|
262
|
+
tabIndex: originalValue.length === inputCorrectIndex ? 0 : -1
|
263
|
+
}, placeholderValue && {
|
264
|
+
placeholder: placeholderValue[inputCorrectIndex]
|
265
|
+
}));
|
266
|
+
})), partIndex !== parts - 1 && (_Separator || (_Separator = /*#__PURE__*/_react["default"].createElement(_CodeField2.Separator, null))));
|
267
|
+
})), caption && /*#__PURE__*/_react["default"].createElement(_CodeField2.CaptionWrapper, {
|
268
|
+
ref: captionRef,
|
269
|
+
captionAlign: captionAlign,
|
270
|
+
widthValue: widthValue
|
271
|
+
}, caption));
|
272
|
+
});
|
273
|
+
};
|
274
|
+
var codeFieldConfig = exports.codeFieldConfig = {
|
275
|
+
name: 'CodeField',
|
276
|
+
tag: 'div',
|
277
|
+
layout: codeFieldRoot,
|
278
|
+
base: _CodeField2.base,
|
279
|
+
variations: {
|
280
|
+
view: {
|
281
|
+
css: _base.base
|
282
|
+
},
|
283
|
+
size: {
|
284
|
+
css: _base2.base
|
285
|
+
},
|
286
|
+
shape: {
|
287
|
+
css: _base3.base
|
288
|
+
},
|
289
|
+
disabled: {
|
290
|
+
css: _base4.base,
|
291
|
+
attrs: true
|
292
|
+
}
|
293
|
+
},
|
294
|
+
defaults: {
|
295
|
+
size: 'm',
|
296
|
+
view: 'default',
|
297
|
+
shape: 'default'
|
298
|
+
}
|
299
|
+
};
|
@@ -0,0 +1,38 @@
|
|
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.base = exports.Separator = exports.ItemInput = exports.CodeWrapper = exports.CodeGroup = exports.CaptionWrapper = void 0;
|
8
|
+
var _styledComponents = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("styled-components"));
|
9
|
+
var _CodeField = /*#__PURE__*/require("./CodeField.tokens");
|
10
|
+
var _templateObject;
|
11
|
+
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); }
|
12
|
+
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; }
|
13
|
+
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
14
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: min-content;\n align-items: center;\n\n &.", " {\n align-items: start;\n }\n"])), _CodeField.classes.captionAlignLeft);
|
15
|
+
var CodeWrapper = exports.CodeWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
16
|
+
componentId: "plasma-new-hope__sc-1269wxl-0"
|
17
|
+
})(["display:flex;align-items:center;"]);
|
18
|
+
var CodeGroup = exports.CodeGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
19
|
+
componentId: "plasma-new-hope__sc-1269wxl-1"
|
20
|
+
})(["display:flex;align-items:center;"]);
|
21
|
+
var Separator = exports.Separator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
22
|
+
componentId: "plasma-new-hope__sc-1269wxl-2"
|
23
|
+
})(["width:var(", ");"], _CodeField.tokens.separatorWidth);
|
24
|
+
var ItemInput = exports.ItemInput = /*#__PURE__*/_styledComponents["default"].input.withConfig({
|
25
|
+
componentId: "plasma-new-hope__sc-1269wxl-3"
|
26
|
+
})(["box-sizing:border-box;appearance:none;border:0;padding:0;outline:none;pointer-events:none;text-align:center;"]);
|
27
|
+
var CaptionWrapper = exports.CaptionWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
28
|
+
componentId: "plasma-new-hope__sc-1269wxl-4"
|
29
|
+
})(["text-align:", ";align-self:", ";width:", ";white-space:pre-line;"], function (_ref) {
|
30
|
+
var captionAlign = _ref.captionAlign;
|
31
|
+
return captionAlign;
|
32
|
+
}, function (_ref2) {
|
33
|
+
var captionAlign = _ref2.captionAlign;
|
34
|
+
return captionAlign;
|
35
|
+
}, function (_ref3) {
|
36
|
+
var widthValue = _ref3.widthValue;
|
37
|
+
return widthValue || 'auto';
|
38
|
+
});
|
@@ -0,0 +1,150 @@
|
|
1
|
+
---
|
2
|
+
id: codefield
|
3
|
+
title: CodeField
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description } from '@site/src/components';
|
7
|
+
|
8
|
+
# CodeField
|
9
|
+
Компонент `CodeField` используется для ввода OTP-кодов.
|
10
|
+
|
11
|
+
<Description name="CodeField" />
|
12
|
+
<PropsTable name="CodeField" />
|
13
|
+
|
14
|
+
## Примеры
|
15
|
+
|
16
|
+
### Размер
|
17
|
+
Размер задается с помощью свойства `size`.
|
18
|
+
Ширина компонента так же может регулироваться при помощи свойства `width`:
|
19
|
+
|
20
|
+
```tsx live
|
21
|
+
import React from 'react';
|
22
|
+
import { CodeField } from '@salutejs/{{ package }}';
|
23
|
+
|
24
|
+
export function App() {
|
25
|
+
return (
|
26
|
+
<div style=\{{ flexDirection: 'column', gap: '2rem' }}>
|
27
|
+
<CodeField
|
28
|
+
size="l"
|
29
|
+
caption="Осталось попыток: 4"
|
30
|
+
captionAlign="center"
|
31
|
+
/>
|
32
|
+
<CodeField
|
33
|
+
size="m"
|
34
|
+
caption="Чтобы выслать вам код повторно подождите: 20 секунд"
|
35
|
+
captionAlign="left"
|
36
|
+
/>
|
37
|
+
<CodeField
|
38
|
+
width="25"
|
39
|
+
caption="Не передавайте никому код из СМС. Иначе ваш аккаунт могут взломать"
|
40
|
+
captionAlign="center"
|
41
|
+
/>
|
42
|
+
</div>
|
43
|
+
);
|
44
|
+
}
|
45
|
+
```
|
46
|
+
|
47
|
+
### Форма компонента и длина кода
|
48
|
+
Форма компонента задается с помощью свойства `shape`, а длина кода с помощью `codeLength`:
|
49
|
+
|
50
|
+
```tsx live
|
51
|
+
import React from 'react';
|
52
|
+
import { CodeField } from '@salutejs/{{ package }}';
|
53
|
+
|
54
|
+
export function App() {
|
55
|
+
return (
|
56
|
+
<div style=\{{ flexDirection: 'column', gap: '2rem' }}>
|
57
|
+
<div style=\{{ display: 'flex', gap: '2rem' }}>
|
58
|
+
<CodeField shape="default" codeLength={4} />
|
59
|
+
<CodeField shape="segmented" codeLength={4} />
|
60
|
+
</div>
|
61
|
+
<div style=\{{ display: 'flex', gap: '2rem' }}>
|
62
|
+
<CodeField shape="default" codeLength={5} />
|
63
|
+
<CodeField shape="segmented" codeLength={5} />
|
64
|
+
</div>
|
65
|
+
<div style=\{{ display: 'flex', gap: '2rem' }}>
|
66
|
+
<CodeField shape="default" codeLength={6} />
|
67
|
+
<CodeField shape="segmented" codeLength={6} />
|
68
|
+
</div>
|
69
|
+
</div>
|
70
|
+
);
|
71
|
+
}
|
72
|
+
```
|
73
|
+
|
74
|
+
### Допустимые символы и поведение ячейки при вводе некорректного символа
|
75
|
+
За допустимые символы для ввода отвечает свойство `allowedSymbols`. Задается строкой или регулярным выражением.
|
76
|
+
Библиотека экспортирует наиболее используемые вариации допустимых символов:
|
77
|
+
`import { ONLY_DIGITS_PATTERN, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN } from '@salutejs/{{ package }}';`
|
78
|
+
|
79
|
+
Поведение ячейки при вводе некорректного символа регулируется свойством `itemErrorBehavior`:
|
80
|
+
|
81
|
+
```tsx live
|
82
|
+
import React from 'react';
|
83
|
+
import { CodeField } from '@salutejs/{{ package }}';
|
84
|
+
|
85
|
+
export function App() {
|
86
|
+
return (
|
87
|
+
<div>
|
88
|
+
<CodeField value="123" itemErrorBehavior="remove-symbol" />
|
89
|
+
<CodeField value="123" itemErrorBehavior="keep" />
|
90
|
+
<CodeField value="123" itemErrorBehavior="forbid-enter" />
|
91
|
+
</div>
|
92
|
+
);
|
93
|
+
}
|
94
|
+
```
|
95
|
+
|
96
|
+
### Поведение компонента при вводе некорректного кода и индикация ошибки
|
97
|
+
При заполнении всех полей ввода срабатывает колбэк `onFullCodeEnter`.
|
98
|
+
При неверном вводе кода, поведние компонента управляется с помощью свойства `codeErrorBehavior`.
|
99
|
+
Индикация ошибки происходит с помощью флага `isError` и колбека `setIsError`:
|
100
|
+
|
101
|
+
```tsx live
|
102
|
+
import React, { useState, useRef, Dispatch, SetStateAction } from 'react';
|
103
|
+
import { CodeField } from '@salutejs/{{ package }}';
|
104
|
+
|
105
|
+
export function App() {
|
106
|
+
const [disabledFirst, setDisabledFirst] = useState(false);
|
107
|
+
const [isErrorFirst, setIsErrorFirst] = useState(false);
|
108
|
+
|
109
|
+
const [disabledSecond, setDisabledSecond] = useState(false);
|
110
|
+
const [isErrorSecond, setIsErrorSecond] = useState(false);
|
111
|
+
|
112
|
+
const onFullCodeEnter = (
|
113
|
+
code: string,
|
114
|
+
errorSetter: Dispatch<SetStateAction<boolean>>,
|
115
|
+
disableSetter: Dispatch<SetStateAction<boolean>>
|
116
|
+
) => {
|
117
|
+
disableSetter(true);
|
118
|
+
|
119
|
+
// имитация запроса на сервер
|
120
|
+
setTimeout(() => {
|
121
|
+
disableSetter(false);
|
122
|
+
|
123
|
+
if (code !== '123456') {
|
124
|
+
errorSetter(true);
|
125
|
+
}
|
126
|
+
}, 3000)
|
127
|
+
}
|
128
|
+
|
129
|
+
return (
|
130
|
+
<div style=\{{ flexDirection: 'column', gap: '2rem' }}>
|
131
|
+
<CodeField
|
132
|
+
itemErrorBehavior="remove-symbol"
|
133
|
+
codeErrorBehavior="remove-code"
|
134
|
+
disabled={disabledFirst}
|
135
|
+
isError={isErrorFirst}
|
136
|
+
setIsError={setIsErrorFirst}
|
137
|
+
onFullCodeEnter={(code) => onFullCodeEnter(code, setIsErrorFirst, setDisabledFirst)}
|
138
|
+
/>
|
139
|
+
<CodeField
|
140
|
+
itemErrorBehavior="remove-symbol"
|
141
|
+
codeErrorBehavior="keep"
|
142
|
+
disabled={disabledSecond}
|
143
|
+
isError={isErrorSecond}
|
144
|
+
setIsError={setIsErrorSecond}
|
145
|
+
onFullCodeEnter={(code) => onFullCodeEnter(code, setIsErrorSecond, setDisabledSecond)}
|
146
|
+
/>
|
147
|
+
</div>
|
148
|
+
);
|
149
|
+
}
|
150
|
+
```
|
@@ -0,0 +1,57 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.tokens = exports.classes = void 0;
|
7
|
+
var classes = exports.classes = {
|
8
|
+
itemError: 'codefield-item-error',
|
9
|
+
itemErrorAnimation: 'codefield-item-error-animation',
|
10
|
+
itemErrorFade: 'codefield-item-error-fade',
|
11
|
+
captionError: 'codefield-caption-error',
|
12
|
+
codeError: 'codefield-code-error',
|
13
|
+
codeErrorAnimation: 'codefield-code-error-animation',
|
14
|
+
codeErrorFade: 'codefield-code-error-fade',
|
15
|
+
captionAlignLeft: 'codefield-caption-align-left',
|
16
|
+
hoverEnabled: 'codefield-item-hover-enabled',
|
17
|
+
segmented: 'codefield-shape-segmented',
|
18
|
+
"default": 'codefield-shape-default',
|
19
|
+
disabled: 'codefield-disabled'
|
20
|
+
};
|
21
|
+
var tokens = exports.tokens = {
|
22
|
+
captionGap: '--plasma-codefield-caption-gap',
|
23
|
+
codeItemsGap: '--plasma-codefield-code-item-gap',
|
24
|
+
separatorWidth: '--plasma-codefield-separator-width',
|
25
|
+
codeItemWidth: '--plasma-codefield-item-width',
|
26
|
+
codeItemHeight: '--plasma-codefield-item-height',
|
27
|
+
fontFamily: '--plasma-codefield-font-family',
|
28
|
+
fontStyle: '--plasma-codefield-font-style',
|
29
|
+
fontSize: '--plasma-codefield-font-size',
|
30
|
+
fontWeight: '--plasma-codefield-font-weight',
|
31
|
+
letterSpacing: '--plasma-codefield-letter-spacing',
|
32
|
+
lineHeight: '--plasma-codefield-line-height',
|
33
|
+
captionFontFamily: '--plasma-codefield-caption-font-family',
|
34
|
+
captionFontSize: '--plasma-codefield-caption-font-style',
|
35
|
+
captionFontStyle: '--plasma-codefield-caption-font-size',
|
36
|
+
captionFontWeight: '--plasma-codefield-caption-font-weight',
|
37
|
+
captionLetterSpacing: '--plasma-codefield-caption-letter-spacing',
|
38
|
+
captionLineHeight: '--plasma-codefield-caption-line-height',
|
39
|
+
borderRadius: '--plasma-codefield-code-item-border-radius',
|
40
|
+
borderRadiusSegmented: '--plasma-codefield-code-item-border-radius-segmented',
|
41
|
+
segmentedSideBorderRadius: '--plasma-codefield-code-item-segmented-side-border-radius',
|
42
|
+
captionColor: '--plasma-codefield-caption-color',
|
43
|
+
captionColorError: '--plasma-codefield-caption-color-error',
|
44
|
+
codeColor: '--plasma-codefield-code-color',
|
45
|
+
codeColorError: '--plasma-codefield-code-color-error',
|
46
|
+
backgroundColor: '--plasma-codefield-background-color',
|
47
|
+
backgroundColorHover: '--plasma-codefield-background-color-hover',
|
48
|
+
backgroundColorFocus: '--plasma-codefield-background-color-focus',
|
49
|
+
backgroundErrorColor: '--plasma-codefield-background-error-color',
|
50
|
+
borderWidth: '--plasma-codefield-border-width',
|
51
|
+
borderColor: '--plasma-codefield-border-color',
|
52
|
+
borderColorHover: '--plasma-codefield-border-color-hover',
|
53
|
+
borderColorFocus: '--plasma-codefield-border-color-focus',
|
54
|
+
borderErrorColor: '--plasma-codefield-border-error-color',
|
55
|
+
caretColor: '--plasma-codefield-caret-color',
|
56
|
+
disabledOpacity: '--plasma-codefield-disabled-opacity'
|
57
|
+
};
|
@@ -0,0 +1,50 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
Object.defineProperty(exports, "ONLY_CHARS_PATTERN", {
|
7
|
+
enumerable: true,
|
8
|
+
get: function get() {
|
9
|
+
return _constants.ONLY_CHARS_PATTERN;
|
10
|
+
}
|
11
|
+
});
|
12
|
+
Object.defineProperty(exports, "ONLY_DIGITS_AND_CHARS_PATTERN", {
|
13
|
+
enumerable: true,
|
14
|
+
get: function get() {
|
15
|
+
return _constants.ONLY_DIGITS_AND_CHARS_PATTERN;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
Object.defineProperty(exports, "ONLY_DIGITS_PATTERN", {
|
19
|
+
enumerable: true,
|
20
|
+
get: function get() {
|
21
|
+
return _constants.ONLY_DIGITS_PATTERN;
|
22
|
+
}
|
23
|
+
});
|
24
|
+
Object.defineProperty(exports, "codeFieldClasses", {
|
25
|
+
enumerable: true,
|
26
|
+
get: function get() {
|
27
|
+
return _CodeField2.classes;
|
28
|
+
}
|
29
|
+
});
|
30
|
+
Object.defineProperty(exports, "codeFieldConfig", {
|
31
|
+
enumerable: true,
|
32
|
+
get: function get() {
|
33
|
+
return _CodeField.codeFieldConfig;
|
34
|
+
}
|
35
|
+
});
|
36
|
+
Object.defineProperty(exports, "codeFieldRoot", {
|
37
|
+
enumerable: true,
|
38
|
+
get: function get() {
|
39
|
+
return _CodeField.codeFieldRoot;
|
40
|
+
}
|
41
|
+
});
|
42
|
+
Object.defineProperty(exports, "codeFieldTokens", {
|
43
|
+
enumerable: true,
|
44
|
+
get: function get() {
|
45
|
+
return _CodeField2.tokens;
|
46
|
+
}
|
47
|
+
});
|
48
|
+
var _CodeField = /*#__PURE__*/require("./CodeField");
|
49
|
+
var _CodeField2 = /*#__PURE__*/require("./CodeField.tokens");
|
50
|
+
var _constants = /*#__PURE__*/require("./utils/constants");
|
@@ -0,0 +1,12 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.ONLY_DIGITS_PATTERN = exports.ONLY_DIGITS_AND_CHARS_PATTERN = exports.ONLY_CHARS_PATTERN = exports.FORBIDDEN_KEYS = exports.BACKSPACE_KEY = exports.ANIMATION_TIMEOUT = void 0;
|
7
|
+
var ONLY_DIGITS_PATTERN = exports.ONLY_DIGITS_PATTERN = '^\\d+$';
|
8
|
+
var ONLY_CHARS_PATTERN = exports.ONLY_CHARS_PATTERN = '^[a-zA-Z]+$';
|
9
|
+
var ONLY_DIGITS_AND_CHARS_PATTERN = exports.ONLY_DIGITS_AND_CHARS_PATTERN = '^[a-zA-Z0-9]+$';
|
10
|
+
var FORBIDDEN_KEYS = exports.FORBIDDEN_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Delete'];
|
11
|
+
var BACKSPACE_KEY = exports.BACKSPACE_KEY = 'Backspace';
|
12
|
+
var ANIMATION_TIMEOUT = exports.ANIMATION_TIMEOUT = 300;
|