UNPKG

@nfq/react-grid

Version:

An fork of react-awesome-styled-grid with more screen classes and some features.

37 lines (34 loc) 10.5 kB
import _styled from '@emotion/styled/base'; import React from 'react'; import { mergeMediaQueries } from '../../utils/styling.js'; import { useDebug } from '../hooks/useDebug.js'; import { debugCss } from '../util/debugCss.js'; import { calcSpacerMaxValues, calcSpacerMeasures, calcSpacerInline } from './utils.js'; const Spacer = ({ isInline = false, isNotStretching = false, maxX, maxY, testId = 'Spacer', x, y }) => { const className = useDebug(); return React.createElement(SpacerElement, { $isInline: isInline, $isNotStretching: isNotStretching, $maxX: maxX, $maxY: maxY, $x: x, $y: y, "aria-hidden": "true", className: className, "data-cy": testId }); }; Spacer.displayName = 'Spacer'; const SpacerElement = _styled("span", { target: "e7fb9ih0" })("--nfq-grid-spacer-max-x-calc:calc(var(--nfq-grid-spacer-max-x) * var(--nfq-grid-base-spacing));--nfq-grid-spacer-max-y-calc:calc(var(--nfq-grid-spacer-max-y) * var(--nfq-grid-base-spacing));flex:1 1 0rem;height:calc(var(--nfq-grid-spacer-y) * var(--nfq-grid-base-spacing));max-height:var(--nfq-grid-spacer-max-y-calc, initial);max-width:var(--nfq-grid-spacer-max-x-calc, initial);min-height:calc(var(--nfq-grid-spacer-y) * var(--nfq-grid-base-spacing));min-width:calc(var(--nfq-grid-spacer-x) * var(--nfq-grid-base-spacing));width:calc(var(--nfq-grid-spacer-x) * var(--nfq-grid-base-spacing));", mergeMediaQueries(calcSpacerInline, calcSpacerMeasures('x'), calcSpacerMeasures('y'), calcSpacerMaxValues('y'), calcSpacerMaxValues('x')), ";", debugCss('spacer'), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNwYWNlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUlxRCIsImZpbGUiOiJTcGFjZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgbm8tdW5kZWZpbmVkICovXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7bWVyZ2VNZWRpYVF1ZXJpZXN9IGZyb20gJy4uLy4uL3V0aWxzL3N0eWxpbmcnO1xuaW1wb3J0IHt1c2VEZWJ1Z30gZnJvbSAnLi4vaG9va3MvdXNlRGVidWcnO1xuaW1wb3J0IHtkZWJ1Z0Nzc30gZnJvbSAnLi4vdXRpbC9kZWJ1Z0Nzcyc7XG5cbmltcG9ydCB7Y2FsY1NwYWNlcklubGluZSwgY2FsY1NwYWNlck1heFZhbHVlcywgY2FsY1NwYWNlck1lYXN1cmVzfSBmcm9tICcuL3V0aWxzJztcblxuaW1wb3J0IHR5cGUge0JyZWFrcG9pbnRzfSBmcm9tICcuLi8uLi9zaGFyZWRUeXBlcy9icmVha3BvaW50VHlwZXMnO1xuaW1wb3J0IHR5cGUge1NwYWNlck9iamVjdH0gZnJvbSAnLi4vLi4vc2hhcmVkVHlwZXMvY29tcG9uZW50VHlwZXMnO1xuXG4vKipcbiAqIFByb3BzIGZvciB0aGUgYDxTcGFjZXIgLz5gIGNvbXBvbmVudCBpbiBgQG5mcS9yZWFjdC1ncmlkYC5cbiAqIFRoaXMgaW50ZXJmYWNlIGRlZmluZXMgYSBmbGV4aWJsZSBBUEkgZm9yIGFwcGx5aW5nIGhvcml6b250YWwgYW5kIHZlcnRpY2FsIHNwYWNpbmdcbiAqIHdpdGhpbiBib3RoIGZsZXggYW5kIG5vbi1mbGV4IGNvbnRhaW5lcnMuIFNwYWNpbmcgY2FuIGJlIGRlZmluZWQgcmVzcG9uc2l2ZWx5IHVzaW5nXG4gKiBicmVha3BvaW50LXNwZWNpZmljIHZhbHVlcyBvciBzaW5nbGUgbnVtYmVycywgYW5kIGJlaGF2aW9yIHN1Y2ggYXMgc3RyZXRjaGluZyBvclxuICogaW5saW5lL2Jsb2NrIGxheW91dCBjYW4gYWxzbyBiZSBjb25maWd1cmVkIHBlciBicmVha3BvaW50LlxuICovXG5pbnRlcmZhY2UgQ29tcG9uZW50UHJvcHMge1xuICAgIC8qKlxuICAgICAqIFdoZXRoZXIgdGhlIHNwYWNlciBzaG91bGQgYmVoYXZlIGxpa2UgYW4gaW5saW5lIGVsZW1lbnQuXG4gICAgICogSWYgYHRydWVgLCB0aGUgc3BhY2VyIGJlaGF2ZXMgbGlrZSBhbiBpbmxpbmUgZWxlbWVudCBhbmQgZG9lcyBub3QgY3JlYXRlIGEgbmV3IGxpbmUuXG4gICAgICogSWYgYGZhbHNlYCwgdGhlIHNwYWNlciBiZWhhdmVzIGxpa2UgYSBibG9jayBlbGVtZW50IGFuZCB3aWxsIHB1c2ggdG8gYSBuZXcgbGluZS5cbiAgICAgKiBDYW4gYWxzbyBiZSBwYXNzZWQgYXMgYW4gYXJyYXkgb2YgYEJyZWFrcG9pbnRzYCB0byBhcHBseSB0aGUgYmVoYXZpb3IgY29uZGl0aW9uYWxseS5cbiAgICAgKi9cbiAgICBpc0lubGluZT86IEJyZWFrcG9pbnRzW10gfCBib29sZWFuO1xuICAgIC8qKlxuICAgICAqIFdoZXRoZXIgdGhlIHNwYWNlciBzaG91bGQgbm90IHN0cmV0Y2ggdG8gZmlsbCBpdHMgcGFyZW50IGNvbnRhaW5lci5cbiAgICAgKiBJZiBgdHJ1ZWAsIHRoZSBzcGFjZXIgZG9lcyBub3Qgc3RyZXRjaCBpbiBhIGZsZXggbGF5b3V0LlxuICAgICAqIElmIGBmYWxzZWAsIGl0IHN0cmV0Y2hlcyB0byBvY2N1cHkgdGhlIGZ1bGwgYXZhaWxhYmxlIHNwYWNlLlxuICAgICAqIENhbiBiZSBkZWZpbmVkIGFzIGEgYGJvb2xlYW5gIG9yIGFzIGEgbGlzdCBvZiBgQnJlYWtwb2ludHNgLlxuICAgICAqL1xuICAgIGlzTm90U3RyZXRjaGluZz86IEJyZWFrcG9pbnRzW10gfCBib29sZWFuO1xuICAgIC8qKlxuICAgICAqIFRoZSBtYXhpbXVtIGhvcml6b250YWwgc3BhY2luZyB2YWx1ZSBpbiBhIGZsZXggY29udGFpbmVyLlxuICAgICAqIEFjdHMgYXMgYSBtdWx0aXBsaWVyIG9mIHRoZSBgYmFzZVNwYWNpbmdgIGRlZmluZWQgaW4gdGhlIHRoZW1lIGNvbmZpZ3VyYXRpb24uXG4gICAgICogQ2FuIGJlIHByb3ZpZGVkIGFzIGEgc3RhdGljIG51bWJlciBvciBhIHJlc3BvbnNpdmUgYFNwYWNlck9iamVjdGAuXG4gICAgICovXG4gICAgbWF4WD86IFNwYWNlck9iamVjdCB8IG51bWJlcjtcbiAgICAvKipcbiAgICAgKiBUaGUgbWF4aW11bSB2ZXJ0aWNhbCBzcGFjaW5nIHZhbHVlIGluIGEgZmxleCBjb250YWluZXIuXG4gICAgICogQWN0cyBhcyBhIG11bHRpcGxpZXIgb2YgdGhlIGBiYXNlU3BhY2luZ2AgZGVmaW5lZCBpbiB0aGUgdGhlbWUgY29uZmlndXJhdGlvbi5cbiAgICAgKiBDYW4gYmUgcHJvdmlkZWQgYXMgYSBzdGF0aWMgbnVtYmVyIG9yIGEgcmVzcG9uc2l2ZSBgU3BhY2VyT2JqZWN0YC5cbiAgICAgKi9cbiAgICBtYXhZPzogU3BhY2VyT2JqZWN0IHwgbnVtYmVyO1xuICAgIC8qKlxuICAgICAqIEEgdGVzdCBpZGVudGlmaWVyIGZvciB1c2Ugd2l0aCBDeXByZXNzIG9yIG90aGVyIHRlc3RpbmcgZnJhbWV3b3Jrcy5cbiAgICAgKiBUaGlzIHZhbHVlIHdpbGwgYmUgYXBwbGllZCBhcyBhIGBkYXRhLWN5YCBhdHRyaWJ1dGUgb24gdGhlIHJlbmRlcmVkIHNwYWNlciBlbGVtZW50LlxuICAgICAqL1xuICAgIHRlc3RJZD86IHN0cmluZztcbiAgICAvKipcbiAgICAgKiBUaGUgaG9yaXpvbnRhbCBzcGFjaW5nIHNpemUuXG4gICAgICogSW4gZmxleCBjb250YWluZXJzLCB0aGlzIHZhbHVlIGlzIGEgbXVsdGlwbGllciBvZiB0aGUgdGhlbWXigJlzIGBiYXNlU3BhY2luZ2AuXG4gICAgICogSW4gbm9uLWZsZXggY29udGFpbmVycywgaXQgaXMgaW50ZXJwcmV0ZWQgYXMgYSByYXcgcGl4ZWwgdmFsdWUuXG4gICAgICogQ2FuIGJlIGRlZmluZWQgYXMgYSBzdGF0aWMgbnVtYmVyIG9yIGEgcmVzcG9uc2l2ZSBgU3BhY2VyT2JqZWN0YC5cbiAgICAgKi9cbiAgICB4PzogU3BhY2VyT2JqZWN0IHwgbnVtYmVyO1xuICAgIC8qKlxuICAgICAqIFRoZSB2ZXJ0aWNhbCBzcGFjaW5nIHNpemUuXG4gICAgICogSW4gZmxleCBjb250YWluZXJzLCB0aGlzIHZhbHVlIGlzIGEgbXVsdGlwbGllciBvZiB0aGUgdGhlbWXigJlzIGBiYXNlU3BhY2luZ2AuXG4gICAgICogSW4gbm9uLWZsZXggY29udGFpbmVycywgaXQgaXMgaW50ZXJwcmV0ZWQgYXMgYSByYXcgcGl4ZWwgdmFsdWUuXG4gICAgICogQ2FuIGJlIGRlZmluZWQgYXMgYSBzdGF0aWMgbnVtYmVyIG9yIGEgcmVzcG9uc2l2ZSBgU3BhY2VyT2JqZWN0YC5cbiAgICAgKi9cbiAgICB5PzogU3BhY2VyT2JqZWN0IHwgbnVtYmVyO1xufVxuXG4vKipcbiAqIFJlbmRlcnMgYSBmbGV4aWJsZSBzcGFjaW5nIGVsZW1lbnQgZm9yIGxheW91dCBjb250cm9sIGluIGJvdGggZmxleCBhbmQgbm9uLWZsZXggY29udGFpbmVycy5cbiAqIFRoZSBgU3BhY2VyYCBjb21wb25lbnQgZnJvbSBgQG5mcS9yZWFjdC1ncmlkYCBhbGxvd3MgeW91IHRvIGluc2VydCBob3Jpem9udGFsIGFuZC9vciB2ZXJ0aWNhbCBzcGFjZVxuICogYmV0d2VlbiBsYXlvdXQgZWxlbWVudHMuIEl0IHN1cHBvcnRzIHJlc3BvbnNpdmUgc3BhY2luZyB2aWEgYFNwYWNlck9iamVjdGAsIGJhc2Ugc3BhY2luZyBtdWx0aXBsaWVycyxcbiAqIGFuZCBmbGV4aWJsZSBsYXlvdXQgYmVoYXZpb3JzIHN1Y2ggYXMgaW5saW5lIHJlbmRlcmluZyBvciBzdHJldGNoIHByZXZlbnRpb24uXG4gKiBTcGFjaW5nIGlzIGFwcGxpZWQgdXNpbmcgY3VzdG9tIENTUyB2YXJpYWJsZXMsIGFuZCB0aGUgY29tcG9uZW50IGlzIHZpc3VhbGx5IGhpZGRlbiAoYGFyaWEtaGlkZGVuYClcbiAqIGJ1dCBwbGF5cyBhIHN0cnVjdHVyYWwgcm9sZSBpbiBsYXlvdXQgc3BhY2luZy4gQSBgZGF0YS1jeWAgYXR0cmlidXRlIGlzIGFwcGxpZWQgZm9yIHRlc3QgdGFyZ2V0aW5nLlxuICpcbiAqIEBwYXJhbSBwcm9wcyAgICAgICAgICAgICAgICAgVGhlIGNvbXBvbmVudCBwcm9wcy5cbiAqIEBwYXJhbSBwcm9wcy5pc0lubGluZSAgICAgICAgQ29udHJvbHMgd2hldGhlciB0aGUgc3BhY2VyIGlzIHJlbmRlcmVkIGlubGluZSBvciBhcyBhIGJsb2NrLlxuICogQHBhcmFtIHByb3BzLmlzTm90U3RyZXRjaGluZyBQcmV2ZW50cyBzdHJldGNoaW5nIGluIGZsZXggbGF5b3V0cyBpZiBzZXQgdG8gYHRydWVgLlxuICogQHBhcmFtIHByb3BzLm1heFggICAgICAgICAgICBNYXhpbXVtIGhvcml6b250YWwgc3BhY2luZyAobXVsdGlwbGllciBvciBvYmplY3QpLlxuICogQHBhcmFtIHByb3BzLm1heFkgICAgICAgICAgICBNYXhpbXVtIHZlcnRpY2FsIHNwYWNpbmcgKG11bHRpcGxpZXIgb3Igb2JqZWN0KS5cbiAqIEBwYXJhbSBwcm9wcy50ZXN0SWQgICAgICAgICAgVGVzdCBpZGVudGlmaWVyIGFwcGxpZWQgYXMgYGRhdGEtY3lgLiBEZWZhdWx0cyB0byBgJ1NwYWNlcidgLlxuICogQHBhcmFtIHByb3BzLnggICAgICAgICAgICAgICBIb3Jpem9udGFsIHNwYWNpbmcgdmFsdWUgKG11bHRpcGxpZXIgb3Igb2JqZWN0KS5cbiAqIEBwYXJhbSBwcm9wcy55ICAgICAgICAgICAgICAgVmVydGljYWwgc3BhY2luZyB2YWx1ZSAobXVsdGlwbGllciBvciBvYmplY3QpLlxuICogQHJldHVybnMgQSBsYXlvdXQgc3BhY2VyIGVsZW1lbnQgdGhhdCBhcHBsaWVzIHRoZSBjb25maWd1cmVkIHNwYWNpbmcgcnVsZXMuXG4gKlxuICogQGV4YW1wbGVcbiAqIGBgYHRzeFxuICogPFNwYWNlciB4PXsyfSB5PXsxfSAvPlxuICpcbiAqIDxTcGFjZXJcbiAqICAgaXNJbmxpbmVcbiAqICAgaXNOb3RTdHJldGNoaW5nPXtbJ3hzJywgJ21kJ119XG4gKiAgIG1heFg9e3sgeHM6IDEsIGxnOiAzIH19XG4gKiAgIHg9e3sgeHM6IDEsIG1kOiAyIH19XG4gKiAvPlxuICogYGBgXG4gKi9cbmNvbnN0IFNwYWNlciA9ICh7aXNJbmxpbmUgPSBmYWxzZSwgaXNOb3RTdHJldGNoaW5nID0gZmFsc2UsIG1heFgsIG1heFksIHRlc3RJZCA9ICdTcGFjZXInLCB4LCB5fTogQ29tcG9uZW50UHJvcHMpID0+IHtcbiAgICBjb25zdCBjbGFzc05hbWUgPSB1c2VEZWJ1ZygpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPFNwYWNlckVsZW1lbnRcbiAgICAgICAgICAgICRpc0lubGluZT17aXNJbmxpbmV9XG4gICAgICAgICAgICAkaXNOb3RTdHJldGNoaW5nPXtpc05vdFN0cmV0Y2hpbmd9XG4gICAgICAgICAgICAkbWF4WD17bWF4WH1cbiAgICAgICAgICAgICRtYXhZPXttYXhZfVxuICAgICAgICAgICAgJHg9e3h9XG4gICAgICAgICAgICAkeT17eX1cbiAgICAgICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG4gICAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICAgIGRhdGEtY3k9e3Rlc3RJZH1cbiAgICAgICAgLz5cbiAgICApO1xufTtcblxuU3BhY2VyLmRpc3BsYXlOYW1lID0gJ1NwYWNlcic7XG5cbmV4cG9ydCB7U3BhY2VyfTtcblxuaW50ZXJmYWNlIFNwYWNlckVsZW1lbnRQcm9wcyB7XG4gICAgJGlzSW5saW5lOiBCcmVha3BvaW50c1tdIHwgYm9vbGVhbjtcbiAgICAkaXNOb3RTdHJldGNoaW5nOiBCcmVha3BvaW50c1tdIHwgYm9vbGVhbjtcbiAgICAkbWF4WD86IFNwYWNlck9iamVjdCB8IG51bWJlcjtcbiAgICAkbWF4WT86IFNwYWNlck9iamVjdCB8IG51bWJlcjtcbiAgICAkeD86IFNwYWNlck9iamVjdCB8IG51bWJlcjtcbiAgICAkeT86IFNwYWNlck9iamVjdCB8IG51bWJlcjtcbn1cblxuLyogZXNsaW50LWRpc2FibGUgaW5kZW50ICovXG5jb25zdCBTcGFjZXJFbGVtZW50ID0gc3R5bGVkLnNwYW48U3BhY2VyRWxlbWVudFByb3BzPmBcbiAgICAtLW5mcS1ncmlkLXNwYWNlci1tYXgteC1jYWxjOiBjYWxjKHZhcigtLW5mcS1ncmlkLXNwYWNlci1tYXgteCkgKiB2YXIoLS1uZnEtZ3JpZC1iYXNlLXNwYWNpbmcpKTtcbiAgICAtLW5mcS1ncmlkLXNwYWNlci1tYXgteS1jYWxjOiBjYWxjKHZhcigtLW5mcS1ncmlkLXNwYWNlci1tYXgteSkgKiB2YXIoLS1uZnEtZ3JpZC1iYXNlLXNwYWNpbmcpKTtcbiAgICBmbGV4OiAxIDEgMHJlbTtcbiAgICBoZWlnaHQ6IGNhbGModmFyKC0tbmZxLWdyaWQtc3BhY2VyLXkpICogdmFyKC0tbmZxLWdyaWQtYmFzZS1zcGFjaW5nKSk7XG4gICAgbWF4LWhlaWdodDogdmFyKC0tbmZxLWdyaWQtc3BhY2VyLW1heC15LWNhbGMsIGluaXRpYWwpO1xuICAgIG1heC13aWR0aDogdmFyKC0tbmZxLWdyaWQtc3BhY2VyLW1heC14LWNhbGMsIGluaXRpYWwpO1xuICAgIG1pbi1oZWlnaHQ6IGNhbGModmFyKC0tbmZxLWdyaWQtc3BhY2VyLXkpICogdmFyKC0tbmZxLWdyaWQtYmFzZS1zcGFjaW5nKSk7XG4gICAgbWluLXdpZHRoOiBjYWxjKHZhcigtLW5mcS1ncmlkLXNwYWNlci14KSAqIHZhcigtLW5mcS1ncmlkLWJhc2Utc3BhY2luZykpO1xuICAgIHdpZHRoOiBjYWxjKHZhcigtLW5mcS1ncmlkLXNwYWNlci14KSAqIHZhcigtLW5mcS1ncmlkLWJhc2Utc3BhY2luZykpO1xuXG4gICAgJHttZXJnZU1lZGlhUXVlcmllczxTcGFjZXJFbGVtZW50UHJvcHM+KFxuICAgICAgICBjYWxjU3BhY2VySW5saW5lLFxuICAgICAgICBjYWxjU3BhY2VyTWVhc3VyZXMoJ3gnKSxcbiAgICAgICAgY2FsY1NwYWNlck1lYXN1cmVzKCd5JyksXG4gICAgICAgIGNhbGNTcGFjZXJNYXhWYWx1ZXMoJ3knKSxcbiAgICAgICAgY2FsY1NwYWNlck1heFZhbHVlcygneCcpXG4gICAgKX07XG4gICAgJHtkZWJ1Z0Nzcygnc3BhY2VyJyl9XG5gO1xuLyogZXNsaW50LWVuYWJsZSBpbmRlbnQgKi8iXX0= */")); export { Spacer }; //# sourceMappingURL=Spacer.js.map