Feature/custom theme

[absolemDev]

No description provided.

[Nelfimov]

В направлении одного из вариантов идешь. Главное - тестируй параллельно, а еще лучше пиши в пакете тесты - так точно убедимся в работоспособности

[absolemDev]

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

[Nelfimov]

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

[TorinAsakura]

понятие кастомных элементов не может работать нормально, при таком раскладе мы теряем контроль, так как кастомные элементы неизвестны и надо лезть вовнутрь

[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 - там предоставляется на компонент а функции обработчики. А их ты уже можешь вешать на свои компоненты с темой.

[Nelfimov]

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

[TorinAsakura]

почистить any

[absolemDev]

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

Создал ПР torin-asakura/drum-in#124

[TorinAsakura]

почти