@redneckz/wildless-cms-uni-blocks 0.13.3 → 0.13.5

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

@@ -1,11 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '../../hooks/useBool';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { LabelProps } from '../../model/HeadlineType';
+import { jaroWinklerDistance } from '../../services/search/jaroWinklerDistance';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
+import { Input } from '../Input/Input';
 
 export interface Option {
   key: string;
@@ -20,6 +22,7 @@ export type SelectProps = LabelProps & {
   isBorder?: boolean;
   placeholder?: string;
   onChange?: (value: Option) => void;
+  isSearch?: boolean;
 };
 
 export const Select = JSX<SelectProps>(
@@ -32,13 +35,19 @@ export const Select = JSX<SelectProps>(
     isBorder = true,
     placeholder = '',
     onChange,
+    isSearch = false,
   }) => {
     const [isOpen, { setFalse: close, toggle }] = useBool();
-    const wrapperRef = useOutsideClick<HTMLDivElement>(close);
+    const [searchValue, setSearchValue] = useState('');
+    const reset = useCallback(() => {
+      close();
+      setSearchValue('');
+    }, []);
+    const wrapperRef = useOutsideClick<HTMLDivElement>(reset);
 
     const handleChange = useCallback(
       (option: Option) => {
-        close();
+        reset();
         onChange && onChange(option);
       },
       [onChange],
@@ -48,17 +57,11 @@ export const Select = JSX<SelectProps>(
 
     return (
       <div className={className} ref={wrapperRef}>
-        {label ? (
-          <div className="mb-xs">
-            <Text size="text-m" color="text-primary-text" font="font-light">
-              {label}
-            </Text>
-          </div>
-        ) : null}
+        {renderLabel(label)}
         <div className={style('relative', isOpen ? 'z-20' : 'z-10')}>
           <div
             className={style(
-              'text-l flex justify-between items-center text-primary-text cursor-pointer',
+              'text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10',
               getBorderStyle(isBorder, valid),
             )}
             onClick={toggle}
@@ -73,10 +76,13 @@ export const Select = JSX<SelectProps>(
               height="16"
             />
           </div>
+          {isSearch ? renderSearch(isOpen, searchValue, setSearchValue) : null}
           {options?.length ? (
             <div className={style('h-0', isOpen ? '' : 'overflow-hidden')}>
               <div className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
-                {options.map(renderOption(handleChange, isOpen, isSelected))}
+                {getFilteredOptions(options, searchValue).map(
+                  renderOption(handleChange, isOpen, isSelected),
+                )}
               </div>
             </div>
           ) : null}
@@ -86,6 +92,34 @@ export const Select = JSX<SelectProps>(
   },
 );
 
+const renderLabel = (label?: string) =>
+  label ? (
+    <div className="mb-xs">
+      <Text size="text-m" color="text-primary-text" font="font-light">
+        {label}
+      </Text>
+    </div>
+  ) : null;
+
+const getFilteredOptions = (options: Option[], searchValue: string) => {
+  return searchValue
+    ? options.filter(
+        (_) => jaroWinklerDistance(_.text?.toLowerCase())(searchValue.toLowerCase()) >= 0.6,
+      )
+    : options;
+};
+
+const renderSearch = (
+  isOpen: boolean,
+  searchValue: string,
+  setSearchValue: (value: string) => void,
+) =>
+  isOpen ? (
+    <div className={style('absolute top-0 w-full h-full z-20')}>
+      <Input type="text" autoFocus value={searchValue} onChange={setSearchValue} />
+    </div>
+  ) : null;
+
 const renderOption =
   (
     handleChange: (option: Option) => void,

package/src/utils/style.ts

@@ -1,4 +1,5 @@
-type Atom = string | null | undefined;
+type Falsy = null | undefined | false | 0;
+type Atom = string | Falsy;
 
 export const style = (...atoms: Array<Atom | Atom[]>): string =>
   atoms

package/bundle/components/CarouselTariffsCard/getPaddingStyle.d.ts

@@ -1 +0,0 @@
-export declare const getPaddingStyle: (isHighlighting?: boolean) => string;

package/bundle/components/CarouselTariffsCard/getPaddingStyle.mobile.d.ts

@@ -1 +0,0 @@
-export declare const getPaddingStyle: (isHighlighting?: boolean) => string;

package/bundle/components/Footer/buttonSizeStyles.mobile.d.ts

@@ -1,4 +0,0 @@
-import { ButtonSize } from './MediaButton';
-export declare const buttonSizeStyles: {
-    [key in ButtonSize]: string;
-};

package/dist/components/CarouselTariffsCard/getPaddingStyle.d.ts

@@ -1 +0,0 @@
-export declare const getPaddingStyle: (isHighlighting?: boolean) => string;

package/dist/components/CarouselTariffsCard/getPaddingStyle.js

@@ -1,5 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPaddingStyle = void 0;
-const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-3xl mt-3xl pt-20' : 'p-3xl mt-20';
-exports.getPaddingStyle = getPaddingStyle;
-//# sourceMappingURL=getPaddingStyle.js.map

package/dist/components/CarouselTariffsCard/getPaddingStyle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getPaddingStyle.js","sourceRoot":"","sources":["../../../src/components/CarouselTariffsCard/getPaddingStyle.tsx"],"names":[],"mappings":";;AAAO,MAAM,eAAe,GAAG,CAAC,cAAc,GAAG,KAAK,EAAU,EAAE,CAChE,cAAc,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,CAAC;AAD3C,QAAA,eAAe,mBAC4B"}

package/dist/components/CarouselTariffsCard/getPaddingStyle.mobile.d.ts

@@ -1 +0,0 @@
-export declare const getPaddingStyle: (isHighlighting?: boolean) => string;

package/dist/components/CarouselTariffsCard/getPaddingStyle.mobile.js

@@ -1,5 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPaddingStyle = void 0;
-const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-6xl mt-xl' : 'mt-xl p-6xl'; // Хак для мобильной версии т.к. контракт должен быть идентичный
-exports.getPaddingStyle = getPaddingStyle;
-//# sourceMappingURL=getPaddingStyle.mobile.js.map

package/dist/components/CarouselTariffsCard/getPaddingStyle.mobile.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getPaddingStyle.mobile.js","sourceRoot":"","sources":["../../../src/components/CarouselTariffsCard/getPaddingStyle.mobile.tsx"],"names":[],"mappings":";;AAAO,MAAM,eAAe,GAAG,CAAC,cAAc,GAAG,KAAK,EAAU,EAAE,CAChE,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,gEAAgE;AADrG,QAAA,eAAe,mBACqB"}

package/dist/components/Footer/buttonSizeStyles.mobile.d.ts

@@ -1,4 +0,0 @@
-import { ButtonSize } from './MediaButton';
-export declare const buttonSizeStyles: {
-    [key in ButtonSize]: string;
-};

package/dist/components/Footer/buttonSizeStyles.mobile.js

@@ -1,7 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonSizeStyles = void 0;
-exports.buttonSizeStyles = {
-    default: 'w-24 h-14',
-    stretched: 'flex-1 h-14',
-};
-//# sourceMappingURL=buttonSizeStyles.mobile.js.map

package/dist/components/Footer/buttonSizeStyles.mobile.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttonSizeStyles.mobile.js","sourceRoot":"","sources":["../../../src/components/Footer/buttonSizeStyles.mobile.ts"],"names":[],"mappings":";;AAEa,QAAA,gBAAgB,GAAoC;IAC/D,OAAO,EAAE,WAAW;IACpB,SAAS,EAAE,aAAa;CACzB,CAAC"}

package/lib/components/CarouselTariffsCard/getPaddingStyle.d.ts

@@ -1 +0,0 @@
-export declare const getPaddingStyle: (isHighlighting?: boolean) => string;

package/lib/components/CarouselTariffsCard/getPaddingStyle.js

@@ -1,2 +0,0 @@
-export const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-3xl mt-3xl pt-20' : 'p-3xl mt-20';
-//# sourceMappingURL=getPaddingStyle.js.map

package/lib/components/CarouselTariffsCard/getPaddingStyle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getPaddingStyle.js","sourceRoot":"","sources":["../../../src/components/CarouselTariffsCard/getPaddingStyle.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,cAAc,GAAG,KAAK,EAAU,EAAE,CAChE,cAAc,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,CAAC"}

package/lib/components/CarouselTariffsCard/getPaddingStyle.mobile.d.ts

@@ -1 +0,0 @@
-export declare const getPaddingStyle: (isHighlighting?: boolean) => string;

package/lib/components/CarouselTariffsCard/getPaddingStyle.mobile.js

@@ -1,2 +0,0 @@
-export const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-6xl mt-xl' : 'mt-xl p-6xl'; // Хак для мобильной версии т.к. контракт должен быть идентичный
-//# sourceMappingURL=getPaddingStyle.mobile.js.map

package/lib/components/CarouselTariffsCard/getPaddingStyle.mobile.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getPaddingStyle.mobile.js","sourceRoot":"","sources":["../../../src/components/CarouselTariffsCard/getPaddingStyle.mobile.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,cAAc,GAAG,KAAK,EAAU,EAAE,CAChE,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,gEAAgE"}

package/lib/components/Footer/buttonSizeStyles.mobile.d.ts

@@ -1,4 +0,0 @@
-import { ButtonSize } from './MediaButton';
-export declare const buttonSizeStyles: {
-    [key in ButtonSize]: string;
-};

package/lib/components/Footer/buttonSizeStyles.mobile.js

@@ -1,5 +0,0 @@
-export const buttonSizeStyles = {
-    default: 'w-24 h-14',
-    stretched: 'flex-1 h-14',
-};
-//# sourceMappingURL=buttonSizeStyles.mobile.js.map

package/lib/components/Footer/buttonSizeStyles.mobile.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttonSizeStyles.mobile.js","sourceRoot":"","sources":["../../../src/components/Footer/buttonSizeStyles.mobile.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAoC;IAC/D,OAAO,EAAE,WAAW;IACpB,SAAS,EAAE,aAAa;CACzB,CAAC"}

package/mobile/bundle/components/CarouselTariffsCard/getPaddingStyle.d.ts

@@ -1 +0,0 @@
-export declare const getPaddingStyle: (isHighlighting?: boolean) => string;

package/mobile/dist/components/CarouselTariffsCard/getPaddingStyle.d.ts

@@ -1 +0,0 @@
-export declare const getPaddingStyle: (isHighlighting?: boolean) => string;

package/mobile/dist/components/CarouselTariffsCard/getPaddingStyle.js

@@ -1,5 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPaddingStyle = void 0;
-const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-6xl mt-xl' : 'mt-xl p-6xl'; // Хак для мобильной версии т.к. контракт должен быть идентичный
-exports.getPaddingStyle = getPaddingStyle;
-//# sourceMappingURL=getPaddingStyle.js.map

package/mobile/dist/components/CarouselTariffsCard/getPaddingStyle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getPaddingStyle.js","sourceRoot":"","sources":["../../../src/components/CarouselTariffsCard/getPaddingStyle.tsx"],"names":[],"mappings":";;AAAO,MAAM,eAAe,GAAG,CAAC,cAAc,GAAG,KAAK,EAAU,EAAE,CAChE,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,gEAAgE;AADrG,QAAA,eAAe,mBACqB"}

package/mobile/lib/components/CarouselTariffsCard/getPaddingStyle.d.ts

@@ -1 +0,0 @@
-export declare const getPaddingStyle: (isHighlighting?: boolean) => string;

package/mobile/lib/components/CarouselTariffsCard/getPaddingStyle.js

@@ -1,2 +0,0 @@
-export const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-6xl mt-xl' : 'mt-xl p-6xl'; // Хак для мобильной версии т.к. контракт должен быть идентичный
-//# sourceMappingURL=getPaddingStyle.js.map

package/mobile/lib/components/CarouselTariffsCard/getPaddingStyle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getPaddingStyle.js","sourceRoot":"","sources":["../../../src/components/CarouselTariffsCard/getPaddingStyle.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,cAAc,GAAG,KAAK,EAAU,EAAE,CAChE,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,gEAAgE"}

package/mobile/src/components/CarouselTariffsCard/getPaddingStyle.tsx

@@ -1,2 +0,0 @@
-export const getPaddingStyle = (isHighlighting = false): string =>
-  isHighlighting ? 'p-6xl mt-xl' : 'mt-xl p-6xl'; // Хак для мобильной версии т.к. контракт должен быть идентичный

package/src/components/CarouselTariffsCard/getPaddingStyle.mobile.tsx

@@ -1,2 +0,0 @@
-export const getPaddingStyle = (isHighlighting = false): string =>
-  isHighlighting ? 'p-6xl mt-xl' : 'mt-xl p-6xl'; // Хак для мобильной версии т.к. контракт должен быть идентичный

package/src/components/CarouselTariffsCard/getPaddingStyle.tsx

@@ -1,2 +0,0 @@
-export const getPaddingStyle = (isHighlighting = false): string =>
-  isHighlighting ? 'p-3xl mt-3xl pt-20' : 'p-3xl mt-20';

package/src/components/Footer/buttonSizeStyles.mobile.ts

@@ -1,6 +0,0 @@
-import { ButtonSize } from './MediaButton';
-
-export const buttonSizeStyles: { [key in ButtonSize]: string } = {
-  default: 'w-24 h-14',
-  stretched: 'flex-1 h-14',
-};