Feature/custom theme

[absolemDev]

@Nelfimov, пока что без тестов. Посмотри логику.

[Nelfimov]

Не прикрепил задачу и не поставил себя в ответственные.

[absolemDev]

@Nelfimov, сейчас пробую такой подход:

1. Из проекта беру функцию стилизации элемента и отдаю виджету:

input.component.tsx:

...
export const InputElement = styled.div<any>(
  baseStyles,
  shapeStyles,
  appearanceStyles,
  transitionStyles,
  layout
);

export const styledInput = InputElement.withComponent;
...

form-content.component.tsx:

...
<Widget
    amount={5000}
    settings={{ storeId: "id" }}
    additionalFields={additionalFieldsWidget}
    styles={{ styledInput }}
 />
...

3. В виджете по условию рендерю инпут:

input.component.tsx:

...
const CustomInput = styledInput ? styledInput("div") : null;

  return (
...
      {styledInput ? (
        <CustomInput {...props} error={errorText !== ""}>
          <RawInput
            ref={ref}
            type={type}
            required={required}
            disabled={disabled}
            value={value}
            onChange={changeValue}
            placeholder={required ? `${placeholder}*` : placeholder}
            {...props}
          />
        </CustomInput>
      ) : (
        <InputElement {...props} error={errorText !== ""}>
          <RawInput
            ref={ref}
            type={type}
            required={required}
            disabled={disabled}
            value={value}
            onChange={changeValue}
            placeholder={required ? `${placeholder}*` : placeholder}
            {...props}
          />
        </InputElement>
      )}
...

Но сталкиваюсь с такой же проблемой как если предавать массив "стилей" [baseStyles, shapeStyles, appearanceStyles, transitionStyles, layout]. Инпут начинает вести себя некорректно: ловит фокус только с третьего клика, теряет фокус после ввода одного символа в поле, теряет фокус если не :hover.

[Nelfimov]

Тогда попробуй подход из соседнего пакета next-identity-integration - там предоставляется на компонент а функции обработчики. А их ты уже можешь вешать на свои компоненты с темой.

[absolemDev]

И покажи пример как ты будешь использовать враппер

Создал ПР https://github.com/torin-asakura/drum-in/pull/124

[absolemDev]

Преобразовал аргументы обертки инпута в объект

[absolemDev]

Добавил disabled в контекст формы. Для чилдрена врапера кнопки добавил аргумент: объект с ключами type и disabled

[absolemDev]

ну и главный вопрос - проводишь ли тесты по этим доработкам в проекте?

Да, конечно

[absolemDev]

@Nelfimov, залил в драмин https://github.com/torin-asakura/drum-in/pull/124