@commercetools-uikit/constraints
Version:
Constraints are container elements with a configurable constraint size, like width or height.
88 lines (77 loc) • 11.3 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
var _Array$from = require('@babel/runtime-corejs3/core-js-stable/array/from');
var designSystem = require('@commercetools-uikit/design-system');
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
var react = require('@emotion/react');
var utils = require('@commercetools-uikit/utils');
var jsxRuntime = require('@emotion/react/jsx-runtime');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
var _Array$from__default = /*#__PURE__*/_interopDefault(_Array$from);
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
// `null` is derived from `getMaxPropEquivalent`
const getMaxPropTokenValue = max => {
if (!max) return null;
const tokenName = `constraint${max}`;
if (tokenName in designSystem.designTokens) {
return designSystem.designTokens[tokenName];
}
return null;
};
// Generates an array of accepted values for the max prop, given a min and max
const getAcceptedMaxPropValues = function () {
var _context;
let min = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
let max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
return [..._mapInstanceProperty__default["default"](_context = _Array$from__default["default"]({
length: max - min + 1
})).call(_context, (_, index) => index + min), 'scale', 'auto'];
};
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
function getConstraintStyles(maxProp) {
const constraintToken = maxProp ? getMaxPropTokenValue(maxProp) : null;
return /*#__PURE__*/react.css(constraintToken ? `max-width: ${constraintToken};` : '', " ", maxProp === 'auto' ? 'width: auto;' : '', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getConstraintStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvcml6b250YWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DWSIsImZpbGUiOiJob3Jpem9udGFsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuaW1wb3J0IHsgZ2V0TWF4UHJvcFRva2VuVmFsdWUgfSBmcm9tICcuLi9oZWxwZXJzJztcblxuZXhwb3J0IHR5cGUgVE1heFByb3AgPVxuICB8IDFcbiAgfCAyXG4gIHwgM1xuICB8IDRcbiAgfCA1XG4gIHwgNlxuICB8IDdcbiAgfCA4XG4gIHwgOVxuICB8IDEwXG4gIHwgMTFcbiAgfCAxMlxuICB8IDEzXG4gIHwgMTRcbiAgfCAxNVxuICB8IDE2XG4gIHwgJ3NjYWxlJ1xuICB8ICdhdXRvJztcblxuZXhwb3J0IHR5cGUgVEhvcml6b250YWxQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSB2YWx1ZSBvZiB0aGUgY29uc3RyYWludC4gU2VlIGVxdWl2YWxlbnQgcGl4ZWwgdmFsdWVzIFtoZXJlXShodHRwczovL3Vpa2l0LmNvbW1lcmNldG9vbHMuY29tLz9wYXRoPS9zdG9yeS9iYXNpY3MtdG9rZW5zLS1hbGwtdG9rZW5zKS5cbiAgICovXG4gIG1heD86IFRNYXhQcm9wO1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xufTtcblxuZnVuY3Rpb24gZ2V0Q29uc3RyYWludFN0eWxlcyhtYXhQcm9wPzogVE1heFByb3ApIHtcbiAgY29uc3QgY29uc3RyYWludFRva2VuID0gbWF4UHJvcCA/IGdldE1heFByb3BUb2tlblZhbHVlKG1heFByb3ApIDogbnVsbDtcbiAgcmV0dXJuIGNzc2BcbiAgICAke2NvbnN0cmFpbnRUb2tlbiA/IGBtYXgtd2lkdGg6ICR7Y29uc3RyYWludFRva2VufTtgIDogJyd9XG4gICAgJHttYXhQcm9wID09PSAnYXV0bycgPyAnd2lkdGg6IGF1dG87JyA6ICcnfVxuICBgO1xufVxuXG5jb25zdCBIb3Jpem9udGFsID0gKHByb3BzOiBUSG9yaXpvbnRhbFByb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e1tcbiAgICAgIGNzc2BcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGAsXG4gICAgICBnZXRDb25zdHJhaW50U3R5bGVzKHByb3BzLm1heCksXG4gICAgXX1cbiAgICB7Li4uZmlsdGVyRGF0YUF0dHJpYnV0ZXMocHJvcHMpfVxuICA+XG4gICAge3Byb3BzLmNoaWxkcmVufVxuICA8L2Rpdj5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IEhvcml6b250YWw7XG4iXX0= */");
}
var _ref = process.env.NODE_ENV === "production" ? {
name: "n48rgu",
styles: "width:100%;position:relative"
} : {
name: "cu7d5n-Horizontal",
styles: "width:100%;position:relative;label:Horizontal;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvcml6b250YWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRDUyIsImZpbGUiOiJob3Jpem9udGFsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuaW1wb3J0IHsgZ2V0TWF4UHJvcFRva2VuVmFsdWUgfSBmcm9tICcuLi9oZWxwZXJzJztcblxuZXhwb3J0IHR5cGUgVE1heFByb3AgPVxuICB8IDFcbiAgfCAyXG4gIHwgM1xuICB8IDRcbiAgfCA1XG4gIHwgNlxuICB8IDdcbiAgfCA4XG4gIHwgOVxuICB8IDEwXG4gIHwgMTFcbiAgfCAxMlxuICB8IDEzXG4gIHwgMTRcbiAgfCAxNVxuICB8IDE2XG4gIHwgJ3NjYWxlJ1xuICB8ICdhdXRvJztcblxuZXhwb3J0IHR5cGUgVEhvcml6b250YWxQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSB2YWx1ZSBvZiB0aGUgY29uc3RyYWludC4gU2VlIGVxdWl2YWxlbnQgcGl4ZWwgdmFsdWVzIFtoZXJlXShodHRwczovL3Vpa2l0LmNvbW1lcmNldG9vbHMuY29tLz9wYXRoPS9zdG9yeS9iYXNpY3MtdG9rZW5zLS1hbGwtdG9rZW5zKS5cbiAgICovXG4gIG1heD86IFRNYXhQcm9wO1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xufTtcblxuZnVuY3Rpb24gZ2V0Q29uc3RyYWludFN0eWxlcyhtYXhQcm9wPzogVE1heFByb3ApIHtcbiAgY29uc3QgY29uc3RyYWludFRva2VuID0gbWF4UHJvcCA/IGdldE1heFByb3BUb2tlblZhbHVlKG1heFByb3ApIDogbnVsbDtcbiAgcmV0dXJuIGNzc2BcbiAgICAke2NvbnN0cmFpbnRUb2tlbiA/IGBtYXgtd2lkdGg6ICR7Y29uc3RyYWludFRva2VufTtgIDogJyd9XG4gICAgJHttYXhQcm9wID09PSAnYXV0bycgPyAnd2lkdGg6IGF1dG87JyA6ICcnfVxuICBgO1xufVxuXG5jb25zdCBIb3Jpem9udGFsID0gKHByb3BzOiBUSG9yaXpvbnRhbFByb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e1tcbiAgICAgIGNzc2BcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGAsXG4gICAgICBnZXRDb25zdHJhaW50U3R5bGVzKHByb3BzLm1heCksXG4gICAgXX1cbiAgICB7Li4uZmlsdGVyRGF0YUF0dHJpYnV0ZXMocHJvcHMpfVxuICA+XG4gICAge3Byb3BzLmNoaWxkcmVufVxuICA8L2Rpdj5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IEhvcml6b250YWw7XG4iXX0= */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
const Horizontal = props => jsxRuntime.jsx("div", _objectSpread(_objectSpread({
css: [_ref, getConstraintStyles(props.max), process.env.NODE_ENV === "production" ? "" : ";label:Horizontal;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvcml6b250YWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDSSIsImZpbGUiOiJob3Jpem9udGFsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuaW1wb3J0IHsgZ2V0TWF4UHJvcFRva2VuVmFsdWUgfSBmcm9tICcuLi9oZWxwZXJzJztcblxuZXhwb3J0IHR5cGUgVE1heFByb3AgPVxuICB8IDFcbiAgfCAyXG4gIHwgM1xuICB8IDRcbiAgfCA1XG4gIHwgNlxuICB8IDdcbiAgfCA4XG4gIHwgOVxuICB8IDEwXG4gIHwgMTFcbiAgfCAxMlxuICB8IDEzXG4gIHwgMTRcbiAgfCAxNVxuICB8IDE2XG4gIHwgJ3NjYWxlJ1xuICB8ICdhdXRvJztcblxuZXhwb3J0IHR5cGUgVEhvcml6b250YWxQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSB2YWx1ZSBvZiB0aGUgY29uc3RyYWludC4gU2VlIGVxdWl2YWxlbnQgcGl4ZWwgdmFsdWVzIFtoZXJlXShodHRwczovL3Vpa2l0LmNvbW1lcmNldG9vbHMuY29tLz9wYXRoPS9zdG9yeS9iYXNpY3MtdG9rZW5zLS1hbGwtdG9rZW5zKS5cbiAgICovXG4gIG1heD86IFRNYXhQcm9wO1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xufTtcblxuZnVuY3Rpb24gZ2V0Q29uc3RyYWludFN0eWxlcyhtYXhQcm9wPzogVE1heFByb3ApIHtcbiAgY29uc3QgY29uc3RyYWludFRva2VuID0gbWF4UHJvcCA/IGdldE1heFByb3BUb2tlblZhbHVlKG1heFByb3ApIDogbnVsbDtcbiAgcmV0dXJuIGNzc2BcbiAgICAke2NvbnN0cmFpbnRUb2tlbiA/IGBtYXgtd2lkdGg6ICR7Y29uc3RyYWludFRva2VufTtgIDogJyd9XG4gICAgJHttYXhQcm9wID09PSAnYXV0bycgPyAnd2lkdGg6IGF1dG87JyA6ICcnfVxuICBgO1xufVxuXG5jb25zdCBIb3Jpem9udGFsID0gKHByb3BzOiBUSG9yaXpvbnRhbFByb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e1tcbiAgICAgIGNzc2BcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGAsXG4gICAgICBnZXRDb25zdHJhaW50U3R5bGVzKHByb3BzLm1heCksXG4gICAgXX1cbiAgICB7Li4uZmlsdGVyRGF0YUF0dHJpYnV0ZXMocHJvcHMpfVxuICA+XG4gICAge3Byb3BzLmNoaWxkcmVufVxuICA8L2Rpdj5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IEhvcml6b250YWw7XG4iXX0= */"]
}, utils.filterDataAttributes(props)), {}, {
children: props.children
}));
var Horizontal$1 = Horizontal;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.6.1";
// eslint-disable-next-line import/prefer-default-export
const Constraints = {
Horizontal: Horizontal$1,
getAcceptedMaxPropValues,
getMaxPropTokenValue
};
exports["default"] = Constraints;
exports.version = version;