@redneckz/wildless-cms-uni-blocks 0.10.6 → 0.10.7

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

@@ -1,99 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { clamp } from '../../utils/clamp';
-import { getSanitizedValue } from '../../utils/getSanitizedValue';
-import type { InputListRangeProps } from './InputListRangeProps';
-
-const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
-
-export const InputListRange = JSX<InputListRangeProps>(
-  ({ className, title, items = [], list = [], value = list[0], disabled = false, onChange }) => {
-    const min = 0;
-    const max = list.length - 1;
-    const step = 1;
-
-    const handleTextChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
-      if (!onChange) {
-        return;
-      }
-      const newValue = parseInt(e.target.value);
-
-      const closetValue = list.reduce(function (prev, curr) {
-        return Math.abs(curr - newValue) < Math.abs(prev - newValue) ? curr : prev;
-      });
-
-      onChange(Number(getSanitizedValue(closetValue.toString())));
-    };
-
-    const handleRangeChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
-      if (!onChange) {
-        return;
-      }
-
-      const val = list.at(clamp(parseInt(e.target.value), min, max)) || 0;
-      onChange(Number(getSanitizedValue(val.toString())));
-    };
-
-    const valueIndex = list.findIndex((item) => item === value) || 0;
-    const inputStyle = {
-      backgroundSize: `${(((valueIndex - min) * 100) / (max - min)).toFixed(2)}% 100%`,
-    };
-
-    return (
-      <div className={className}>
-        <label className="block relative">
-          {title ? <span className="text-m-light text-primary-text">{title}</span> : null}
-          <input
-            className={`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={addSpacesBetweenNumbers(value)}
-            disabled={disabled}
-            onChange={handleTextChange}
-            onBlur={handleTextChange}
-          />
-          {list.length ? (
-            <div className="absolute w-full flex justify-between -bottom-[3px] px-4">
-              {list.map(renderTick(valueIndex, disabled))}
-            </div>
-          ) : null}
-          <div className="absolute inset-x-0 -bottom-1 px-4 leading-[18px]">
-            <input
-              className="box-border w-full m-0 cursor-pointer slider relative z-10"
-              type="range"
-              min={min}
-              max={max}
-              step={step}
-              value={valueIndex}
-              disabled={disabled}
-              onChange={handleRangeChange}
-              style={inputStyle}
-            />
-          </div>
-        </label>
-        {renderRangeCaption(items)}
-      </div>
-    );
-  },
-);
-
-const renderTick = (valueIndex: number, disabled: boolean) => (value: number, i: number) =>
-  (
-    <span
-      key={String(i)}
-      className={`w-2 h-2 rounded-full ${
-        valueIndex <= i || disabled ? 'bg-gray' : 'bg-primary-main'
-      }`}
-    />
-  );
-
-function renderRangeCaption(items: string[]) {
-  return (
-    <div className="flex justify-between my-2">
-      {items.map((item, i) => (
-        <span key={String(i)} className="text-s-light text-secondary-text">
-          {item}
-        </span>
-      ))}
-    </div>
-  );
-}

package/mobile/src/ui-kit/InputListRange/InputListRangeProps.ts

@@ -1,11 +0,0 @@
-import type { ListContent } from '../List/ListContent';
-
-export interface InputListRangeProps extends ListContent {
-  className?: string;
-  items?: string[];
-  list?: number[];
-  value?: number;
-  title?: string;
-  disabled?: boolean;
-  onChange?: (value: number) => void;
-}

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

@@ -1,99 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { clamp } from '../../utils/clamp';
-import { getSanitizedValue } from '../../utils/getSanitizedValue';
-import type { InputListRangeProps } from './InputListRangeProps';
-
-const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
-
-export const InputListRange = JSX<InputListRangeProps>(
-  ({ className, title, items = [], list = [], value = list[0], disabled = false, onChange }) => {
-    const min = 0;
-    const max = list.length - 1;
-    const step = 1;
-
-    const handleTextChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
-      if (!onChange) {
-        return;
-      }
-      const newValue = parseInt(e.target.value);
-
-      const closetValue = list.reduce(function (prev, curr) {
-        return Math.abs(curr - newValue) < Math.abs(prev - newValue) ? curr : prev;
-      });
-
-      onChange(Number(getSanitizedValue(closetValue.toString())));
-    };
-
-    const handleRangeChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
-      if (!onChange) {
-        return;
-      }
-
-      const val = list.at(clamp(parseInt(e.target.value), min, max)) || 0;
-      onChange(Number(getSanitizedValue(val.toString())));
-    };
-
-    const valueIndex = list.findIndex((item) => item === value) || 0;
-    const inputStyle = {
-      backgroundSize: `${(((valueIndex - min) * 100) / (max - min)).toFixed(2)}% 100%`,
-    };
-
-    return (
-      <div className={className}>
-        <label className="block relative">
-          {title ? <span className="text-m-light text-primary-text">{title}</span> : null}
-          <input
-            className={`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={addSpacesBetweenNumbers(value)}
-            disabled={disabled}
-            onChange={handleTextChange}
-            onBlur={handleTextChange}
-          />
-          {list.length ? (
-            <div className="absolute w-full flex justify-between -bottom-[3px] px-4">
-              {list.map(renderTick(valueIndex, disabled))}
-            </div>
-          ) : null}
-          <div className="absolute inset-x-0 -bottom-1 px-4 leading-[18px]">
-            <input
-              className="box-border w-full m-0 cursor-pointer slider relative z-10"
-              type="range"
-              min={min}
-              max={max}
-              step={step}
-              value={valueIndex}
-              disabled={disabled}
-              onChange={handleRangeChange}
-              style={inputStyle}
-            />
-          </div>
-        </label>
-        {renderRangeCaption(items)}
-      </div>
-    );
-  },
-);
-
-const renderTick = (valueIndex: number, disabled: boolean) => (value: number, i: number) =>
-  (
-    <span
-      key={String(i)}
-      className={`w-2 h-2 rounded-full ${
-        valueIndex <= i || disabled ? 'bg-gray' : 'bg-primary-main'
-      }`}
-    />
-  );
-
-function renderRangeCaption(items: string[]) {
-  return (
-    <div className="flex justify-between my-2">
-      {items.map((item, i) => (
-        <span key={String(i)} className="text-s-light text-secondary-text">
-          {item}
-        </span>
-      ))}
-    </div>
-  );
-}

package/src/ui-kit/InputListRange/InputListRangeProps.ts

@@ -1,11 +0,0 @@
-import type { ListContent } from '../List/ListContent';
-
-export interface InputListRangeProps extends ListContent {
-  className?: string;
-  items?: string[];
-  list?: number[];
-  value?: number;
-  title?: string;
-  disabled?: boolean;
-  onChange?: (value: number) => void;
-}