@cloud-ru/uikit-product-mobile-fields 0.11.24 → 0.11.25

package/dist/cjs/helperComponents/FieldContainerPrivate/styles.module.css

@@ -0,0 +1,219 @@
+.container{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  box-sizing:border-box;
+  border-style:solid;
+}
+.container[data-validation=default]{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+.container[data-validation=default]:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-primary-decor-hovered, #b3deca);
+}
+.container[data-validation=default]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=default]:not([data-readonly])[data-focused]:not([data-disabled]){
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-primary-accent-default, #389f74);
+  outline-color:var(--sys-primary-decor-activated, #99d7ba);
+}
+.container[data-validation=error]{
+  background-color:var(--sys-red-background1-level, #fef6f3);
+  border-color:var(--sys-red-decor-default, #fdd6cd);
+}
+.container[data-validation=error]:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-red-decor-hovered, #fac1b3);
+}
+.container[data-validation=error]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=error]:not([data-readonly])[data-focused]:not([data-disabled]){
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-red-accent-default, #cb3f3e);
+  outline-color:var(--sys-red-decor-activated, #fbab99);
+}
+.container[data-validation=warning]{
+  background-color:var(--sys-yellow-background1-level, #fcfbef);
+  border-color:var(--sys-yellow-decor-default, #f0dfb1);
+}
+.container[data-validation=warning]:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-yellow-decor-hovered, #ead49a);
+}
+.container[data-validation=warning]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=warning]:not([data-readonly])[data-focused]:not([data-disabled]){
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-yellow-accent-default, #e2b134);
+  outline-color:var(--sys-yellow-decor-activated, #e6c878);
+}
+.container[data-validation=success]{
+  background-color:var(--sys-green-background1-level, #f6fdf3);
+  border-color:var(--sys-green-decor-default, #d2ead0);
+}
+.container[data-validation=success]:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-green-decor-hovered, #c0e1ba);
+}
+.container[data-validation=success]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=success]:not([data-readonly])[data-focused]:not([data-disabled]){
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-green-accent-default, #57b762);
+  outline-color:var(--sys-green-decor-activated, #a8d1a2);
+}
+.container[data-size=s]{
+  border-radius:var(--radius-fields-s, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+}
+.container[data-size=s],
+.container[data-size=s] input,
+.container[data-size=s] select,
+.container[data-size=s] textarea,
+.container[data-size=s] span{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.container[data-size=s][data-variant=single-line-container]{
+  border-radius:var(--radius-fields-s, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-left:var(--space-fields-single-line-container-s-left, 7px);
+  gap:var(--space-fields-single-line-container-s-gap, 4px);
+  padding-right:var(--space-fields-single-line-container-s-right, 7px);
+  height:var(--size-fields-s, 32px);
+}
+.container[data-size=s][data-variant=multi-line-container]{
+  border-radius:var(--radius-fields-s, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-top:var(--space-fields-multi-line-container-s-top, 7px);
+  padding-bottom:var(--space-fields-multi-line-container-s-bottom, 2px);
+  padding-left:var(--space-fields-multi-line-container-s-left, 7px);
+  padding-right:var(--space-fields-multi-line-container-s-right, 2px);
+}
+.container[data-size=m]{
+  border-radius:var(--radius-fields-m, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+}
+.container[data-size=m],
+.container[data-size=m] input,
+.container[data-size=m] select,
+.container[data-size=m] textarea,
+.container[data-size=m] span{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.container[data-size=m][data-variant=single-line-container]{
+  border-radius:var(--radius-fields-m, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-left:var(--space-fields-single-line-container-m-left, 9px);
+  gap:var(--space-fields-single-line-container-m-gap, 4px);
+  padding-right:var(--space-fields-single-line-container-m-right, 9px);
+  height:var(--size-fields-m, 40px);
+}
+.container[data-size=m][data-variant=multi-line-container]{
+  border-radius:var(--radius-fields-m, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-top:var(--space-fields-multi-line-container-m-top, 9px);
+  padding-bottom:var(--space-fields-multi-line-container-m-bottom, 2px);
+  padding-left:var(--space-fields-multi-line-container-m-left, 9px);
+  padding-right:var(--space-fields-multi-line-container-m-right, 2px);
+}
+.container[data-size=l]{
+  border-radius:var(--radius-fields-l, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+}
+.container[data-size=l],
+.container[data-size=l] input,
+.container[data-size=l] select,
+.container[data-size=l] textarea,
+.container[data-size=l] span{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+}
+.container[data-size=l][data-variant=single-line-container]{
+  border-radius:var(--radius-fields-l, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-left:var(--space-fields-single-line-container-l-left, 11px);
+  gap:var(--space-fields-single-line-container-l-gap, 8px);
+  padding-right:var(--space-fields-single-line-container-l-right, 11px);
+  height:var(--size-fields-l, 48px);
+}
+.container[data-size=l][data-variant=multi-line-container]{
+  border-radius:var(--radius-fields-l, 4px);
+  border-width:var(--border-width-fields-single, 1px);
+  padding-top:var(--space-fields-multi-line-container-l-top, 11px);
+  padding-bottom:var(--space-fields-multi-line-container-l-bottom, 2px);
+  padding-left:var(--space-fields-multi-line-container-l-left, 11px);
+  padding-right:var(--space-fields-multi-line-container-l-right, 2px);
+}
+.container[data-selectable],
+.container[data-selectable] input,
+.container[data-selectable] select,
+.container[data-selectable] textarea,
+.container[data-selectable] span{
+  cursor:pointer;
+}
+.container[data-readonly],
+.container[data-readonly] input,
+.container[data-readonly] select,
+.container[data-readonly] textarea,
+.container[data-readonly] span{
+  cursor:default;
+}
+.container[data-readonly], .container[data-readonly]:hover{
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+}
+.container[data-readonly]:focus-within, .container[data-readonly][data-focused]{
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  outline:none;
+}
+.container[data-disabled],
+.container[data-disabled] input,
+.container[data-disabled] select,
+.container[data-disabled] textarea,
+.container[data-disabled] span{
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+.container[data-disabled], .container[data-disabled]:focus-within, .container[data-disabled][data-focused], .container[data-disabled]:hover{
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  outline:none;
+}
+
+.prefix{
+  display:inline-flex;
+  flex-shrink:0;
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+
+.postfix{
+  display:inline-flex;
+  flex-shrink:0;
+  gap:var(--space-fields-postfix-gap, 4px);
+}

package/dist/cjs/helperComponents/ItemContent/ItemContent.d.ts

@@ -0,0 +1,9 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+export type ItemContentProps = WithSupportProps<{
+    option: string | number;
+    caption?: string | number;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare function ItemContent({ caption, description, option, className, disabled, ...rest }: ItemContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/ItemContent/ItemContent.js

@@ -0,0 +1,25 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemContent = ItemContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@snack-uikit/utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ItemContent(_a) {
+    var { caption, description, option, className, disabled } = _a, rest = __rest(_a, ["caption", "description", "option", "className", "disabled"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.content, className) }, (0, utils_1.extractSupportProps)(rest), { "data-size": 'l', "data-disabled": disabled || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.label, children: (0, jsx_runtime_1.jsx)("span", { "data-test-id": 'list__base-item-option', children: option }) }), caption && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.caption, children: caption })] }), description && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)("span", { "data-test-id": 'list__base-item-description', children: description }) }))] })));
+}

package/dist/cjs/helperComponents/ItemContent/index.d.ts

@@ -0,0 +1 @@
+export * from './ItemContent';

package/dist/cjs/helperComponents/ItemContent/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ItemContent"), exports);

package/dist/cjs/helperComponents/ItemContent/styles.module.css

@@ -0,0 +1,122 @@
+.headline{
+  display:flex;
+}
+
+.label{
+  overflow:hidden;
+  flex:1;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.caption{
+  overflow:hidden;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.content{
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}
+.content[data-size=s] .headline{
+  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=s] .label{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  display:flex;
+  align-items:center;
+}
+.content[data-size=s] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=s] .description{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .headline{
+  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=m] .label{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  display:flex;
+  align-items:center;
+}
+.content[data-size=m] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .description{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=l] .headline{
+  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=l] .label{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+  display:flex;
+  align-items:center;
+}
+.content[data-size=l] .caption{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-size=l] .description{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-disabled] .label,
+.content[data-disabled] .description,
+.content[data-disabled] .caption{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}

package/dist/cjs/helperComponents/index.d.ts

@@ -0,0 +1,3 @@
+export * from './FieldContainerPrivate';
+export * from './ButtonCopyValue';
+export * from './ItemContent';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FieldContainerPrivate"), exports);
+__exportStar(require("./ButtonCopyValue"), exports);
+__exportStar(require("./ItemContent"), exports);

package/dist/cjs/hooks/dateHandlers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useDateField';
+export * from './useFocusHandlers';
+export * from './useHandlers';

package/dist/cjs/hooks/dateHandlers/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useDateField"), exports);
+__exportStar(require("./useFocusHandlers"), exports);
+__exportStar(require("./useHandlers"), exports);

package/dist/cjs/hooks/dateHandlers/useDateField.d.ts

@@ -0,0 +1,28 @@
+import { ChangeEvent, FocusEventHandler, KeyboardEvent, RefObject } from 'react';
+import { TimePickerProps } from '@snack-uikit/calendar';
+import { FocusSlot } from '../../constants';
+import { Mode, TimeMode } from '../../types';
+type BaseProps = {
+    inputRef: RefObject<HTMLInputElement>;
+    readonly?: boolean;
+    locale?: Intl.Locale;
+    setIsOpen(v: boolean): void;
+    showSeconds?: boolean;
+};
+type UseDateFieldProps = ({
+    mode: Mode;
+    onChange?(value: Date | undefined): void;
+} & BaseProps) | ({
+    mode: TimeMode;
+    onChange?: TimePickerProps['onChangeValue'];
+} & BaseProps);
+export declare function useDateField({ inputRef, onChange, readonly, locale, setIsOpen, mode, showSeconds, }: UseDateFieldProps): {
+    handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    handleChange: (value: string, e?: ChangeEvent<HTMLInputElement> | undefined) => void;
+    handleClick: () => void;
+    setInputFocus: (focusSlot?: FocusSlot) => void;
+    value: string | undefined;
+    mask: string;
+    handleBlur: FocusEventHandler<HTMLInputElement>;
+};
+export {};

package/dist/cjs/hooks/dateHandlers/useDateField.js

@@ -0,0 +1,197 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDateField = useDateField;
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const dateFields_1 = require("../../utils/dateFields");
+const useDateFieldHelpersForMode_1 = require("./useDateFieldHelpersForMode");
+function useDateField({ inputRef, onChange, readonly, locale = constants_1.DEFAULT_LOCALE, setIsOpen, mode, showSeconds, }) {
+    var _a;
+    const dateTimeMode = mode === constants_1.MODES.DateTime && !showSeconds ? constants_1.NO_SECONDS_MODE : mode;
+    const slotsInfo = constants_1.SLOTS[dateTimeMode];
+    const mask = constants_1.MASK[dateTimeMode][locale.baseName] || constants_1.MASK[dateTimeMode][constants_1.DEFAULT_LOCALE.baseName];
+    const slotsPlaceholder = constants_1.SLOTS_PLACEHOLDER[dateTimeMode][locale.baseName] || constants_1.SLOTS_PLACEHOLDER[dateTimeMode][constants_1.DEFAULT_LOCALE.baseName];
+    const slotOrder = constants_1.SLOT_ORDER[dateTimeMode];
+    const { getNextSlotKey, getPrevSlotKey, getSlotKeyFromIndex, setFocus, updateSlot, getSlot, isLikeDate, isAllSelected, tryToCompleteInput, isValidInput, } = (0, useDateFieldHelpersForMode_1.useDateFieldHelpersForMode)({ inputRef, mode: dateTimeMode });
+    const focusSlotKey = (0, react_1.useMemo)(() => slotOrder[0], [slotOrder]);
+    const focusSlotRef = (0, react_1.useRef)(focusSlotKey);
+    const setInputFocus = (0, react_1.useCallback)((focusSlot) => {
+        if (!inputRef.current || readonly) {
+            return;
+        }
+        if ((0, utils_1.isBrowser)() && document.activeElement !== inputRef.current) {
+            focusSlotRef.current = focusSlot || focusSlotKey;
+            inputRef.current.focus();
+            return;
+        }
+        const focusSlotValue = focusSlot || focusSlotRef.current;
+        if (isLikeDate() && focusSlotValue === focusSlotKey) {
+            return;
+        }
+        if (!inputRef.current.value) {
+            inputRef.current.value = mask;
+            setFocus(focusSlotKey);
+            return;
+        }
+        if (focusSlot !== 'auto') {
+            setFocus(focusSlotValue);
+            return;
+        }
+        const slotKey = getSlotKeyFromIndex(inputRef.current.selectionStart);
+        if (slotKey) {
+            const { start, end } = slotsInfo[slotKey];
+            inputRef.current.setSelectionRange(start, end);
+        }
+    }, [inputRef, readonly, isLikeDate, focusSlotKey, getSlotKeyFromIndex, mask, setFocus, slotsInfo]);
+    const handleClick = (0, react_1.useCallback)(() => {
+        setInputFocus('auto');
+    }, [setInputFocus]);
+    const handleChange = () => {
+        var _a;
+        onChange && isLikeDate() && onChange((0, dateFields_1.parseDate)(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || ''));
+    };
+    const checkInputAndGoNext = (0, react_1.useCallback)((slotKey) => {
+        var _a, _b;
+        if (slotKey === slotOrder[slotOrder.length - 1] && tryToCompleteInput()) {
+            return;
+        }
+        if (isValidInput()) {
+            setFocus(getNextSlotKey(slotKey));
+            return;
+        }
+        switch (slotKey) {
+            case constants_1.SlotKey.Day:
+                updateSlot(constants_1.SlotKey.Month, (_a = slotsPlaceholder === null || slotsPlaceholder === void 0 ? void 0 : slotsPlaceholder[constants_1.SlotKey.Month]) !== null && _a !== void 0 ? _a : '');
+                setFocus(constants_1.SlotKey.Month);
+                return;
+            case constants_1.SlotKey.Year:
+            case constants_1.SlotKey.Month:
+                updateSlot(constants_1.SlotKey.Day, (_b = slotsPlaceholder === null || slotsPlaceholder === void 0 ? void 0 : slotsPlaceholder[constants_1.SlotKey.Day]) !== null && _b !== void 0 ? _b : '');
+                setFocus(constants_1.SlotKey.Day);
+                return;
+            default:
+                setFocus(getNextSlotKey(slotKey));
+        }
+    }, [slotOrder, tryToCompleteInput, isValidInput, setFocus, getNextSlotKey, updateSlot, slotsPlaceholder]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (inputRef.current && !readonly) {
+            if (e.key !== 'Tab') {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            if (e.key !== 'ArrowDown') {
+                setIsOpen(false);
+            }
+            if (e.key === 'Escape') {
+                inputRef.current.blur();
+                return;
+            }
+            if (e.key === 'Enter') {
+                tryToCompleteInput();
+            }
+            const clickIndex = inputRef.current.selectionStart;
+            const slotKey = getSlotKeyFromIndex(clickIndex);
+            if (slotKey) {
+                const value = getSlot(slotKey);
+                const { max } = slotsInfo[slotKey];
+                const numberValue = Number(value) || 0;
+                if (e.key === 'ArrowRight') {
+                    if (isAllSelected() || slotKey === slotOrder[slotOrder.length - 1]) {
+                        inputRef.current.selectionStart = inputRef.current.value.length;
+                        return;
+                    }
+                    setFocus(getNextSlotKey(slotKey));
+                    return;
+                }
+                if (e.key === 'ArrowLeft') {
+                    setFocus(getPrevSlotKey(slotKey));
+                    return;
+                }
+                if (e.key === 'Backspace') {
+                    if (isAllSelected()) {
+                        inputRef.current.value = mask;
+                        setFocus(focusSlotKey);
+                    }
+                    else {
+                        updateSlot(slotKey, (_a = slotsPlaceholder[slotKey]) !== null && _a !== void 0 ? _a : '');
+                    }
+                }
+                if (/^\d+$/.test(e.key)) {
+                    const slotValue = parseInt(numberValue.toString() + e.key, 10) || 0;
+                    const valueLength = slotValue.toString().length;
+                    const maxLength = max.toString().length;
+                    if (valueLength < maxLength) {
+                        slotValue && updateSlot(slotKey, slotValue);
+                        if (slotValue * 10 > max) {
+                            checkInputAndGoNext(slotKey);
+                        }
+                    }
+                    else if (valueLength > maxLength) {
+                        if (Number(e.key) * 10 > max) {
+                            updateSlot(slotKey, e.key);
+                            checkInputAndGoNext(slotKey);
+                        }
+                        else {
+                            Number(e.key) && updateSlot(slotKey, e.key);
+                        }
+                    }
+                    else {
+                        if (slotValue <= max) {
+                            updateSlot(slotKey, slotValue);
+                            checkInputAndGoNext(slotKey);
+                        }
+                        else {
+                            if (Number(e.key) * 10 > max) {
+                                updateSlot(slotKey, e.key);
+                                checkInputAndGoNext(slotKey);
+                            }
+                            else {
+                                Number(e.key) && updateSlot(slotKey, e.key);
+                            }
+                        }
+                    }
+                }
+                const newDate = (0, dateFields_1.parseDate)(isLikeDate() ? inputRef.current.value : '');
+                onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
+            }
+        }
+    }, [
+        inputRef,
+        readonly,
+        getSlotKeyFromIndex,
+        setIsOpen,
+        tryToCompleteInput,
+        getSlot,
+        slotsInfo,
+        isLikeDate,
+        onChange,
+        isAllSelected,
+        slotOrder,
+        setFocus,
+        getNextSlotKey,
+        getPrevSlotKey,
+        mask,
+        focusSlotKey,
+        updateSlot,
+        slotsPlaceholder,
+        checkInputAndGoNext,
+    ]);
+    const handleBlur = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!readonly && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) === mask) {
+            inputRef.current.value = '';
+        }
+        focusSlotRef.current = focusSlotKey;
+    }, [inputRef, mask, readonly, focusSlotKey]);
+    return {
+        handleKeyDown,
+        handleChange,
+        handleClick,
+        setInputFocus,
+        value: (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value,
+        mask,
+        handleBlur,
+    };
+}