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.
79 lines
2.6 KiB
79 lines
2.6 KiB
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports["default"] = directionalProperty;
|
|
|
|
var _capitalizeString = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("../internalHelpers/_capitalizeString"));
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
|
|
var positionMap = ['Top', 'Right', 'Bottom', 'Left'];
|
|
|
|
function generateProperty(property, position) {
|
|
if (!property) return position.toLowerCase();
|
|
var splitProperty = property.split('-');
|
|
|
|
if (splitProperty.length > 1) {
|
|
splitProperty.splice(1, 0, position);
|
|
return splitProperty.reduce(function (acc, val) {
|
|
return "" + acc + (0, _capitalizeString["default"])(val);
|
|
});
|
|
}
|
|
|
|
var joinedProperty = property.replace(/([a-z])([A-Z])/g, "$1" + position + "$2");
|
|
return property === joinedProperty ? "" + property + position : joinedProperty;
|
|
}
|
|
|
|
function generateStyles(property, valuesWithDefaults) {
|
|
var styles = {};
|
|
|
|
for (var i = 0; i < valuesWithDefaults.length; i += 1) {
|
|
if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
|
|
styles[generateProperty(property, positionMap[i])] = valuesWithDefaults[i];
|
|
}
|
|
}
|
|
|
|
return styles;
|
|
}
|
|
/**
|
|
* 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.
|
|
* @example
|
|
* // Styles as object usage
|
|
* const styles = {
|
|
* ...directionalProperty('padding', '12px', '24px', '36px', '48px')
|
|
* }
|
|
*
|
|
* // styled-components usage
|
|
* const div = styled.div`
|
|
* ${directionalProperty('padding', '12px', '24px', '36px', '48px')}
|
|
* `
|
|
*
|
|
* // CSS as JS Output
|
|
*
|
|
* div {
|
|
* 'paddingTop': '12px',
|
|
* 'paddingRight': '24px',
|
|
* 'paddingBottom': '36px',
|
|
* 'paddingLeft': '48px'
|
|
* }
|
|
*/
|
|
|
|
|
|
function directionalProperty(property) {
|
|
for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
values[_key - 1] = arguments[_key];
|
|
}
|
|
|
|
// prettier-ignore
|
|
var firstValue = values[0],
|
|
_values$ = values[1],
|
|
secondValue = _values$ === void 0 ? firstValue : _values$,
|
|
_values$2 = values[2],
|
|
thirdValue = _values$2 === void 0 ? firstValue : _values$2,
|
|
_values$3 = values[3],
|
|
fourthValue = _values$3 === void 0 ? secondValue : _values$3;
|
|
var valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
|
|
return generateStyles(property, valuesWithDefaults);
|
|
}
|
|
|
|
module.exports = exports.default; |