You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

63 lines
1.4 KiB

  1. import responsivePropType from './responsivePropType';
  2. import { handleBreakpoints } from './breakpoints';
  3. function getPath(obj, path) {
  4. if (!path || typeof path !== 'string') {
  5. return null;
  6. }
  7. return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
  8. }
  9. function style(options) {
  10. const {
  11. prop,
  12. cssProperty = options.prop,
  13. themeKey,
  14. transform
  15. } = options;
  16. const fn = props => {
  17. if (props[prop] == null) {
  18. return null;
  19. }
  20. const propValue = props[prop];
  21. const theme = props.theme;
  22. const themeMapping = getPath(theme, themeKey) || {};
  23. const styleFromPropValue = propValueFinal => {
  24. let value;
  25. if (typeof themeMapping === 'function') {
  26. value = themeMapping(propValueFinal);
  27. } else if (Array.isArray(themeMapping)) {
  28. value = themeMapping[propValueFinal];
  29. } else {
  30. value = getPath(themeMapping, propValueFinal) || propValueFinal;
  31. if (transform) {
  32. value = transform(value);
  33. }
  34. }
  35. if (cssProperty === false) {
  36. return value;
  37. }
  38. return {
  39. [cssProperty]: value
  40. };
  41. };
  42. return handleBreakpoints(props, propValue, styleFromPropValue);
  43. };
  44. fn.propTypes = process.env.NODE_ENV !== 'production' ? {
  45. [prop]: responsivePropType
  46. } : {};
  47. fn.filterProps = [prop];
  48. return fn;
  49. }
  50. export default style;