Компоненты высшего порядка в Hyperstack - PullRequest
Новая
       20

Компоненты высшего порядка в Hyperstack

2 голосов
/ 05 апреля 2019

Часто встречаются сценарии использования библиотек javascript, в которых вы хотите украсить свои компоненты компонентами более высокого порядка.

Например, библиотека material-ui включает в себя стилевой компонент высшего порядка withStyles.

В javascript вы бы сделали 

import { withStyles } from '@material-ui/core';

const styles = {
  example: {
    padding: 8
  }
}
const SomeComponent = ({classes}) => <div className={classes.example}>I'm a component</div>;

export default withStyles(SomeComponent);

Как добиться того же в Hyperstack?

1 Ответ

2 голосов
/ 06 апреля 2019

Во-первых, похоже, что проблема , которую нужно исправить.Это будет исправлено в следующей версии: просто добавьте этот метод в базовый класс Hypercomponent (app/hyperstack/components/hypercomponent.rb) 

def self.to_n
  Hyperstack::Internal::Component::ReactWrapper.create_native_react_class(self)
end

Теперь, если у вас есть следующие стили: 

MY_STYLES = {root: {backgroundColor: 'red'}}

и компонент, который вы хотите стилизовать: 

class StyleTest < HyperComponent
  param :some_param
  param :classes
  render do
    DIV(class: classes[:root]) { some_param }
  end
end

Вы можете сделать это так: 

class StyledTest1 < HyperComponent
  imports `Mui.withStyles(#{MY_STYLES.to_n})(#{StyleTest.to_n})`
end

То, что происходит, - это то, что мы выпадаем в JS с помощью обратных галочек ивызов Mui.with_styles напрямую и передача его MY_STYLES (как в примере с MUI doc).to_n конвертирует из Ruby Hash в объект JS.(При передаче параметров компонентам это происходит автоматически, но не так с простыми вызовами функций.)

Затем мы вызываем результирующий HOC с нашим классом StyleTest (также вызывая to_n для преобразования из класса Ruby впростой класс JS.)

Наконец, мы импортируем его обратно в класс компонентов Hyperstack.

Это немного больше работы, чем мне нравится, поэтому мы можем просто добавить удобный вспомогательный метод в нашHyperComponent class: 

class HyperComponent
  include Hyperstack::Component
  include Hyperstack::State::Observable
  param_accessor_style :accessors  # this is now the prefered param style

  # patch for issue: https://github.com/hyperstack-org/hyperstack/issues/153
  def self.to_n
    Hyperstack::Internal::Component::ReactWrapper.create_native_react_class(self)
  end

  # our helper macro:
  def self.add_styles(style, opts = {})
    imports `Mui.withStyles(#{style.to_n}, #{opts.to_n})(#{superclass.to_n})`
  end
end

Теперь мы можем добавить стили, подобные этому: 

class StyledTest2 < StyleTest
  add_styles MY_STYLE
end

, и теперь у нас есть новый класс компонентов с нашим стилем в нем.

Например: 

class App < HyperComponent

  render do
    DIV do
      StyledTest1(some_param: 'test 1')
      StyledTest2(some_param: 'test 2')
    end
  end
end
...