@redneckz/wildless-cms-uni-blocks 0.5.9 → 0.5.11

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { renderArrows } from '../Button/renderArrows';
 import type { RowsData } from './InnerTableProps';
 

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { EventBus } from '../../EventBus/EventBus';
-import { UniBlockProps } from '../../types';
+import { UniBlockProps } from '../../model/ContentPageDef';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 import type { TariffsTableInnerEvent } from './InnerTableProps';

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

@@ -1,24 +1,45 @@
 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 = '',
+    children,
+    onChange,
+    ...inputProps
+  }) => {
+    const handleChange = useCallback(
+      (e) => {
+        const validInputValue = e.target.validity.valid ? (e.target.value as string) : value;
+        onChange(validInputValue);
+      },
+      [onChange],
+    );
+
+    const paddingStyle = children ? 'pr-8' : '';
 
     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 border-main-stroke hover:border-primary-hover active:border-primary-text
+          focus:border-primary-text text-primary-text outline-none p-4 ${paddingStyle} ${inputClassName}`}
+          id={id}
+          name={name || id}
+          type={type}
+          value={value}
+          onChange={handleChange}
+          {...inputProps}
+        />
+        {children}
+      </div>
     );
   },
 );

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

@@ -1,12 +1,15 @@
 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;
-}
+};

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

@@ -7,7 +7,7 @@ export interface LogoProps {
   href: string;
   targetBlank: boolean;
   bgColor?: string;
-  hideTitle?: boolean;
+  showTitle?: boolean;
 }
 
 const SVG_COLOR: Record<BgColorVersion, string> = {
@@ -20,7 +20,7 @@ const TEXT_COLOR: Record<BgColorVersion, string> = {
 };
 
 export const Logo = JSX<Partial<LogoProps>>(
-  ({ className = '', href, children, targetBlank, bgColor = 'bg-white', hideTitle }) => {
+  ({ className = '', href, children, targetBlank, bgColor = 'bg-white', showTitle = true }) => {
     return (
       <a
         className={`inline-flex items-center font-sans no-underline ${className}`}
@@ -28,12 +28,16 @@ export const Logo = JSX<Partial<LogoProps>>(
         target={targetBlank ? '_blank' : '_self'}
         aria-label="Россельхозбанк"
       >
-        <Img image={{ icon: 'LogoIcon' }} className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`} asSVG />
-        {hideTitle ? null : (
+        <Img
+          image={{ icon: 'LogoIcon', iconVersion: SVG_COLOR[bgColor] }}
+          className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`}
+          asSVG
+        />
+        {showTitle ? (
           <span className={`${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`}>
             {children || 'Россельхозбанк'}
           </span>
-        )}
+        ) : null}
       </a>
     );
   },

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

@@ -8,7 +8,7 @@ export interface LogoProps {
   href: string;
   targetBlank: boolean;
   bgColor?: string;
-  hideTitle?: boolean;
+  showTitle?: boolean;
   logo?: {
     image?: Picture;
     title?: string;
@@ -37,7 +37,7 @@ export const Logo = JSX<Partial<LogoProps>>(
     children = logo?.title,
     targetBlank,
     bgColor = 'bg-white',
-    hideTitle,
+    showTitle = true,
   }) => {
     return (
       <a
@@ -57,7 +57,7 @@ export const Logo = JSX<Partial<LogoProps>>(
             asSVG
           />
         )}
-        {hideTitle ? null : renderTitle(children, bgColor, logo?.title)}
+        {showTitle ? renderTitle(children, bgColor, logo?.title) : null}
       </a>
     );
   },

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { UniBlockProps } from '../../types';
+import { UniBlockProps } from '../../model/ContentPageDef';
 import { Checkbox } from '../Checkbox/Checkbox';
 
 interface RadioButtonItem {

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { SearchBarInner } from './SearchBarInner';
 
 export const SearchBar = JSX<UniBlockProps>(({ className = '' }) => {

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { SearchBarInner } from './SearchBarInner';
 
 export const SearchBar = JSX<UniBlockProps>(({ className = '' }) => {

package/src/ui-kit/{SelectCustom/SelectCustom.fixture.tsx → Select/Select.fixture.tsx}

@@ -1,4 +1,4 @@
-import { SelectCustom } from './SelectCustom';
+import { Select } from './Select';
 
 const rates = [
   { text: 'USD', key: '1' },
@@ -9,7 +9,7 @@ const rates = [
 export default {
   default: (
     <div className="w-[1280px] ml-10 flex flex-col">
-      <SelectCustom options={rates} label="Заголовок" onChange={(_) => console.log(_)} />
+      <Select options={rates} label="Заголовок" onChange={(_) => console.log(_)} />
     </div>
   ),
 };

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

@@ -1,31 +1,97 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../Icon/Icon';
+import { useState, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+
+export interface OptionProps {
+  key: string;
+  text: string;
+}
 
 export interface SelectProps {
   className?: string;
-  id?: string;
-  name?: string;
-  value: string;
-  onChange: (value: string) => void;
+  label?: string;
+  value?: OptionProps;
+  onChange: (value: OptionProps) => void;
+  options: OptionProps[];
+  isBorder?: boolean;
+  placeholder?: string;
 }
 
-const selectStyle = {
-  background: `url('/icons/ArrowDownIcon.svg') right 16px top 50% / 21px no-repeat`,
-};
-
 export const Select = JSX<SelectProps>(
-  ({ className = '', id, name, children, value, onChange }) => {
+  ({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '' }) => {
+    const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
+    const [isOpen, setIsOpen] = useState(false);
+
+    const choiceOption = (option: OptionProps) => {
+      setSelectedItem(option);
+      setIsOpen(false);
+      onChange(option);
+    };
+
+    const isSelected = (option) => Boolean(option.key === selectedItem.key);
+
+    useEffect(() => {
+      setSelectedItem(value || { key: '', text: '' });
+    }, [value]);
+
     return (
-      <select
-        className={`appearance-none pl-0.5 ${className}`}
-        style={selectStyle}
-        id={id}
-        name={name || id}
-        value={value}
-        onChange={(e) => onChange(e.target.value as string)}
-        placeholder=""
-      >
-        {children}
-      </select>
+      <div className={`${className}`}>
+        {label ? <span className="mb-2 flex">{label}</span> : null}
+        <div className={`relative ${isOpen ? 'z-20' : 'z-10'}`}>
+          <div
+            className={`text-m-light flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
+            ${getBorderStyle(isBorder)}`}
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            <p className="p-4 pr-8 h-[56px] overflow-hidden text-ellipsis whitespace-nowrap">
+              {selectedItem?.text || placeholder}
+            </p>
+            <Icon
+              name="ArrowUpIcon"
+              width="16"
+              height="16"
+              className={`absolute right-3 ${isOpen ? '' : 'rotate-180'}`}
+            />
+          </div>
+          {options?.length ? (
+            <div className={`h-0 ${renderOptionsStyle(isOpen)}`}>
+              <div
+                className={`bg-white text-l max-h-[256px] overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`}
+              >
+                {options.map(renderOption(choiceOption, isOpen, isSelected))}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
     );
   },
 );
+
+const renderOptionsStyle = (isOpen) => (isOpen ? '' : 'overflow-hidden');
+
+const renderOption =
+  (choiceOption, isOpen: boolean, isSelected) => (option: OptionProps, i: number) => {
+    return (
+      <div
+        key={String(i)}
+        onClick={() => {
+          choiceOption(option);
+        }}
+        className="flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11 relative"
+      >
+        <span className="min-h-6">{option.text}</span>
+        <Icon
+          name="DoneSimpleIcon"
+          width="16"
+          height="16"
+          className={['absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden'].join(
+            ' ',
+          )}
+        />
+      </div>
+    );
+  };
+
+const getBorderStyle = (isBorder) =>
+  isBorder ? 'border border-main-stroke rounded-md hover:border-primary-hover' : '';

package/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -1,4 +1,4 @@
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 
 /**
  * @title Контейнер

package/src/utils/changeHashOnObserve.ts

@@ -1,10 +1,30 @@
-export const changeHashOnObserve = (entries: IntersectionObserverEntry[]) => {
-  if (!entries.length) {
-    return;
-  }
-  const [entry] = entries;
-
-  if (entry.isIntersecting) {
-    // Here must be logic for block intersection event
-  }
-};
+import { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
+import { EventBus } from '../EventBus/EventBus';
+
+interface ChangeHashOnObserveProps {
+  anchor?: string;
+  anchorClickRef?: {
+    current: AnchorClickScrollingEvent | null;
+  };
+}
+
+export const changeHashOnObserve =
+  ({ anchor, anchorClickRef }: ChangeHashOnObserveProps) =>
+  (entries: IntersectionObserverEntry[]) => {
+    if (!entries?.length) {
+      return;
+    }
+
+    const [entry] = entries;
+
+    if (!entry.isIntersecting || entry.boundingClientRect.top > 150) {
+      return;
+    }
+
+    if (anchorClickRef?.current?.isScrolling && anchorClickRef.current.label === `#${anchor}`) {
+      EventBus.inst.fire('anchorClick', { isScrolling: false, label: undefined });
+      EventBus.inst.fire('tab', { type: 'link', label: anchor });
+    } else if (!anchorClickRef?.current?.isScrolling) {
+      EventBus.inst.fire('tab', { type: 'link', label: anchor });
+    }
+  };

package/tailwind.config.cjs

@@ -200,7 +200,6 @@ module.exports = {
             end: 'rgba(var(--color-gradient-to), <alpha-value>)',
           },
           stroke: 'rgba(201, 202, 204, <alpha-value>)',
-          disabled: 'rgba(187, 187, 187, <alpha-value>)',
         },
         primary: {
           main: 'rgba(var(--color-primary-main), <alpha-value>)',