@redneckz/wildless-cms-uni-blocks 0.3.70 → 0.3.72

package/mobile/src/components/CreditCalculator/renderWantedSumInput.tsx

@@ -1,36 +0,0 @@
-import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
-import type { CalculatorParams } from './CreditCalculatorContent';
-
-const STEP_MONEY = 1000;
-
-interface RenderWantedSumInputProps {
-  calculatorParams: CalculatorParams;
-  moneyValue: number | undefined;
-  defaultSum: number;
-  setMoneyValue: InputRangeProps['onChange'];
-}
-
-export function renderWantedSumInput(props: RenderWantedSumInputProps) {
-  const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
-
-  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
-
-  return (
-    <InputRange
-      title="Желаемая сумма кредита, ₽"
-      items={[
-        `От ${addSpacesBetweenNumbers(minSum)} рублей`,
-        `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
-      ]}
-      min={minSum}
-      max={maxSum}
-      step={STEP_MONEY}
-      value={moneyValue || defaultSum}
-      onChange={setMoneyValue}
-    />
-  );
-}

package/mobile/src/components/Header/HeaderSubMenuObserver.ts

@@ -1,48 +0,0 @@
-import { isSSR } from '../../utils/isSSR';
-
-const isClient = !isSSR();
-
-export const headerSubMenuObserver = isClient
-  ? new IntersectionObserver(
-      (entries) => {
-        const createArrays = (selectors) =>
-          selectors.map((_) => Array.from(window.document.querySelectorAll(_)));
-
-        const headerSubMenuButtonElement = window.document.querySelector(
-          '[data-header-submenu-visible=toggled]',
-        );
-        const [headerSubMenuItems, dotsHeaderSubMenuItems] = createArrays([
-          '[data-item-name=header-submenu]',
-          '[data-item-name=dots-header-submenu]',
-        ]);
-
-        const visibilityList = {};
-        entries.forEach((_) => {
-          visibilityList[_.target.toString()] = _.isIntersecting;
-        });
-        const isHeaderSubMenuButtonShow = toggleVisibilityInItems(
-          visibilityList,
-          dotsHeaderSubMenuItems,
-          'hidden',
-        );
-        toggleVisibilityInItems(visibilityList, headerSubMenuItems, 'invisible');
-        if (headerSubMenuButtonElement) {
-          isHeaderSubMenuButtonShow
-            ? headerSubMenuButtonElement.classList.remove('hidden')
-            : headerSubMenuButtonElement.classList.add('hidden');
-        }
-      },
-      { root: window.document, threshold: 1.0 },
-    )
-  : undefined;
-
-// TODO: add types
-const toggleVisibilityInItems = (visibilityList, items, className) => {
-  const isReversed = className !== 'hidden';
-  return items.some((_) => {
-    const key = _.toString();
-    const option = isReversed ? !visibilityList[key] : visibilityList[key];
-    key in visibilityList ? _.classList.toggle(className, option) : null;
-    return isReversed ? _.classList.contains('hidden') : !_.classList.contains('hidden');
-  });
-};

package/src/components/CreditCalculator/CreditCalculator.example.json

@@ -1,25 +0,0 @@
-{
-  "tabs": [
-    {
-      "title": "Вкладка 1",
-      "description": "Описание",
-      "icon": {
-        "icon": "CardIcon"
-      }
-    },
-    {
-      "title": "Вкладка 2",
-      "description": "Описание",
-      "icon": {
-        "icon": "ChartSquareIcon"
-      }
-    },
-    {
-      "title": "Вкладка 3",
-      "description": "Описание",
-      "icon": {
-        "icon": "DiscountShapeIcon"
-      }
-    }
-  ]
-}

package/src/components/CreditCalculator/CreditCalculator.fixture.tsx

@@ -1,32 +0,0 @@
-import { context } from '../../setup-fixture';
-import { CreditCalculator } from './CreditCalculator';
-import type { CreditCalculatorTab } from './CreditCalculatorContent';
-
-const TABS: CreditCalculatorTab[] = [
-  {
-    title: 'Кредит',
-    description: 'Ставка от 6% до 7 лет',
-    directoryName: 'credit-calculator-data',
-    icon: { icon: 'CardIcon' },
-  },
-  {
-    title: 'Кредит',
-    description: 'Ставка от 4% до 7 лет',
-    directoryName: 'credit-calculator-data1',
-    icon: { icon: 'ChartSquareIcon' },
-  },
-  {
-    title: 'Кредит',
-    description: 'Ставка от 3% до 6 лет',
-    directoryName: 'credit-calculator-data2',
-    icon: { icon: 'DiscountShapeIcon' },
-  },
-];
-
-export default {
-  default: (
-    <div className="container grid grid-cols-12">
-      <CreditCalculator className="col-span-12" context={context} tabs={TABS} />
-    </div>
-  ),
-};

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -1,31 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Tabs } from '../../ui-kit/Tabs/Tabs';
-import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
-import type { CreditCalculatorContent } from './CreditCalculatorContent';
-import { CreditCalculatorForm } from './CreditCalculatorForm';
-import { DEFAULT_TABS } from './defaultTabs';
-
-export interface CreditCalculatorProps extends CreditCalculatorContent, UniBlockProps {}
-
-export const CreditCalculator = JSX<CreditCalculatorProps>(
-  ({ className = '', context, tabs = DEFAULT_TABS, anchor = null }) => {
-    const [currentTabIndex, setCurrentTabIndex] = context.useState(0);
-
-    return (
-      <section className={`font-sans text-primary-text py-10 bg-white ${className}`} id={anchor}>
-        <Heading
-          className="w-full text-center mb-8"
-          headingType={getTileHeadingType(className)}
-          title="Калькулятор"
-        />
-        <Tabs tabs={tabs} currentTabIndex={currentTabIndex} onTabClick={setCurrentTabIndex} />
-        <CreditCalculatorForm
-          context={context}
-          directoryName={tabs[currentTabIndex]?.directoryName}
-        />
-      </section>
-    );
-  },
-);

package/src/components/CreditCalculator/CreditCalculatorContent.ts

@@ -1,34 +0,0 @@
-import type { Tab } from '../../ui-kit/Tabs/TabsProps';
-
-/**
- * @hidden
- */
-export interface CalculatorParams {
-  isAnnuity?: boolean;
-  minSum?: number;
-  maxSum?: number;
-  minMonths?: number;
-  maxMonths?: number;
-  rateWithInsurance?: number;
-  rateWithoutInsurance?: number;
-}
-
-export interface CreditCalculatorData {
-  rows?: CalculatorParams[];
-}
-
-/**
- * @title Вкладка
- */
-export interface CreditCalculatorTab extends Tab {
-  /** @title Справочник */
-  directoryName?: string;
-}
-
-/**
- * @title Кредитный калькулятор
- */
-export interface CreditCalculatorContent {
-  /** @title Вкладки */
-  tabs?: CreditCalculatorTab[];
-}

package/src/components/CreditCalculator/CreditCalculatorForm.tsx

@@ -1,92 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
-import type { UniBlockProps } from '../../types';
-import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { clamp } from '../../utils/clamp';
-import { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS, MONTHS_IN_YEAR } from './constants';
-import { getCalculatorParams } from './getCalculatorParams';
-import { getCreditRate } from './getCreditRate';
-import { getCreditTermYears } from './getCreditTermYears';
-import { getDefaultMonths } from './getDefaultMonths';
-import { getDefaultSum } from './getDefaultSum';
-import { getMonthlyPayment } from './getMonthlyPayment';
-import { renderButton } from './renderButton';
-import { renderMonthsInput } from './renderMonthsInput';
-import { renderProposal } from './renderProposal';
-import { renderTermsButton } from './renderTermsButton';
-import { renderWantedSumInput } from './renderWantedSumInput';
-
-const DEFAULT_PAYMENT_TYPE = 'annuity';
-
-const BORDER_STYLE = 'border-solid border-[3px] border-primary-main rounded-md';
-
-export interface CreditCalculatorFormProps extends UniBlockProps {
-  directoryName?: string;
-}
-
-export const CreditCalculatorForm = JSX<CreditCalculatorFormProps>(({ context, directoryName }) => {
-  const [moneyValue, setMoneyValue] = context.useState<number | undefined>(undefined);
-  const [monthsValue, setMonthsValue] = context.useState<number | undefined>(undefined);
-  const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
-  const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
-
-  const tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
-  const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
-
-  const defaultSum = getDefaultSum(calculatorParams);
-  const defaultMonths = getDefaultMonths(calculatorParams);
-
-  const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
-  const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
-
-  const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
-
-  const monthlyPayment = getMonthlyPayment({
-    calculatorParams,
-    paymentType: DEFAULT_PAYMENT_TYPE,
-    rate,
-    sum: moneyValue || defaultSum,
-    months: monthsValue || defaultMonths,
-  });
-
-  const creditTermYears = getCreditTermYears(minMonths, maxMonths);
-
-  function handleButtonClick(value: number) {
-    setMonthsValue(clamp(value * MONTHS_IN_YEAR, minMonths, maxMonths));
-  }
-
-  return (
-    <section className="mt-7">
-      <div className={`box-border p-[49px] pr-[56px] mx-auto w-max ${BORDER_STYLE}`}>
-        <div className="flex justify-between">
-          <div className="mr-[42px]">
-            {renderWantedSumInput({ calculatorParams, moneyValue, defaultSum, setMoneyValue })}
-            {renderMonthsInput({
-              minMonths,
-              maxMonths,
-              monthsValue,
-              defaultMonths,
-              setMonthsValue,
-            })}
-            <div className="flex mb-7">
-              {creditTermYears.map((number, i) => renderButton(number, i, handleButtonClick))}
-            </div>
-            <Checkbox
-              text="Получаю пенсию на карту Россельхозбанка"
-              checked={isAnnuityChecked}
-              onChange={setIsAnnuityChecked}
-            />
-            <Checkbox
-              className="mt-3 mb-7"
-              text="Комплексная страховая защита"
-              checked={isInsuranceChecked}
-              onChange={setIsInsuranceChecked}
-            />
-          </div>
-          {renderProposal(monthlyPayment, rate)}
-        </div>
-        {renderTermsButton()}
-      </div>
-    </section>
-  );
-});

package/src/components/CreditCalculator/constants.ts

@@ -1,8 +0,0 @@
-export const DEFAULT_MIN_SUM = 30000;
-export const DEFAULT_MAX_SUM = 3000000;
-export const DEFAULT_SUM = (DEFAULT_MAX_SUM - DEFAULT_MIN_SUM) / 2;
-export const DEFAULT_MIN_MONTHS = 1;
-export const DEFAULT_MAX_MONTHS = 84;
-export const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
-
-export const MONTHS_IN_YEAR = 12;

package/src/components/CreditCalculator/defaultTabs.ts

@@ -1,22 +0,0 @@
-import type { CreditCalculatorTab } from './CreditCalculatorContent';
-
-export const DEFAULT_TABS: CreditCalculatorTab[] = [
-  {
-    title: 'Кредит',
-    description: 'Ставка от 6% до 7 лет',
-    directoryName: 'credit-calculator-data',
-    icon: { icon: 'CardIcon' },
-  },
-  {
-    title: 'Кредит',
-    description: 'Ставка от 4% до 7 лет',
-    directoryName: 'credit-calculator-data1',
-    icon: { icon: 'ChartSquareIcon' },
-  },
-  {
-    title: 'Кредит',
-    description: 'Ставка от 3% до 6 лет',
-    directoryName: 'credit-calculator-data2',
-    icon: { icon: 'DiscountShapeIcon' },
-  },
-];

package/src/components/CreditCalculator/getCalculatorParams.ts

@@ -1,16 +0,0 @@
-import type { CalculatorParams } from './CreditCalculatorContent';
-
-interface GetCalculatorParamsParams {
-  tableRows?: CalculatorParams[];
-  isAnnuity?: boolean;
-}
-
-export const getCalculatorParams = (params: GetCalculatorParamsParams) => {
-  const { tableRows, isAnnuity = false } = params;
-
-  if (!tableRows) return {};
-
-  const calculatorParams = tableRows.find((row) => row.isAnnuity === isAnnuity);
-
-  return calculatorParams || {};
-};

package/src/components/CreditCalculator/getCreditRate.ts

@@ -1,18 +0,0 @@
-import type { CalculatorParams } from './CreditCalculatorContent';
-
-const DEFAULT_RATE = 5;
-
-interface GetCreditRateParams {
-  calculatorParams?: CalculatorParams;
-  isInsurance: boolean;
-}
-
-export const getCreditRate = (params: GetCreditRateParams) => {
-  const { calculatorParams, isInsurance } = params;
-
-  if (!calculatorParams) return DEFAULT_RATE;
-
-  return isInsurance
-    ? calculatorParams?.rateWithInsurance || DEFAULT_RATE
-    : calculatorParams?.rateWithoutInsurance || DEFAULT_RATE;
-};

package/src/components/CreditCalculator/getCreditTermYears.spec.ts

@@ -1,10 +0,0 @@
-import { getCreditTermYears } from './getCreditTermYears';
-
-describe('getCreditTermYears', () => {
-  it('should return array starts from min year plus one and ends with max year', () => {
-    const minMonths = 12;
-    const maxMonths = 96;
-    const items = [2, 3, 4, 5, 6, 8];
-    expect(getCreditTermYears(minMonths, maxMonths)).toEqual(items);
-  });
-});

package/src/components/CreditCalculator/getCreditTermYears.ts

@@ -1,15 +0,0 @@
-import { MONTHS_IN_YEAR } from './constants';
-
-const MAX_YEARS_LENGTH = 5;
-
-export const getCreditTermYears = (minMonths: number, maxMonths: number) => {
-  const totalYears = Math.ceil((maxMonths - minMonths) / 12);
-  const firstYear = Math.floor(minMonths / MONTHS_IN_YEAR) + 1;
-
-  const result = new Array(Math.min(totalYears - 1, MAX_YEARS_LENGTH))
-    .fill(0)
-    .map((_, i) => firstYear + i);
-
-  const maxYear = totalYears + firstYear - 1;
-  return result.concat(maxYear);
-};

package/src/components/CreditCalculator/getDefaultMonths.ts

@@ -1,7 +0,0 @@
-import { DEFAULT_MONTHS } from './constants';
-import type { CalculatorParams } from './CreditCalculatorContent';
-
-export const getDefaultMonths = (calculatorParams: CalculatorParams) =>
-  calculatorParams.maxMonths && calculatorParams.minMonths
-    ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
-    : DEFAULT_MONTHS;

package/src/components/CreditCalculator/getDefaultSum.ts

@@ -1,7 +0,0 @@
-import { DEFAULT_SUM } from './constants';
-import type { CalculatorParams } from './CreditCalculatorContent';
-
-export const getDefaultSum = (calculatorParams: CalculatorParams) =>
-  calculatorParams.maxSum && calculatorParams.minSum
-    ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
-    : DEFAULT_SUM;

package/src/components/CreditCalculator/getMonthlyPayment.ts

@@ -1,32 +0,0 @@
-import { clamp } from '../../utils/clamp';
-import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM, MONTHS_IN_YEAR } from './constants';
-import type { CalculatorParams } from './CreditCalculatorContent';
-
-type PaymentType = 'annuity' | 'differentiated';
-
-interface GetMonthlyPaymentParams {
-  calculatorParams?: CalculatorParams;
-  paymentType: PaymentType;
-  rate: number;
-  sum: number;
-  months: number;
-}
-
-export const getMonthlyPayment = (params: GetMonthlyPaymentParams) => {
-  const { calculatorParams, paymentType, rate, sum, months } = params;
-
-  if (!calculatorParams) return 0;
-
-  const finalSum = clamp(
-    sum,
-    calculatorParams.minSum || DEFAULT_MIN_SUM,
-    calculatorParams.maxSum || DEFAULT_MAX_SUM,
-  );
-
-  if (paymentType === 'annuity') {
-    const annuityCoef = Number(rate) / (MONTHS_IN_YEAR * 100);
-    return finalSum * (annuityCoef + annuityCoef / (Math.pow(1 + annuityCoef, months) - 1));
-  } else {
-    return finalSum / months + finalSum * (Number(rate) / 12);
-  }
-};

package/src/components/CreditCalculator/renderButton.tsx

@@ -1,23 +0,0 @@
-import { tableFunc } from '../../utils/tableFunc';
-
-const func = tableFunc<number, string>([
-  [(_) => _ === 1, 'год'],
-  [(_) => _ <= 4, 'года'],
-  [() => true, 'лет'],
-]);
-
-export function renderButton(number: number, i: number, handleClick: (number: number) => void) {
-  const string = func(number);
-
-  return (
-    <button
-      key={String(i)}
-      className="bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none"
-      onClick={() => handleClick(number)}
-    >
-      <span className="font-semibold text-sm">
-        {number} {string}
-      </span>
-    </button>
-  );
-}

package/src/components/CreditCalculator/renderMonthsInput.tsx

@@ -1,29 +0,0 @@
-import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
-
-const STEP_MONTHS = 1;
-
-interface RenderMonthsInputProps {
-  minMonths: number;
-  maxMonths: number;
-  monthsValue: number | undefined;
-  defaultMonths: number;
-  setMonthsValue: InputRangeProps['onChange'];
-}
-
-export function renderMonthsInput(props: RenderMonthsInputProps) {
-  const { minMonths, maxMonths, monthsValue, defaultMonths, setMonthsValue } = props;
-
-  return (
-    <InputRange
-      className="mt-[23px]"
-      title="Срок кредита, месяцев"
-      items={['Или выберите из предложенных вариантов ниже']}
-      min={minMonths}
-      max={maxMonths}
-      step={STEP_MONTHS}
-      value={monthsValue || defaultMonths}
-      onChange={setMonthsValue}
-    />
-  );
-}

package/src/components/CreditCalculator/renderProposal.tsx

@@ -1,13 +0,0 @@
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-
-export function renderProposal(monthlyPayment: number, rate: number) {
-  return (
-    <div className="box-border h-fit p-9 bg-primary-main rounded-md text-white">
-      <div className="text-base mb-[18px]">Наше предложение</div>
-      <div className="text-sm opacity-60">Ежемесячный платёж</div>
-      <div className="text-lg mb-3">{addSpacesBetweenNumbers(Math.round(monthlyPayment))} ₽</div>
-      <div className="text-sm opacity-60">Ставка</div>
-      <div className="text-lg">{rate} %</div>
-    </div>
-  );
-}

package/src/components/CreditCalculator/renderTermsButton.tsx

@@ -1,16 +0,0 @@
-import { Button } from '../../ui-kit/Button/Button';
-
-export function renderTermsButton() {
-  return (
-    <div className="flex items-center">
-      <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
-      <div
-        className="w-80 text-2xs leading-4 text-secondary-text"
-        aria-label="Соглашение на обработку персональных данных"
-      >
-        Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
-        требованиям ФЗ «О персональных данных»
-      </div>
-    </div>
-  );
-}

package/src/components/CreditCalculator/renderWantedSumInput.tsx

@@ -1,36 +0,0 @@
-import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { DEFAULT_MAX_SUM, DEFAULT_MIN_SUM } from './constants';
-import type { CalculatorParams } from './CreditCalculatorContent';
-
-const STEP_MONEY = 1000;
-
-interface RenderWantedSumInputProps {
-  calculatorParams: CalculatorParams;
-  moneyValue: number | undefined;
-  defaultSum: number;
-  setMoneyValue: InputRangeProps['onChange'];
-}
-
-export function renderWantedSumInput(props: RenderWantedSumInputProps) {
-  const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
-
-  const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-  const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
-
-  return (
-    <InputRange
-      title="Желаемая сумма кредита, ₽"
-      items={[
-        `От ${addSpacesBetweenNumbers(minSum)} рублей`,
-        `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
-      ]}
-      min={minSum}
-      max={maxSum}
-      step={STEP_MONEY}
-      value={moneyValue || defaultSum}
-      onChange={setMoneyValue}
-    />
-  );
-}

package/src/components/Header/HeaderSubMenuObserver.ts

@@ -1,48 +0,0 @@
-import { isSSR } from '../../utils/isSSR';
-
-const isClient = !isSSR();
-
-export const headerSubMenuObserver = isClient
-  ? new IntersectionObserver(
-      (entries) => {
-        const createArrays = (selectors) =>
-          selectors.map((_) => Array.from(window.document.querySelectorAll(_)));
-
-        const headerSubMenuButtonElement = window.document.querySelector(
-          '[data-header-submenu-visible=toggled]',
-        );
-        const [headerSubMenuItems, dotsHeaderSubMenuItems] = createArrays([
-          '[data-item-name=header-submenu]',
-          '[data-item-name=dots-header-submenu]',
-        ]);
-
-        const visibilityList = {};
-        entries.forEach((_) => {
-          visibilityList[_.target.toString()] = _.isIntersecting;
-        });
-        const isHeaderSubMenuButtonShow = toggleVisibilityInItems(
-          visibilityList,
-          dotsHeaderSubMenuItems,
-          'hidden',
-        );
-        toggleVisibilityInItems(visibilityList, headerSubMenuItems, 'invisible');
-        if (headerSubMenuButtonElement) {
-          isHeaderSubMenuButtonShow
-            ? headerSubMenuButtonElement.classList.remove('hidden')
-            : headerSubMenuButtonElement.classList.add('hidden');
-        }
-      },
-      { root: window.document, threshold: 1.0 },
-    )
-  : undefined;
-
-// TODO: add types
-const toggleVisibilityInItems = (visibilityList, items, className) => {
-  const isReversed = className !== 'hidden';
-  return items.some((_) => {
-    const key = _.toString();
-    const option = isReversed ? !visibilityList[key] : visibilityList[key];
-    key in visibilityList ? _.classList.toggle(className, option) : null;
-    return isReversed ? _.classList.contains('hidden') : !_.classList.contains('hidden');
-  });
-};