@redneckz/wildless-cms-uni-blocks 0.5.10 → 0.5.12

package/mobile/src/ui-kit/CurrencyInput/CurrencyInput.tsx

@@ -1,46 +1,47 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { clamp } from '../../utils/clamp';
+import { adjustValue, localNumberFormat } from './adjustValue ';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { Input } from '../Input/Input';
 import type { CurrencyInputProps } from './CurrencyInputProps';
 
 export const CurrencyInput = JSX<CurrencyInputProps>(
-  ({
-    className = '',
-    label,
-    onChange,
-    value = '',
-    minValue = 0,
-    maxValue = 300000,
-    ...inputProps
-  }) => {
-    const handleChange = (e: any) => {
-      if (!onChange) {
-        return;
-      }
-
-      const newValue =
-        e.target.value === '' ? '' : String(clamp(e.target.value as number, minValue, maxValue));
+  ({ className = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
+    const handleChange = useCallback(
+      (inputValue: string) => {
+        if (!onChange) {
+          return;
+        }
+        const adjustedVal = adjustValue(inputValue);
+        const clampVal = getClampValue(adjustedVal, clamp(Number(adjustedVal), minValue, maxValue));
+        onChange(String(clampVal));
+      },
+      [onChange],
+    );
 
-      onChange(newValue);
-    };
+    const handleBlur = useCallback(
+      (inputValue: string) => {
+        if (!onChange) {
+          return;
+        }
+        onChange(localNumberFormat(inputValue));
+      },
+      [onChange],
+    );
 
     return (
-      <div className={className}>
-        {label ? <label className="block text-m-light mb-2">{label}</label> : null}
-        <div className="h-[56px] relative flex items-center">
-          <input
-            type="number"
-            className={
-              'text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text'
-            }
-            onChange={handleChange}
-            value={value}
-            min={minValue}
-            max={maxValue}
-            {...inputProps}
-          />
-          <span className="text-xl-light absolute right-4">₽</span>
-        </div>
-      </div>
+      <Input
+        className={className}
+        inputClassName="w-full"
+        onChange={handleChange}
+        onBlur={handleBlur}
+        {...inputProps}
+      >
+        <span className="text-xl-light absolute right-4 bottom-4">₽</span>
+      </Input>
     );
   },
 );
+
+const getClampValue = (val: string, clampVal: number): string =>
+  Number(val) === clampVal ? val : String(clampVal);

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

@@ -1,10 +1,6 @@
-export type CurrencyInputProps = {
-  className?: string;
-  label?: string;
-  onChange?: (value: string) => void;
-  name?: string;
-  value?: string;
-  placeholder?: string;
+import type { InputProps } from '../Input/InputProps';
+
+export type CurrencyInputProps = InputProps & {
   minValue?: number;
   maxValue?: number;
 };

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

@@ -0,0 +1,28 @@
+import { getSanitizedValue } from '../../utils/getSanitizedValue';
+
+export const adjustValue = (val: string) =>
+  onlyOneDot(setZeroStart(replaceCommaToDot(getSanitizedValue(val))));
+
+export const localNumberFormat = (val: string): string =>
+  new Intl.NumberFormat('ru-RU', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  })
+    .format(Number(getSanitizedValue(val)))
+    .replace(',', '.');
+
+export const onlyOneDot = (val: string): string => {
+  const matches = val.match(/\./g) || [];
+
+  return matches.length > 1 ? val.slice(0, val.lastIndexOf('.')) : val;
+};
+
+const setZeroStart = (val: string): string => {
+  const isZeroStart = val.indexOf('0') === 0 && val.length === 2;
+  const newVal = isZeroStart ? val.replace('0', '0.') : val;
+
+  return newVal.startsWith('.') ? newVal.replace('.', '0.') : newVal;
+};
+
+const replaceCommaToDot = (val: string): string =>
+  String(val.replace(',', '.').replace(/[^.\d]/g, ''));

package/mobile/src/ui-kit/Foldable/DefaultButton.tsx

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Img } from '../Img/Img';
+import { FoldButtonProps } from './FoldButtonProps';
+
+export const DefaultButton = JSX<FoldButtonProps>(({ icon, label, dataTheme = '', onClick }) => {
+  return (
+    <button
+      className="border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white flex justify-center cursor-pointer"
+      data-theme={dataTheme}
+      onClick={onClick}
+    >
+      <span className="text-h4 pr-3">{label}</span>
+      {icon ? (
+        <Img
+          image={{
+            icon,
+            iconVersion: 'white',
+          }}
+          className="flex-shrink-0 my-auto"
+          width="20"
+          height="20"
+          asSVG
+        />
+      ) : null}
+    </button>
+  );
+});

package/mobile/src/ui-kit/Foldable/FoldButtonProps.ts

@@ -0,0 +1,13 @@
+import { ColorPalette } from '../../model/ContentPageDef';
+import { Picture } from '../../model/Picture';
+import { IconName } from '../Icon/IconProps';
+
+export interface FoldButtonProps {
+  className?: string;
+  hasContent?: boolean;
+  primaryIcon?: Picture;
+  icon: IconName;
+  label: string;
+  onClick: (e: any) => void;
+  dataTheme?: ColorPalette;
+}

package/mobile/src/ui-kit/Foldable/Foldable.tsx

@@ -1,93 +1,89 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
-import { ColorPalette } from '../../model/ContentPageDef';
+import { useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { VNode } from '../../model/VNode';
 import { clamp } from '../../utils/clamp';
-import { Icon } from '../Icon/Icon';
-import { foldableBlockClassNames, useActiveHandler } from './useActiveHandler';
-
-export type FoldableBlocks = VNode[];
-export type Render = (_: VNode, isActive: boolean) => VNode;
+import type { IconName } from '../Icon/IconProps';
+import { DefaultButton } from './DefaultButton';
 
+interface RenderFoldButtonProps {
+  isUnfolded: boolean;
+  onToggle: () => void;
+}
 export interface FoldableProps {
-  context: ContentPageContext;
-  foldButtonLabel?: string;
+  blocks?: VNode[];
   hiddenBlocksNum?: number;
-  blocks?: FoldableBlocks;
-  foldButtonClasses?: string;
-  foldButtonDataTheme?: ColorPalette;
-  isUnfolded?: boolean;
-  render?: Render;
-  containerClasses?: string;
-}
-
-export interface RenderBlocksParams {
-  blocksToHide: number;
-  isActive: boolean;
-  containerClasses?: string;
+  unfoldedByDefault?: boolean;
+  isFoldButtonOnTop?: boolean;
+  containerClassName?: string;
+  blockWrapper?: (children: VNode) => VNode;
+  renderFoldButton?: (props: RenderFoldButtonProps) => VNode;
 }
 
 export const Foldable = JSX<FoldableProps>(
   ({
     blocks = [],
     hiddenBlocksNum = 0,
-    foldButtonClasses,
-    foldButtonLabel,
-    foldButtonDataTheme,
-    isUnfolded,
-    containerClasses,
-    render = (_) => _,
+    isFoldButtonOnTop = false,
+    unfoldedByDefault = false,
+    containerClassName = '',
+    blockWrapper = (_) => _,
+    renderFoldButton = renderDefaultFoldButton,
   }) => {
-    const blocksToHide = clamp(hiddenBlocksNum, 0, blocks.length);
-    const { icon, handleToggle, isActive } = useActiveHandler({
-      initialState: isUnfolded,
-    });
+    const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
+    const blocksToHide = clamp(hiddenBlocksNum, 0, blocks?.length);
+    const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
+    const hiddenBlocks = blocksToHide > 0 ? blocks.slice(-blocksToHide) : [];
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    const onToggle = () => {
+      setIsUnfolded(!isUnfolded);
+      if (containerRef.current) {
+        containerRef.current.style.maxHeight = isUnfolded
+          ? ''
+          : `${containerRef.current.scrollHeight}px`;
+      }
+    };
 
-    const buttonClassName =
-      foldButtonClasses ||
-      'border-none bg-primary-main hover:bg-primary-hover focus:bg-primary-main active:bg-primary-active px-0 py-5 mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
-    const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
+    const buttonNode = hiddenBlocksNum ? renderFoldButton({ isUnfolded, onToggle }) : null;
+    const blocksNode = blockWrapper(
+      <div>
+        {visibleBlocks}
+        <div
+          ref={containerRef}
+          className={`transition-max-h duration-300 overflow-hidden max-h-0 ${containerClassName}`}
+        >
+          {hiddenBlocks}
+        </div>
+      </div>,
+    );
 
-    return blocks ? (
+    return (
       <div>
-        {renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses })}
-        {hiddenBlocksNum ? (
-          <button
-            className={buttonClassName}
-            data-theme={foldButtonDataTheme}
-            onClick={handleToggle}
-          >
-            <span className="pr-3">{getFoldButtonLabel}</span>
-            {icon ? (
-              <Icon
-                className="my-auto"
-                name={icon}
-                iconVersion="white"
-                width="20"
-                height="20"
-                asSVG
-              />
-            ) : null}
-          </button>
-        ) : null}
+        {isFoldButtonOnTop ? (
+          <div>
+            {buttonNode}
+            {blocksNode}
+          </div>
+        ) : (
+          <div>
+            {blocksNode}
+            {buttonNode}
+          </div>
+        )}
       </div>
-    ) : null;
+    );
   },
 );
 
-const renderBlocks = (
-  blocks: FoldableBlocks,
-  render: Render,
-  { blocksToHide, isActive, containerClasses = '' }: RenderBlocksParams,
-) => {
-  const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
-  const hiddenBlocks = blocksToHide > 0 ? blocks.slice(-blocksToHide) : [];
+const renderDefaultFoldButton = (props: RenderFoldButtonProps) => {
+  const labels = ['Развернуть', 'Скрыть'];
+  const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
-  return render(
-    <div>
-      {visibleBlocks}
-      <div className={`${foldableBlockClassNames} ${containerClasses}`}>{hiddenBlocks}</div>
-    </div>,
-    isActive,
+  return (
+    <DefaultButton
+      icon={icons[Number(props.isUnfolded)]}
+      label={labels[Number(props.isUnfolded)]}
+      onClick={props.onToggle}
+    />
   );
 };

package/mobile/src/ui-kit/Icon/Icon.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { IconInverseMap, IconTitleMap } from '../../icons/IconName';
 import type { IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
 import type { IconProps } from './IconProps';
@@ -15,7 +14,7 @@ export const Icon = JSX<IconProps>(
     className = '',
     imageClassName = '',
     name = '',
-    alt = `Иконка ${IconTitleMap[name] || name}`,
+    alt = `Иконка ${name}`,
     title = alt,
     iconVersion = 'normal',
     asSVG,
@@ -23,7 +22,7 @@ export const Icon = JSX<IconProps>(
   }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
 
-    if (asSVG && IconInverseMap[name]) {
+    if (asSVG) {
       return (
         <Background className={className}>
           <svg
@@ -31,7 +30,7 @@ export const Icon = JSX<IconProps>(
               getSvgSize(className, imgProps.width),
               svgUseStyleMap[iconVersion],
               imageClassName,
-              getInvertStyle(name, iconVersion),
+              getInvertStyle(iconVersion),
             ].join(' ')}
             {...imgProps}
             aria-hidden="true"
@@ -57,8 +56,8 @@ export const Icon = JSX<IconProps>(
   },
 );
 
-const getInvertStyle = (name: string, iconVersion: IconVersion) =>
-  iconVersion === 'white' && IconInverseMap[name] ? 'invert' : '';
+const getInvertStyle = (iconVersion: IconVersion): string =>
+  iconVersion === 'white' ? 'invert' : '';
 
 const getSvgSize = (className?: string, width?: string) =>
   width ? `width: ${width}px ` : 'w-full h-full';

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -20,6 +20,5 @@ export type IconProps = IconCompatibilityFields & {
   className?: string;
   imageClassName?: string;
   name?: IconName;
-  /** @hidden */
   iconVersion?: IconVersion;
 };

package/mobile/src/ui-kit/Img/Img.tsx

@@ -3,16 +3,4 @@ import { ImgInner } from './ImgInner';
 
 import type { Image, ImageProps } from './ImgProps';
 
-export const Img = JSX<ImageProps<Image>>(
-  ({ className = '', image, imageClassName, ...iconProps }) => {
-    return (
-      <ImgInner
-        className={className}
-        image={image}
-        imageClassName={imageClassName}
-        {...iconProps}
-        isMobile={true}
-      />
-    );
-  },
-);
+export const Img = JSX<ImageProps<Image>>((props) => <ImgInner {...props} isMobile={true} />);

package/mobile/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -38,7 +38,7 @@ export const InnerTableBody = JSX<InnerTableBodyProps>(({ context, activeTabInde
             </div>
             <div
               className={`w-full pl-2 overflow-hidden transition-height duration-500 ease-in-out ${
-                hiddenTables[key] ? 'h-0' : 'h-[243px]'
+                hiddenTables[key] ? 'h-0' : ''
               }`}
             >
               <div className="relative">

package/mobile/src/ui-kit/InnerTable/InnerTableBodyItem.tsx

@@ -46,15 +46,24 @@ const renderRow = (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: n
     0,
   );
 
+  const columnsClassName = [
+    'flex duration-1000 text-center',
+    rowIdx !== 0 ? 'font-normal' : 'font-light',
+  ].join(' ');
+
   return (
     <div
       key={String(rowIdx)}
       className="flex border-main-divider border border-t-0 border-x-0 border-solid"
     >
-      <div className="text-xl-light min-w-[214px] w-[214px] pt-6 pb-5">{headerColumn.data}</div>
+      {headerColumn?.data ? (
+        <div className={`text-xl-light w-[214px] pb-5 ${rowIdx === 0 ? 'pt-8' : 'pt-6'}`}>
+          {headerColumn.data}
+        </div>
+      ) : null}
       <div className="flex flex-grow overflow-hidden">
         <div
-          className="flex duration-1000 text-center"
+          className={columnsClassName}
           style={{
             transform: `translateX(-${transform}px)`,
           }}
@@ -75,10 +84,10 @@ const renderRow = (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: n
 };
 
 const renderCols = (cols: string[], rowIndex: number) =>
-  cols ? (
-    <div className={`flex text-xl-light ${rowIndex === 0 ? 'text-secondary-text' : ''}`}>
+  cols?.length > 0 ? (
+    <div className={`flex ${rowIndex} ${rowIndex === 0 ? 'text-secondary-text' : ''} last:mr-3`}>
       {cols.map((data, i) => (
-        <div key={String(i)} className="w-[76px] mx-8">
+        <div key={String(i)} className={`w-[76px] text-h6 mr-5 first:ml-8`}>
           {data}
         </div>
       ))}

package/mobile/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -19,7 +19,7 @@ export const TableInnerButton = JSX<TableInnerButtonProps>(
       <Button
         version="primary"
         onClick={handleClick}
-        className="w-full flex items-center justify-center rounded-none py-5 "
+        className="w-full flex items-center justify-center rounded-none py-5"
       >
         <div className="text-h4">{isOpen ? 'Скрыть' : 'Показать ставки по вкладу'}</div>
         <Icon

package/mobile/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -13,7 +13,7 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
   ({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (
     <div className="flex justify-between w-full pt-2.5 pb-3">
       {currencies && currencies.length > 1 ? (
-        <div className="flex bg-secondary-light p-1 rounded-md">
+        <div className="flex bg-secondary-light p-1.5 rounded-md">
           {currencies.map((currency, idx) => (
             <div
               key={currency}
@@ -31,9 +31,10 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
         <Button
           href={linkToPDF}
           version="secondary"
-          className="flex justify-center items-center text-l-light text-primary-main px-8"
+          className="flex justify-center items-center text-l-light text-primary-main px-8 max-h-14"
+          target="_blank"
         >
-          <Img image="DocDownloadIcon" className="mr-[10px]" width="24" height="24" asSVG />
+          <Img image="DocDownloadIcon" className="mr-2.5" width="20" height="20" asSVG />
           <span>Скачать в PDF</span>
         </Button>
       ) : null}

package/mobile/src/ui-kit/Input/Input.tsx

@@ -1,24 +1,61 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { InputProps } from './InputProps';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { InputProps } from './InputProps';
 
 export const Input = JSX<InputProps>(
-  ({ className = '', id, name, type = 'text', placeholder, pattern, value, onChange }) => {
-    const handleChange = (e) => {
-      const validInputValue = e.target.validity.valid ? (e.target.value as string) : value;
-      onChange(validInputValue);
-    };
+  ({
+    className = '',
+    inputClassName = '',
+    id,
+    name,
+    type = 'text',
+    label,
+    value = '',
+    valid = true,
+    children,
+    onChange,
+    onBlur,
+    ...inputProps
+  }) => {
+    const handleChange = useCallback(
+      (e) => {
+        const validInputValue = e.target.validity.valid ? (e.target.value as string) : value;
+        onChange(validInputValue);
+      },
+      [onChange],
+    );
+
+    const handleBlur = useCallback(
+      (e) => {
+        if (!onBlur) {
+          return;
+        }
+        const validInputValue = e.target.validity.valid ? (e.target.value as string) : value;
+        onBlur(validInputValue);
+      },
+      [onBlur],
+    );
+
+    const paddingStyle = children ? 'pr-8' : '';
+    const validStyle = valid
+      ? 'border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text'
+      : 'border-error';
 
     return (
-      <input
-        className={`border rounded-md border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text text-primary-text outline-none ${className}`}
-        id={id}
-        name={name || id}
-        type={type}
-        pattern={pattern}
-        placeholder={placeholder}
-        value={value}
-        onChange={handleChange}
-      />
+      <div className={`relative ${className}`}>
+        {label ? <label className="block text-m-light mb-2">{label}</label> : null}
+        <input
+          className={`w-full border rounded-md text-primary-text outline-none p-4 ${paddingStyle} ${validStyle} ${inputClassName}`}
+          id={id}
+          name={name || id}
+          type={type}
+          value={value}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          {...inputProps}
+        />
+        {children}
+      </div>
     );
   },
 );

package/mobile/src/ui-kit/Input/InputProps.ts

@@ -1,12 +1,17 @@
 import type { InputTypes } from '../../model/InputTypes';
+import type { LabelProps } from '../../model/HeadlineType';
 
-export interface InputProps {
+export type InputProps = LabelProps & {
   className?: string;
+  label?: string;
+  inputClassName?: string;
   id?: string;
   name?: string;
   type?: InputTypes;
   placeholder?: string;
   pattern?: string;
-  value: string;
+  value?: string;
   onChange: (value: string) => void;
-}
+  onBlur?: (value: string) => void;
+  valid?: boolean;
+};

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { clamp } from '../../utils/clamp';
+import { getSanitizedValue } from '../../utils/getSanitizedValue';
 import type { InputRangeProps } from './InputRangeProps';
 
 const DISABLED_INPUT_CLASSES = 'disabled:border-main-stroke disabled:bg-main-divider';
@@ -17,14 +18,12 @@ export const InputRange = JSX<InputRangeProps>(
     disabled = false,
     onChange,
   }) => {
-    const getSanitizedValue = (_: string) => Number(_.replace(/\D/g, ''));
-
     const handleChange = (e) => {
       if (!onChange) {
         return;
       }
 
-      onChange(clamp(getSanitizedValue(e.target.value as string), min, max));
+      onChange(clamp(Number(getSanitizedValue(e.target.value as string)), min, max));
     };
 
     const inputStyle = {

package/mobile/src/ui-kit/IntersectionObserverTag.tsx

@@ -0,0 +1,49 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import type { VNode } from '../model/VNode';
+
+interface IntersectionObserverTagProps {
+  tag: keyof HTMLElementTagNameMap;
+  className?: string;
+  anchor?: string;
+  children?: VNode;
+  observerCallback: IntersectionObserverCallback;
+  observerOptions?: IntersectionObserverInit;
+}
+
+export const IntersectionObserverTag = JSX<IntersectionObserverTagProps>((props) => {
+  const {
+    tag = 'section',
+    observerCallback,
+    observerOptions,
+    className = '',
+    anchor = null,
+    children,
+  } = props;
+
+  const intersectionObserver = useRef<IntersectionObserver | null>(null);
+
+  const ref = useCallback(
+    (element: HTMLElement | null) => {
+      if (!element) {
+        return;
+      }
+
+      if (intersectionObserver.current) {
+        intersectionObserver.current.disconnect();
+      }
+
+      intersectionObserver.current = new IntersectionObserver(observerCallback, observerOptions);
+      intersectionObserver.current.observe(element);
+    },
+    [observerCallback, observerOptions],
+  );
+
+  const Tag = tag as any;
+
+  return (
+    <Tag ref={ref} className={className} id={anchor}>
+      {children}
+    </Tag>
+  );
+});