UNPKG

@commercetools-uikit/constraints

Version:

Constraints are container elements with a configurable constraint size, like width or height.

86 lines (75 loc) 5.27 kB
'use strict'; 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'); require('prop-types'); require('react'); 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 getConstraintStyles(maxProp) { const constraintToken = maxProp ? getMaxPropTokenValue(maxProp) : null; return /*#__PURE__*/react.css(constraintToken ? `max-width: ${constraintToken};` : '', " ", maxProp === 'auto' ? 'width: auto;' : '', ";" + ("" ), "" ); } var _ref = { name: "n48rgu", styles: "width:100%;position:relative" } ; const Horizontal = props => jsxRuntime.jsx("div", _objectSpread(_objectSpread({ css: [_ref, getConstraintStyles(props.max), "" , "" ] }, utils.filterDataAttributes(props)), {}, { children: props.children })); Horizontal.propTypes = {}; var Horizontal$1 = Horizontal; // NOTE: This string will be replaced on build time with the package version. var version = "19.22.7"; // eslint-disable-next-line import/prefer-default-export const Constraints = { Horizontal: Horizontal$1, getAcceptedMaxPropValues, getMaxPropTokenValue }; exports["default"] = Constraints; exports.version = version;