2024-06-14 03:18:34 -05:00
|
|
|
import {
|
|
|
|
translateLayoutAlignContent,
|
|
|
|
translateLayoutAlignItems,
|
|
|
|
translateLayoutFlexDir,
|
|
|
|
translateLayoutGap,
|
2024-06-26 02:14:58 -05:00
|
|
|
translateLayoutItemAlignSelf,
|
2024-06-14 03:18:34 -05:00
|
|
|
translateLayoutJustifyContent,
|
|
|
|
translateLayoutJustifyItems,
|
|
|
|
translateLayoutPadding,
|
2024-06-26 02:14:58 -05:00
|
|
|
translateLayoutPaddingType,
|
2024-06-14 03:18:34 -05:00
|
|
|
translateLayoutSizing,
|
|
|
|
translateLayoutWrapType
|
|
|
|
} from '@plugin/translators';
|
|
|
|
|
|
|
|
import { LayoutAttributes, LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
|
|
|
|
|
|
|
|
export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => {
|
|
|
|
return {
|
|
|
|
layout: node.layoutMode !== 'NONE' ? 'flex' : undefined,
|
|
|
|
layoutFlexDir: translateLayoutFlexDir(node.layoutMode),
|
|
|
|
layoutGap: translateLayoutGap(
|
|
|
|
node.layoutMode,
|
|
|
|
node.itemSpacing,
|
|
|
|
node.primaryAxisAlignItems === 'SPACE_BETWEEN'
|
|
|
|
),
|
|
|
|
layoutWrapType: translateLayoutWrapType(node.layoutWrap),
|
|
|
|
layoutPadding: translateLayoutPadding(node),
|
2024-06-26 02:14:58 -05:00
|
|
|
layoutPaddingType: translateLayoutPaddingType(node),
|
2024-06-14 03:18:34 -05:00
|
|
|
layoutJustifyContent: translateLayoutJustifyContent(node),
|
|
|
|
layoutJustifyItems: translateLayoutJustifyItems(node),
|
|
|
|
layoutAlignContent: translateLayoutAlignContent(node),
|
|
|
|
layoutAlignItems: translateLayoutAlignItems(node)
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
export const transformLayoutAttributes = (
|
2024-06-18 06:10:30 -05:00
|
|
|
node: LayoutMixin,
|
|
|
|
isFrame: boolean = false
|
2024-06-14 03:18:34 -05:00
|
|
|
): Pick<
|
|
|
|
LayoutChildAttributes,
|
2024-06-17 10:47:53 -05:00
|
|
|
| 'layoutItemH-Sizing'
|
|
|
|
| 'layoutItemV-Sizing'
|
2024-06-26 02:14:58 -05:00
|
|
|
| 'layoutItemAlignSelf'
|
2024-06-17 10:47:53 -05:00
|
|
|
| 'layoutItemAbsolute'
|
|
|
|
| 'layoutItemMaxH'
|
|
|
|
| 'layoutItemMinH'
|
|
|
|
| 'layoutItemMaxW'
|
|
|
|
| 'layoutItemMinW'
|
2024-06-14 03:18:34 -05:00
|
|
|
> => {
|
|
|
|
return {
|
2024-06-18 06:10:30 -05:00
|
|
|
'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal, isFrame),
|
2024-06-18 09:00:39 -05:00
|
|
|
'layoutItemV-Sizing': translateLayoutSizing(node.layoutSizingVertical, isFrame),
|
2024-06-26 02:14:58 -05:00
|
|
|
'layoutItemAlignSelf': translateLayoutItemAlignSelf(node.layoutAlign),
|
2024-06-17 10:47:53 -05:00
|
|
|
'layoutItemAbsolute': node.layoutPositioning === 'ABSOLUTE',
|
|
|
|
'layoutItemMaxH': node.maxHeight ?? undefined,
|
|
|
|
'layoutItemMinH': node.minHeight ?? undefined,
|
|
|
|
'layoutItemMaxW': node.maxWidth ?? undefined,
|
|
|
|
'layoutItemMinW': node.minWidth ?? undefined
|
2024-06-14 03:18:34 -05:00
|
|
|
};
|
|
|
|
};
|