Как выполнить и объединить несколько функций результата с помощью Lodash - PullRequest
Новая
       9

Как выполнить и объединить несколько функций результата с помощью Lodash

0 голосов
/ 24 мая 2018

Предположим, что у нас есть 2 разные функции (или более), которые принимают один аргумент от какого-либо исполнителя и возвращают объект результата.Позвольте мне показать в примере: 

const style_1 = theme => ({
  header : {
      color : theme.primary
    }
})

const style_2 = theme => ({
  header : {
      backgroundColor : theme.secondary,
      color : "red"
    }
})

Я хочу выполнить их и объединить полученный объект в один!В случае объектов это тривиальная задача, например. 

const style_1 = {
  header : {
      color : theme.primary
    }
}

const style_2 = {
  header : {
      backgroundColor : theme.secondary,
      color : "red"
    }
}

 const res = {...style_1, ...style_2}

ожидаемый результат 

 { 
   header :
     { 
       backgroundColor : "black",
       color : "red"
      }
}

Но в случае функций это становится немного раздражающим.

Таквопрос есть.Можно ли реализовать то, что я хочу?(через Lodash или с помощью чего-то еще)

Я решил, что мог бы создать что-то подобное 

const style_1 = theme => ({
    header : {
        color : theme.secondary
        backgroundColor : "black"
    },
    footer : {
        color : "purple"
    }
})

const style_2 = (theme, extendStyles) => {
    const extendStyles = extendStyles(theme);

    return {
        header : {
            color : theme.primary,
            ...extendsStyles.header
        },
        ...extendStyles
    }
}

, но это решение немного уродливо, потому что я должен позаботиться об этомвещь в каждом стиле, которая может быть переопределена.Может быть, существуют какие-то утилиты / помощники, которые могут помочь справиться с этим более приятным способом?

PS Не спрашивайте меня об этих интересных требованиях, это просто withStyle особенностьMaterilUI и я задавались вопросом, как правильно с этим справиться.

Спасибо за любую помощь.

1 Ответ

0 голосов
/ 16 декабря 2018

Вы можете использовать _.invokeMap() и _.merge(), чтобы сгенерировать комбинированный стилизованный объект из массива функций стиля и темы: 

const applyTheme = (styles, theme) =>
  _.merge(..._.invokeMap(styles, _.call, null, theme));

const style_1 = theme => ({
  header : {
      color : theme.primary,
      border: `1px solid ${theme.primary}`
    }
})

const style_2 = theme => ({
  header : {
      backgroundColor : theme.secondary,
      color : "red"
    }
})

const theme = { primary: 'red', secondary: 'blue' }

const result = applyTheme([style_1, style_2], theme)

console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
...