@redneckz/wildless-cms-uni-blocks 0.4.4 → 0.4.6

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

@@ -0,0 +1,70 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { clamp } from '../../utils/clamp';
+
+// ISO 4217 codes
+/**
+ * @title Валюта
+ * @enumNames ["Рубль", "Доллар", "Евро"]
+ * @default "RUB"
+ */
+type Currency = 'RUB' | 'USD' | 'EUR';
+
+const CurrencyMap: Record<Currency, string> = {
+  RUB: '₽',
+  USD: '$',
+  EUR: '€',
+};
+
+type CurrencyInputProps = {
+  className?: string;
+  label?: string;
+  currency?: Currency;
+  onChange?: (value: string) => void;
+  name?: string;
+  value?: string;
+  placeholder?: string;
+  minValue?: number;
+  maxValue?: number;
+};
+
+export const CurrencyInput = JSX<CurrencyInputProps>(
+  ({
+    className = '',
+    label,
+    currency = 'RUB',
+    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));
+
+      onChange(newValue);
+    };
+
+    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"
+            onChange={handleChange}
+            value={value}
+            min={minValue}
+            max={maxValue}
+            {...inputProps}
+          />
+          <span className="text-xl-light absolute right-4">{CurrencyMap[currency]}</span>
+        </div>
+      </div>
+    );
+  },
+);

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

@@ -23,13 +23,13 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
         {image?.sources?.length
           ? image.sources
               .sort(sourcesComparator)
-              .map(({ src, format, media, size }, index) => (
+              .map(({ src, format, media }, index) => (
                 <source
                   key={`${index}_${src}`}
                   srcSet={src}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
-                  {...size}
+                  {...image.size}
                 />
               ))
           : null}
@@ -40,6 +40,11 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
 );
 
 const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
+  const style = {
+    width: image.size?.width ? `${image.size?.width}px` : '100%',
+    height: image.size?.height ? `${image.size?.height}px` : '100%',
+  };
+
   const title = image.title || '';
   const alt = image.alt || image.title;
   const imgStyle = isMobile ? 'm-auto' : 'm-0';
@@ -50,6 +55,7 @@ const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
       className={`${imgStyle} ${imageClassName}`}
       alt={alt}
       title={title}
+      style={style}
       {...image.size}
     />
   );

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

@@ -18,7 +18,7 @@ export const InnerTable = JSX<InnerTableProps>(({ context, dataUrl, pdfUrl }) =>
   const currencies = tableData?.map((item) => item.currency ?? '');
 
   return tableData ? (
-    <div className="bg-white z-10 pr-[50px]">
+    <div className="bg-white z-10">
       <InnerTableHeader
         currencies={currencies}
         activeTabIndex={activeTabIndex}

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

@@ -10,9 +10,9 @@ export interface TableInnerButtonProps extends TariffsTableInnerEvent, UniBlockP
 }
 
 export const TableInnerButton = JSX<TableInnerButtonProps>(
-  ({ isOpen, dataUrl, rowIdx, cellIdx, fieldIdx }) => {
+  ({ isOpen, dataUrl, pdfUrl, rowIdx, cellIdx, fieldIdx }) => {
     const handleClick = () => {
-      EventBus.inst.fire('tariffInnerTable', { dataUrl, rowIdx, cellIdx, fieldIdx });
+      EventBus.inst.fire('tariffInnerTable', { dataUrl, pdfUrl, rowIdx, cellIdx, fieldIdx });
     };
 
     return (

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

@@ -33,7 +33,7 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
           version="secondary"
           className="flex justify-center items-center text-l-light text-primary-main px-8"
         >
-          <Img image="DocDownload" className="mr-[10px]" width="24" height="24" asSVG />
+          <Img image="DocDownloadIcon" className="mr-[10px]" width="24" height="24" asSVG />
           <span>Скачать в PDF</span>
         </Button>
       ) : null}

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

@@ -28,7 +28,7 @@ export const Logo = JSX<Partial<LogoProps>>(
         target={targetBlank ? '_blank' : '_self'}
         aria-label="Россельхозбанк"
       >
-        <Img image={{ icon: 'Logo' }} className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`} asSVG />
+        <Img image={{ icon: 'LogoIcon' }} className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`} asSVG />
         {hideTitle ? null : (
           <span className={`${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`}>
             {children || 'Россельхозбанк'}

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

@@ -50,7 +50,7 @@ export const Logo = JSX<Partial<LogoProps>>(
           <Img image={logo.image} className={SVG_COLOR[bgColor]} width="40" height="45" asSVG />
         ) : (
           <Img
-            image={{ icon: 'Logo', iconVersion: ICON_VERSION_MAP[bgColor] }}
+            image={{ icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }}
             className={`${SVG_COLOR[bgColor]} w-10`}
             width="40"
             height="45"

package/src/utils/isPictureSizeEmpty.ts

@@ -0,0 +1,5 @@
+import type { Picture } from '../model/Picture';
+
+export function isPictureSizeEmpty(size: Picture['size']): boolean {
+  return !(size?.width || size?.height);
+}