@redneckz/wildless-cms-uni-blocks 0.10.8 → 0.10.10

package/src/ui-kit/InputRange/InputRange.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useNormalizedInput } from '../../hooks/useNormalizedInput';
 import { clamp } from '../../utils/clamp';
 import { style } from '../../utils/style';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 import { Text } from '../Text/Text';
 import type { InputRangeProps } from './InputRangeProps';
 import { parseDecimal } from './parseDecimal';
@@ -13,8 +14,8 @@ const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
 const DEFAULT_MIN = 1;
 const DEFAULT_MAX = 100;
 
-export const InputRange = JSX<InputRangeProps>(
-  ({
+export const InputRange = JSX<InputRangeProps>((props) => {
+  const {
     className,
     title,
     items = [],
@@ -25,54 +26,47 @@ export const InputRange = JSX<InputRangeProps>(
     value = list[0] || min,
     disabled = false,
     onChange,
-  }) => {
-    const [isFocused, setFocused] = useState(false);
+  } = props;
 
-    const handleChange = useCallback(
-      (e: { target?: { value?: string } }) => {
-        onChange && onChange(parseDecimal(e.target?.value));
-      },
-      [onChange],
-    );
+  const normalizedProps = useNormalizedInput(props, {
+    normalize: (_: number | undefined = 0) =>
+      list.length ? closestValue(list)(_) : clamp(_, min, max),
+    format: toLocalNumberFormat(),
+  });
 
-    const handleFocus = useCallback(() => {
-      setFocused(true);
-    }, []);
+  const handleChange = useCallback(
+    (e: { target?: { value?: string } }) => {
+      onChange && onChange(parseDecimal(e.target?.value));
+    },
+    [onChange],
+  );
 
-    const handleBlur = useCallback(() => {
-      setFocused(false);
-      onChange && onChange(list.length ? closestValue(list)(value) : clamp(value || 0, min, max));
-    }, [onChange, value]);
-
-    return (
-      <div className={className}>
-        <label className="block relative">
-          {title ? (
-            <Text size="text-m" font="font-light" color="text-primary-text">
-              {title}
-            </Text>
-          ) : null}
-          <input
-            className={style(
-              'm-0 mt-2 font-sans text-h3 w-full h-14',
-              'border border-solid border-gray rounded-md outline-none',
-              'p-0 pl-4 box-border',
-              'text-primary-text hover:border-primary-hover focus:border-primary-text',
-              DISABLED_INPUT_CLASSES,
-            )}
-            value={isFocused ? value : addSpacesBetweenNumbers(value)}
-            disabled={disabled}
-            onInput={handleChange as any}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-          {renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })}
-        </label>
-        {renderRangeCaption(items)}
-      </div>
-    );
-  },
-);
+  return (
+    <div className={className}>
+      <label className="block relative">
+        {title ? (
+          <Text size="text-m" font="font-light" color="text-primary-text">
+            {title}
+          </Text>
+        ) : null}
+        <input
+          className={style(
+            'm-0 mt-2 font-sans text-h3 w-full h-14',
+            'border border-solid border-gray rounded-md outline-none',
+            'p-0 pl-4 box-border',
+            'text-primary-text hover:border-primary-hover focus:border-primary-text',
+            DISABLED_INPUT_CLASSES,
+          )}
+          disabled={disabled}
+          onInput={handleChange as any}
+          {...normalizedProps}
+        />
+        {renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })}
+      </label>
+      {renderRangeCaption(items)}
+    </div>
+  );
+});
 
 const closestValue = (list: number[]) => (_: number) =>
   list.reduce((prev, curr) => (Math.abs(curr - _) < Math.abs(prev - _) ? curr : prev));

package/src/ui-kit/InputRange/InputRangeProps.ts

@@ -1,14 +1,12 @@
+import type { InputProps } from '../Input/InputProps';
 import type { ListContent } from '../List/ListContent';
 
-export interface InputRangeProps extends ListContent {
-  className?: string;
+export interface InputRangeProps extends ListContent, InputProps<number> {
   items?: string[];
   min?: number;
   max?: number;
   list?: number[];
   step?: number;
-  value?: number;
   title?: string;
   disabled?: boolean;
-  onChange?: (value: number) => void;
 }

package/src/ui-kit/LinkButton/LinkButton.fixture.tsx

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import { LinkButton } from './LinkButton';
 
 export default {

package/src/ui-kit/List/List.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { List } from './List';
 
 const items = ['List Item #1', 'List Item #2', 'List Item #3', 'List Item #4'];

package/src/ui-kit/LocationDialog/LocationDialog.fixture.tsx

@@ -1,6 +1,7 @@
+import '../../setup-fixture';
+
 import type { Picture } from '../../model/Picture';
 import type { ForeignOffice } from '../../services/sitemap/SitemapData';
-import '../../setup-fixture';
 import { LocationDialog } from './LocationDialog';
 
 const belarus: Picture = {

package/src/ui-kit/NumberInput/NumberInput.fixture.tsx

@@ -0,0 +1,31 @@
+import '../../setup-fixture';
+
+import { useState } from 'react';
+import { NumberInput } from './NumberInput';
+
+const ComponentWithInput = ({ fractionDigits = 0 }: { fractionDigits?: number }) => {
+  const [value, setValue] = useState('123456.789');
+
+  return (
+    <NumberInput
+      className="col-span-2 mt-2"
+      label="Числовое поле"
+      fractionDigits={fractionDigits}
+      value={value}
+      onChange={(_) => setValue(_)}
+    />
+  );
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ComponentWithInput fractionDigits={2} />
+    </div>
+  ),
+  integer: (
+    <div className="container grid grid-cols-12">
+      <ComponentWithInput />
+    </div>
+  ),
+};

package/src/ui-kit/NumberInput/NumberInput.tsx

@@ -0,0 +1,35 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useNormalizedInput } from '../../hooks/useNormalizedInput';
+import { clamp } from '../../utils/clamp';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Input } from '../Input/Input';
+import type { InputProps } from '../Input/InputProps';
+
+export interface NumberInputProps extends InputProps<string> {
+  min?: number;
+  max?: number;
+  defaultValue?: string;
+  fractionDigits?: number;
+}
+
+export const NumberInput = JSX<NumberInputProps>((props) => {
+  const { onChange, min, max, defaultValue = '0', fractionDigits = 0, ...inputProps } = props;
+  const normalizedProps = useNormalizedInput(props, {
+    normalize: (_: string | undefined = defaultValue) =>
+      min && max ? String(clamp(Number(sanitizeNumberStr(_)), min, max)) : sanitizeNumberStr(_),
+    format: toLocalNumberFormat(fractionDigits),
+  });
+
+  const handleChange = useCallback(
+    (_: string) => onChange && onChange(sanitizeNumberStr(_)),
+    [onChange],
+  );
+
+  return <Input onChange={handleChange} {...inputProps} {...normalizedProps} />;
+});
+
+const sanitizeNumberStr = (_ = ''): string =>
+  _.replaceAll(',', '.')
+    .replace(/[^\d.]/g, '')
+    .replace(/([^.]*\.[^.]*)\./, '$1');

package/src/ui-kit/PhoneInput/PhoneInput.tsx

@@ -6,13 +6,12 @@ import { normalizePhone } from './normalizePhone';
 
 export const PhoneInput = JSX<InputProps>(({ children, onChange, ...inputProps }) => {
   const handleChange = useCallback(
-    ({ target: { value } }: { target: { value?: string } }) =>
-      onChange && onChange(normalizePhone(value || '')),
+    (value: string) => onChange && onChange(normalizePhone(value)),
     [onChange],
   );
 
   return (
-    <Input onInput={handleChange} onFocus={handleChange} {...inputProps}>
+    <Input onChange={handleChange} onFocus={handleChange} {...inputProps}>
       {children}
     </Input>
   );

package/src/ui-kit/RadioButtonGroup/RadioButtonGroup.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { Text } from '../Text/Text';
 import { RadioButtonGroup } from './RadioButtonGroup';
 

package/src/ui-kit/RichText/RichText.fixture.tsx

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import { RichText } from './RichText';
 
 const HTML = `

package/src/ui-kit/SearchDialog/SearchDialog.tsx

@@ -19,7 +19,7 @@ export const SEARCH_DIALOG_ID = 'search';
 export const SearchDialog = JSX<SearchDialogProps>(({ topItems }) => {
   const dialogProps = useDialogProps(SEARCH_DIALOG_ID);
 
-  const basePathList = topItems?.map((_) => _.href || '/');
+  const basePathList = useMemo(() => topItems?.map((_) => _.href || '/'), [topItems]);
   const [searchResult, searchInputProps] = useSearch({
     basePathList,
     initialQuery: dialogProps.message,

package/src/ui-kit/Select/Select.fixture.tsx

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import { Select } from './Select';
 
 const rates = [

package/src/ui-kit/Sitemap/Sitemap.tsx

@@ -3,6 +3,7 @@ import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 import { projectSettings } from '../../ProjectSettings';
 import type { TopMenuItemProps } from '../../services/sitemap/SitemapData';
+import { appendSlash } from '../../utils/appendSlash';
 import { style } from '../../utils/style';
 
 export interface SitemapProps {
@@ -34,7 +35,7 @@ const renderColumn = (menuItem: TopMenuItemProps & { onClick: () => void }, inde
         {text || `Раздел ${index}`}
       </a>
       {items?.map((_, i) => (
-        <ColumnItem key={String(i)} {..._} basePath={href} index={i} />
+        <ColumnItem key={String(i)} {..._} basePath={appendSlash(href)} index={i} />
       ))}
     </div>
   );

package/src/ui-kit/SlideCheckbox/SlideCheckbox.fixture.tsx

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import { SlideCheckbox } from './SlideCheckbox';
 
 export default {

package/src/ui-kit/SlideCheckboxGroup/SlideCheckboxGroup.tsx

@@ -20,14 +20,18 @@ interface MultipleSlideCheckboxGroupProps extends ControlProps<string[]> {
 export const SlideCheckboxGroup = JSX<SlideCheckboxGroupProps | MultipleSlideCheckboxGroupProps>(
   ({ value, onChange, items = [], multiple }) => {
     const handleChange = (newValue: string) => {
+      if (!onChange) {
+        return;
+      }
+
       if (multiple) {
         const hasAlready = value?.includes(newValue);
-        onChange &&
-          onChange(
-            hasAlready ? value?.filter((v) => v !== newValue) : [...(value || []), newValue],
-          );
+
+        onChange(
+          hasAlready ? (value || []).filter((v) => v !== newValue) : [...(value || []), newValue],
+        );
       } else {
-        onChange && onChange(value === newValue ? undefined : newValue);
+        onChange(value === newValue ? '' : newValue);
       }
     };
 

package/src/ui-kit/SwipeListControl/SwipeListControl.fixture.mobile.tsx

@@ -1,5 +1,6 @@
-import type { VNode } from '../../model/VNode';
 import '../../setup-fixture';
+
+import type { VNode } from '../../model/VNode';
 import { SwipeListControl } from './SwipeListControl';
 
 const renderElement = (_: any, i: number): VNode => (

package/src/ui-kit/SwipeListControl/SwipeListControl.fixture.tsx

@@ -1,5 +1,6 @@
-import type { VNode } from '../../model/VNode';
 import '../../setup-fixture';
+
+import type { VNode } from '../../model/VNode';
 import { SwipeListControl } from './SwipeListControl';
 
 const renderElement = (_: any, i: number): VNode => (

package/src/ui-kit/Tags/Tags.fixture.tsx

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import { Tags } from './Tags';
 
 const tags = ['Tag #1', 'Tag #2', 'Tag #3', 'Tag #4'];

package/src/utils/appendSlash.ts

@@ -0,0 +1,2 @@
+export const appendSlash = (url: string | undefined) =>
+  url && !url.endsWith('/') ? `${url}/` : url;

package/src/utils/identity.ts

@@ -0,0 +1 @@
+export const identity = <T>(_: T) => _;

package/src/utils/toLocalNumberFormat.ts

@@ -0,0 +1,7 @@
+export const toLocalNumberFormat =
+  (fractionDigits = 0) =>
+  (_: string | number | undefined = 0): string =>
+    new Intl.NumberFormat('ru-RU', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: fractionDigits,
+    }).format(Number(_) || 0);

package/tailwind.config.cjs

@@ -56,7 +56,7 @@ module.exports = {
         mohave: ['Mohave', ...defaultTheme.fontFamily.sans],
       },
       padding: {
-        'default': '3rem',
+        default: '3rem',
       },
       fontSize: {
         'm-title': ['1.375rem', '1.8125rem'], // 22px 29px // Временно оставлен до готовности нового мобильного дизайна

package/bundle/ui-kit/CurrencyInput/CurrencyInputProps.d.ts

@@ -1,5 +0,0 @@
-import type { InputProps } from '../Input/InputProps';
-export declare type CurrencyInputProps = InputProps & {
-    minValue?: number;
-    maxValue?: number;
-};

package/bundle/utils/addSpacesBetweenNumbers.d.ts

@@ -1 +0,0 @@
-export declare const addSpacesBetweenNumbers: (number: number) => string;

package/dist/ui-kit/CurrencyInput/CurrencyInputProps.d.ts

@@ -1,5 +0,0 @@
-import type { InputProps } from '../Input/InputProps';
-export declare type CurrencyInputProps = InputProps & {
-    minValue?: number;
-    maxValue?: number;
-};

package/dist/ui-kit/CurrencyInput/CurrencyInputProps.js

@@ -1,2 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=CurrencyInputProps.js.map

package/dist/ui-kit/CurrencyInput/CurrencyInputProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CurrencyInputProps.js","sourceRoot":"","sources":["../../../src/ui-kit/CurrencyInput/CurrencyInputProps.ts"],"names":[],"mappings":""}

package/dist/utils/addSpacesBetweenNumbers.d.ts

@@ -1 +0,0 @@
-export declare const addSpacesBetweenNumbers: (number: number) => string;

package/dist/utils/addSpacesBetweenNumbers.js

@@ -1,5 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addSpacesBetweenNumbers = void 0;
-const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', {}).format(number);
-exports.addSpacesBetweenNumbers = addSpacesBetweenNumbers;
-//# sourceMappingURL=addSpacesBetweenNumbers.js.map

package/dist/utils/addSpacesBetweenNumbers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"addSpacesBetweenNumbers.js","sourceRoot":"","sources":["../../src/utils/addSpacesBetweenNumbers.ts"],"names":[],"mappings":";;AAAO,MAAM,uBAAuB,GAAG,CAAC,MAAc,EAAE,EAAE,CACxD,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AADvC,QAAA,uBAAuB,2BACgB"}

package/lib/ui-kit/CurrencyInput/CurrencyInputProps.d.ts

@@ -1,5 +0,0 @@
-import type { InputProps } from '../Input/InputProps';
-export declare type CurrencyInputProps = InputProps & {
-    minValue?: number;
-    maxValue?: number;
-};

package/lib/ui-kit/CurrencyInput/CurrencyInputProps.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=CurrencyInputProps.js.map

package/lib/ui-kit/CurrencyInput/CurrencyInputProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CurrencyInputProps.js","sourceRoot":"","sources":["../../../src/ui-kit/CurrencyInput/CurrencyInputProps.ts"],"names":[],"mappings":""}

package/lib/utils/addSpacesBetweenNumbers.d.ts

@@ -1 +0,0 @@
-export declare const addSpacesBetweenNumbers: (number: number) => string;

package/lib/utils/addSpacesBetweenNumbers.js

@@ -1,2 +0,0 @@
-export const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', {}).format(number);
-//# sourceMappingURL=addSpacesBetweenNumbers.js.map

package/lib/utils/addSpacesBetweenNumbers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"addSpacesBetweenNumbers.js","sourceRoot":"","sources":["../../src/utils/addSpacesBetweenNumbers.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,MAAc,EAAE,EAAE,CACxD,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC"}

package/mobile/bundle/ui-kit/CurrencyInput/CurrencyInputProps.d.ts

@@ -1,5 +0,0 @@
-import type { InputProps } from '../Input/InputProps';
-export declare type CurrencyInputProps = InputProps & {
-    minValue?: number;
-    maxValue?: number;
-};

package/mobile/bundle/utils/addSpacesBetweenNumbers.d.ts

@@ -1 +0,0 @@
-export declare const addSpacesBetweenNumbers: (number: number) => string;

package/mobile/dist/ui-kit/CurrencyInput/CurrencyInputProps.d.ts

@@ -1,5 +0,0 @@
-import type { InputProps } from '../Input/InputProps';
-export declare type CurrencyInputProps = InputProps & {
-    minValue?: number;
-    maxValue?: number;
-};

package/mobile/dist/ui-kit/CurrencyInput/CurrencyInputProps.js

@@ -1,2 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=CurrencyInputProps.js.map

package/mobile/dist/ui-kit/CurrencyInput/CurrencyInputProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CurrencyInputProps.js","sourceRoot":"","sources":["../../../src/ui-kit/CurrencyInput/CurrencyInputProps.ts"],"names":[],"mappings":""}

package/mobile/dist/utils/addSpacesBetweenNumbers.d.ts

@@ -1 +0,0 @@
-export declare const addSpacesBetweenNumbers: (number: number) => string;

package/mobile/dist/utils/addSpacesBetweenNumbers.js

@@ -1,5 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addSpacesBetweenNumbers = void 0;
-const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', {}).format(number);
-exports.addSpacesBetweenNumbers = addSpacesBetweenNumbers;
-//# sourceMappingURL=addSpacesBetweenNumbers.js.map

package/mobile/dist/utils/addSpacesBetweenNumbers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"addSpacesBetweenNumbers.js","sourceRoot":"","sources":["../../src/utils/addSpacesBetweenNumbers.ts"],"names":[],"mappings":";;AAAO,MAAM,uBAAuB,GAAG,CAAC,MAAc,EAAE,EAAE,CACxD,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AADvC,QAAA,uBAAuB,2BACgB"}

package/mobile/lib/ui-kit/CurrencyInput/CurrencyInputProps.d.ts

@@ -1,5 +0,0 @@
-import type { InputProps } from '../Input/InputProps';
-export declare type CurrencyInputProps = InputProps & {
-    minValue?: number;
-    maxValue?: number;
-};

package/mobile/lib/ui-kit/CurrencyInput/CurrencyInputProps.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=CurrencyInputProps.js.map

package/mobile/lib/ui-kit/CurrencyInput/CurrencyInputProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CurrencyInputProps.js","sourceRoot":"","sources":["../../../src/ui-kit/CurrencyInput/CurrencyInputProps.ts"],"names":[],"mappings":""}

package/mobile/lib/utils/addSpacesBetweenNumbers.d.ts

@@ -1 +0,0 @@
-export declare const addSpacesBetweenNumbers: (number: number) => string;

package/mobile/lib/utils/addSpacesBetweenNumbers.js

@@ -1,2 +0,0 @@
-export const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', {}).format(number);
-//# sourceMappingURL=addSpacesBetweenNumbers.js.map

package/mobile/lib/utils/addSpacesBetweenNumbers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"addSpacesBetweenNumbers.js","sourceRoot":"","sources":["../../src/utils/addSpacesBetweenNumbers.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,MAAc,EAAE,EAAE,CACxD,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC"}

package/mobile/src/components/Gallery/Gallery.ui.json

@@ -1 +0,0 @@
-{}

package/mobile/src/components/MiniGallery/MiniGallery.ui.json

@@ -1 +0,0 @@
-{}

package/mobile/src/ui-kit/CurrencyInput/CurrencyInputProps.ts

@@ -1,6 +0,0 @@
-import type { InputProps } from '../Input/InputProps';
-
-export type CurrencyInputProps = InputProps & {
-  minValue?: number;
-  maxValue?: number;
-};

package/mobile/src/utils/addSpacesBetweenNumbers.ts

@@ -1,2 +0,0 @@
-export const addSpacesBetweenNumbers = (number: number) =>
-  new Intl.NumberFormat('ru-RU', {}).format(number);

package/src/components/Gallery/Gallery.ui.json

@@ -1 +0,0 @@
-{}

package/src/components/MiniGallery/MiniGallery.ui.json

@@ -1 +0,0 @@
-{}

package/src/ui-kit/CurrencyInput/CurrencyInputProps.ts

@@ -1,6 +0,0 @@
-import type { InputProps } from '../Input/InputProps';
-
-export type CurrencyInputProps = InputProps & {
-  minValue?: number;
-  maxValue?: number;
-};

package/src/utils/addSpacesBetweenNumbers.ts

@@ -1,2 +0,0 @@
-export const addSpacesBetweenNumbers = (number: number) =>
-  new Intl.NumberFormat('ru-RU', {}).format(number);