Skip to content

Commit

Permalink
feat: 完成flex支持
Browse files Browse the repository at this point in the history
  • Loading branch information
mayintao3 committed Apr 29, 2024
1 parent a8ebb1c commit c8fd0c6
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 107 deletions.
13 changes: 8 additions & 5 deletions crates/swc_plugin_compile_mode/src/transform_harmony.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ pub struct PreVisitor {}
pub enum EtsDirection {
Row,
Column,
Flex,
}

impl PreVisitor {
Expand Down Expand Up @@ -145,7 +146,6 @@ impl TransformVisitor {
}
}


pub fn get_dynmaic_node_name(&mut self, name: String) -> String {
let node_name = if self.deal_loop_now { name } else { format!("this.{}", name) };
node_name.to_string()
Expand Down Expand Up @@ -433,9 +433,11 @@ impl TransformVisitor {
let jsx_attr_name = name.to_string();
if jsx_attr_name == DIRECTION_ATTR {
if let Some(JSXAttrValue::Lit(Lit::Str(Str { value, .. }))) = &jsx_attr.value {
if value == "row" {
direction = EtsDirection::Row;
}
direction = match value.as_str() {
"row" => EtsDirection::Row,
"flex" => EtsDirection::Flex,
_ => EtsDirection::Column,
};
}
} else if jsx_attr_name == STYLE_ATTR {
if
Expand Down Expand Up @@ -620,7 +622,8 @@ export default struct TARO_TEMPLATES_{name} {{
"#,
name = tmpl_name,
content = tmpl_main_contents
).as_str() + utils::get_harmony_component_style(self).as_str();
).as_str() +
utils::get_harmony_component_style(self).as_str();

self.templates.insert(tmpl_name, format!("`{}`", tmpl_contents));

Expand Down
50 changes: 0 additions & 50 deletions crates/swc_plugin_compile_mode/src/utils/constants.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,53 +210,3 @@ function createTextChildNode (item: TaroElement, align: ImageSpanAlignment) {
}
"#;

// pub const HARMONY_TEXT_STYLE_BIND: &str = r#"@Extend(Text)
// function textNormalFontStyle (style: HarmonyStyle) {
// .id(style.id)
// .key(style.id)
// .opacity(style.opacity)
// .fontColor(style.color)
// .fontSize(style.fontSize)
// .fontWeight(style.fontWeight)
// .fontStyle(style.fontStyle)
// .fontFamily(style.fontFamily)
// .lineHeight(style.lineHeight)
// .decoration({
// type: style.textDecoration?.type,
// color: style.color
// })
// }

// @Extend(Text)
// function textSpecialFontStyle(attr: TaroTextStyleType) {
// .textAlign(attr.textAlign)
// .textOverflow(attr.textOverflow)
// .maxLines(attr.WebkitLineClamp)
// .letterSpacing(attr.letterSpacing)
// }

// function getButtonFontSize (node: TaroButtonElement) {
// const isMini = node._attrs.size === 'mini'

// return isMini ? convertNumber2VP(26) : convertNumber2VP(36)
// }
// "#;

// pub const HARMONY_TEXT_STYLE_BIND: &str = r#"function getButtonFontSize (node: TaroButtonElement): string | number {
// const isMini = node._attrs.size === 'mini'

// return isMini ? convertNumber2VP(26) : convertNumber2VP(36)
// }
// "#;

// pub const HARMONY_IMAGE_STYLE_BIND: &str = r#"function getImageMode (mode: string): ImageFit {
// switch (mode) {
// case 'aspectFit': return ImageFit.Contain
// case 'aspectFill': return ImageFit.Cover
// case 'scaleToFill': return ImageFit.Fill
// case 'widthFix': return ImageFit.Auto
// case 'heightFix': return ImageFit.Auto
// default: return ImageFit.Contain
// }
// }
// "#;
80 changes: 28 additions & 52 deletions crates/swc_plugin_compile_mode/src/utils/harmony/components.rs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
use crate::{ transform_harmony::EtsDirection, utils };
use crate::{ transform_harmony::EtsDirection, utils::{ self, harmony::components } };

pub fn get_component_attr_str(node_name: &str, tag_name: &str) -> String {
if tag_name == "text" {
Expand Down Expand Up @@ -29,18 +29,33 @@ pub fn get_component_style_str(node_name: &str, tag_name: &str) -> String {
}

pub fn get_view_component_str(node_name: &str, child_content: &str, direction: EtsDirection) -> String {
let container = match direction {
EtsDirection::Row => "Row",
EtsDirection::Column => "Column",
let component_name;
let mut component_param = "".to_string();
let component_children = match child_content {
"" => "".to_string(),
_ => format!("\n{}", child_content),
};

match direction {
EtsDirection::Row => {
component_name = "Row";
}
EtsDirection::Column => {
component_name = "Column";
}
EtsDirection::Flex => {
component_name = "Flex";
component_param = format!("FlexManager.flexOptions({})", node_name);
}
}
let style = get_component_style_str(node_name, component_name.to_lowercase().as_str());

format!(
"{container}() {{{children}}}\n{style}",
container = container,
children = match child_content {
"" => "".to_string(),
_ => format!("\n{}", child_content),
},
style = get_component_style_str(node_name, container.to_lowercase().as_str())
"{name}({param}) {{{children}}}\n{style}",
name = component_name,
param = component_param,
children = component_children,
style = style
)
}

Expand All @@ -52,48 +67,9 @@ pub fn get_image_component_str(node_name: &str) -> String {
)
}

// pub fn get_text_component_str(node_name: &str) -> String {
// format!(
// "if ({node_id}.nodeType === NodeType.TEXT_NODE) {{
// if ({node_id}.parentNode) {{
// if (({node_id}.parentNode as TaroElement).tagName === 'BUTTON') {{
// Text({node_id}.textContent)
// .attributeModifier(textModify.setNode({node_id}?.parentElement as TaroElement, {{
// fontSize: getButtonFontSize({node_id}.parentNode as TaroButtonElement),
// color: getButtonColor({node_id}.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get(({node_id}.parentNode as TaroButtonElement)._attrs.type || '').text)
// }}))
// }} else {{
// Text({node_id}.textContent)
// .attributeModifier(textModify.setNode({node_id}?.parentElement as TaroElement))
// .width(getTextInViewWidth({node_id}.parentElement))
// }}
// }}
// }} else {{
// Text({node_id}.textContent) {{
// // text 下还有标签
// if ({node_id}.childNodes.length > 1 || (({node_id}.childNodes[0] && {node_id}.childNodes[0] as TaroElement)?.nodeType === NodeType.ELEMENT_NODE)) {{
// ForEach({node_id}.childNodes, (item: TaroElement) => {{
// createTextChildNode(item, getSpanVerticalAlign(({node_id} as TaroElement).hmStyle?.verticalAlign))
// }}, (item: TaroElement) => item._nid)
// }}
// }}
// .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', {node_id} as TaroElement), {node_id} as TaroElement, ['click']))
// .attributeModifier(textModify.setNode({node_id} as TaroElement).withNormalStyle())
// .onVisibleAreaChange(getNodeThresholds(({node_id} as TaroElement)) || [0.0, 1.0], getComponentEventCallback(({node_id} as TaroElement), VISIBLE_CHANGE_EVENT_NAME))
// .onAreaChange(getComponentEventCallback(({node_id} as TaroElement), AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {{
// ({node_id} as TaroElement)._nodeInfo.areaInfo = res[1]
// }}))
// }}",
// node_id = node_name
// )
// }

pub fn get_text_component_str(node_name: &str) -> String {
format!(
"createText({node_id} as TaroTextElement)",
node_id = node_name
)
}
format!("createText({node_id} as TaroTextElement)", node_id = node_name)
}

pub fn create_component_event(event_name: &str, node_name: &str) -> String {
let process_event_trigger_name = |name: &str| -> String {
Expand Down

0 comments on commit c8fd0c6

Please sign in to comment.