directionalProperty.js 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = directionalProperty;
  4. var _capitalizeString = _interopRequireDefault(require("../internalHelpers/_capitalizeString"));
  5. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
  6. var positionMap = ['Top', 'Right', 'Bottom', 'Left'];
  7. function generateProperty(property, position) {
  8. if (!property) return position.toLowerCase();
  9. var splitProperty = property.split('-');
  10. if (splitProperty.length > 1) {
  11. splitProperty.splice(1, 0, position);
  12. return splitProperty.reduce(function (acc, val) {
  13. return "" + acc + (0, _capitalizeString["default"])(val);
  14. });
  15. }
  16. var joinedProperty = property.replace(/([a-z])([A-Z])/g, "$1" + position + "$2");
  17. return property === joinedProperty ? "" + property + position : joinedProperty;
  18. }
  19. function generateStyles(property, valuesWithDefaults) {
  20. var styles = {};
  21. for (var i = 0; i < valuesWithDefaults.length; i += 1) {
  22. if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
  23. styles[generateProperty(property, positionMap[i])] = valuesWithDefaults[i];
  24. }
  25. }
  26. return styles;
  27. }
  28. /**
  29. * Enables shorthand for direction-based properties. It accepts a property (hyphenated or camelCased) and up to four values that map to top, right, bottom, and left, respectively. You can optionally pass an empty string to get only the directional values as properties. You can also optionally pass a null argument for a directional value to ignore it.
  30. * @example
  31. * // Styles as object usage
  32. * const styles = {
  33. * ...directionalProperty('padding', '12px', '24px', '36px', '48px')
  34. * }
  35. *
  36. * // styled-components usage
  37. * const div = styled.div`
  38. * ${directionalProperty('padding', '12px', '24px', '36px', '48px')}
  39. * `
  40. *
  41. * // CSS as JS Output
  42. *
  43. * div {
  44. * 'paddingTop': '12px',
  45. * 'paddingRight': '24px',
  46. * 'paddingBottom': '36px',
  47. * 'paddingLeft': '48px'
  48. * }
  49. */
  50. function directionalProperty(property) {
  51. for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  52. values[_key - 1] = arguments[_key];
  53. }
  54. // prettier-ignore
  55. var firstValue = values[0],
  56. _values$ = values[1],
  57. secondValue = _values$ === void 0 ? firstValue : _values$,
  58. _values$2 = values[2],
  59. thirdValue = _values$2 === void 0 ? firstValue : _values$2,
  60. _values$3 = values[3],
  61. fourthValue = _values$3 === void 0 ? secondValue : _values$3;
  62. var valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
  63. return generateStyles(property, valuesWithDefaults);
  64. }
  65. module.exports = exports.default;