sizing.js
2.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.sizeWidth = exports.sizeHeight = exports.minWidth = exports.minHeight = exports.maxWidth = exports.maxHeight = exports.height = exports.default = exports.boxSizing = void 0;
exports.sizingTransform = sizingTransform;
exports.width = void 0;
var _style = _interopRequireDefault(require("../style"));
var _compose = _interopRequireDefault(require("../compose"));
var _breakpoints = require("../breakpoints");
function sizingTransform(value) {
return value <= 1 && value !== 0 ? `${value * 100}%` : value;
}
const width = exports.width = (0, _style.default)({
prop: 'width',
transform: sizingTransform
});
const maxWidth = props => {
if (props.maxWidth !== undefined && props.maxWidth !== null) {
const styleFromPropValue = propValue => {
const breakpoint = props.theme?.breakpoints?.values?.[propValue] || _breakpoints.values[propValue];
if (!breakpoint) {
return {
maxWidth: sizingTransform(propValue)
};
}
if (props.theme?.breakpoints?.unit !== 'px') {
return {
maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
};
}
return {
maxWidth: breakpoint
};
};
return (0, _breakpoints.handleBreakpoints)(props, props.maxWidth, styleFromPropValue);
}
return null;
};
exports.maxWidth = maxWidth;
maxWidth.filterProps = ['maxWidth'];
const minWidth = exports.minWidth = (0, _style.default)({
prop: 'minWidth',
transform: sizingTransform
});
const height = exports.height = (0, _style.default)({
prop: 'height',
transform: sizingTransform
});
const maxHeight = exports.maxHeight = (0, _style.default)({
prop: 'maxHeight',
transform: sizingTransform
});
const minHeight = exports.minHeight = (0, _style.default)({
prop: 'minHeight',
transform: sizingTransform
});
const sizeWidth = exports.sizeWidth = (0, _style.default)({
prop: 'size',
cssProperty: 'width',
transform: sizingTransform
});
const sizeHeight = exports.sizeHeight = (0, _style.default)({
prop: 'size',
cssProperty: 'height',
transform: sizingTransform
});
const boxSizing = exports.boxSizing = (0, _style.default)({
prop: 'boxSizing'
});
const sizing = (0, _compose.default)(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
var _default = exports.default = sizing;