(props: InkStyleProps)
| 134 | * Convert Ink Box layout props to a React CSSProperties object. |
| 135 | */ |
| 136 | export function inkBoxPropsToCSS(props: InkStyleProps): CSSProperties { |
| 137 | const css: CSSProperties = { |
| 138 | display: 'flex', |
| 139 | flexDirection: 'column', |
| 140 | boxSizing: 'border-box', |
| 141 | } |
| 142 | |
| 143 | // Display |
| 144 | if (props.display === 'none') { |
| 145 | css.display = 'none' |
| 146 | return css |
| 147 | } |
| 148 | |
| 149 | // Position |
| 150 | if (props.position) css.position = props.position |
| 151 | if (props.top !== undefined) css.top = toCSSSize(props.top) |
| 152 | if (props.bottom !== undefined) css.bottom = toCSSSize(props.bottom) |
| 153 | if (props.left !== undefined) css.left = toCSSSize(props.left) |
| 154 | if (props.right !== undefined) css.right = toCSSSize(props.right) |
| 155 | |
| 156 | // Flex |
| 157 | if (props.flexDirection) css.flexDirection = props.flexDirection |
| 158 | if (props.flexGrow !== undefined) css.flexGrow = props.flexGrow |
| 159 | if (props.flexShrink !== undefined) css.flexShrink = props.flexShrink |
| 160 | if (props.flexBasis !== undefined) css.flexBasis = toCSSSize(props.flexBasis) |
| 161 | if (props.flexWrap) css.flexWrap = props.flexWrap |
| 162 | if (props.alignItems) css.alignItems = props.alignItems |
| 163 | if (props.alignSelf) css.alignSelf = props.alignSelf |
| 164 | if (props.justifyContent) css.justifyContent = props.justifyContent |
| 165 | |
| 166 | // Gap |
| 167 | if (props.gap !== undefined) css.gap = `${props.gap}ch` |
| 168 | if (props.columnGap !== undefined) css.columnGap = `${props.columnGap}ch` |
| 169 | if (props.rowGap !== undefined) css.rowGap = `${props.rowGap}ch` |
| 170 | |
| 171 | // Sizing |
| 172 | if (props.width !== undefined) css.width = toCSSSize(props.width) |
| 173 | if (props.height !== undefined) css.height = toCSSSize(props.height) |
| 174 | if (props.minWidth !== undefined) css.minWidth = toCSSSize(props.minWidth) |
| 175 | if (props.minHeight !== undefined) css.minHeight = toCSSSize(props.minHeight) |
| 176 | if (props.maxWidth !== undefined) css.maxWidth = toCSSSize(props.maxWidth) |
| 177 | if (props.maxHeight !== undefined) css.maxHeight = toCSSSize(props.maxHeight) |
| 178 | |
| 179 | // Margin (shorthand resolution: margin → marginX/Y → individual sides) |
| 180 | const mt = props.marginTop ?? props.marginY ?? props.margin |
| 181 | const mb = props.marginBottom ?? props.marginY ?? props.margin |
| 182 | const ml = props.marginLeft ?? props.marginX ?? props.margin |
| 183 | const mr = props.marginRight ?? props.marginX ?? props.margin |
| 184 | if (mt !== undefined) css.marginTop = toCSSSize(mt) |
| 185 | if (mb !== undefined) css.marginBottom = toCSSSize(mb) |
| 186 | if (ml !== undefined) css.marginLeft = toCSSSize(ml) |
| 187 | if (mr !== undefined) css.marginRight = toCSSSize(mr) |
| 188 | |
| 189 | // Padding |
| 190 | const pt = props.paddingTop ?? props.paddingY ?? props.padding |
| 191 | const pb = props.paddingBottom ?? props.paddingY ?? props.padding |
| 192 | const pl = props.paddingLeft ?? props.paddingX ?? props.padding |
| 193 | const pr = props.paddingRight ?? props.paddingX ?? props.padding |
no test coverage detected