Skip to content

Commit 07fa78b

Browse files
ChenlingasMxChenlingasMx
committed
fix(Grid): 重构为function组件
1 parent a066e3d commit 07fa78b

File tree

1 file changed

+92
-98
lines changed

1 file changed

+92
-98
lines changed

‎packages/core/src/Grid/index.tsx‎

Lines changed: 92 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -71,103 +71,97 @@ export interface GridProps extends ViewProps {
7171
onPress?: (data: ItemData, index: number, row: number, event: GestureResponderEvent) => void;
7272
}
7373

74-
export default class Grid extends Component<GridProps> {
75-
static defaultProps: GridProps = {
76-
data: [],
77-
hasLine: true,
78-
};
79-
render() {
80-
const {
81-
style,
82-
data,
83-
iconStyle,
84-
textStyle,
85-
itemStyle,
86-
renderItem,
87-
hasLine,
88-
columns = 4,
89-
onPress,
90-
...otherProps
91-
} = this.props;
92-
if (!Array.isArray(data)) {
93-
return null;
94-
}
95-
const childs: React.ReactNode[][] = [];
96-
let childItem: React.ReactNode[] = [];
97-
data.forEach((item, idx) => {
98-
if (idx !== 0 && idx % columns === 0) {
99-
childs.push(childItem);
100-
childItem = [];
101-
}
102-
let icon = null;
103-
if (React.isValidElement(item.icon)) {
104-
icon = item.icon;
105-
} else if (item.icon) {
106-
icon = (
107-
<Image
108-
style={[{ width: 36, height: 36 }, StyleSheet.flatten(iconStyle)]}
109-
source={typeof item.icon === 'number' ? item.icon : { uri: item.icon as string }}
110-
/>
111-
);
112-
}
113-
if (renderItem && typeof renderItem === 'function') {
114-
childItem!.push(renderItem(item, idx, parseInt((idx / columns).toString(), 10) + 1));
115-
} else {
116-
const itemContent = (
117-
<Fragment>
118-
{icon && <MaybeTextOrView style={iconStyle}>{icon}</MaybeTextOrView>}
119-
<MaybeTextOrView style={[{ marginTop: 9, fontSize: 12 }, textStyle]}>{item.text}</MaybeTextOrView>
120-
</Fragment>
121-
);
122-
childItem!.push(
123-
<Flex
124-
direction="column"
125-
align="center"
126-
justify="center"
127-
style={[{ height: 120 }, StyleSheet.flatten(itemStyle), { width: `${100 / columns}%` }]}
128-
>
129-
{onPress ? (
130-
<TouchableOpacity
131-
style={styles.touchWarpper}
132-
onPress={onPress.bind(this, item, idx, parseInt((idx / columns).toString(), 10) + 1)}
133-
>
134-
{itemContent}
135-
</TouchableOpacity>
136-
) : (
137-
itemContent
138-
)}
139-
</Flex>,
140-
);
141-
}
142-
if (idx === data.length - 1) {
143-
childs.push(childItem);
144-
}
145-
});
146-
return (
147-
<View style={[styles.defalut, style]} {...otherProps}>
148-
{childs.map((rowitem, rowidx) => (
149-
<Flex justify="start" key={rowidx}>
150-
{rowitem.map((item, idx) => {
151-
if (!React.isValidElement(item)) {
152-
return null;
153-
}
154-
const itemBorderStyle: ViewProps['style'] = {};
155-
if (hasLine) {
156-
const hairLineWidth = StyleSheet.hairlineWidth;
157-
itemBorderStyle.borderBottomWidth = childs.length - 1 === rowidx ? 0 : hairLineWidth;
158-
itemBorderStyle.borderRightWidth =
159-
rowitem.length - 1 === idx && rowitem.length === columns ? 0 : hairLineWidth;
160-
itemBorderStyle.borderBottomColor = '#ddd';
161-
itemBorderStyle.borderRightColor = '#ddd';
162-
}
163-
return React.cloneElement(item as React.ReactElement, {
164-
key: idx,
165-
style: [itemBorderStyle, item.props.style],
166-
});
167-
})}
168-
</Flex>
169-
))}
170-
</View>
171-
);
74+
export default function Grid(props: GridProps) {
75+
const {
76+
style,
77+
data = [],
78+
iconStyle,
79+
textStyle,
80+
itemStyle,
81+
renderItem,
82+
hasLine = true,
83+
columns = 4,
84+
onPress,
85+
...otherProps
86+
} = props;
87+
if (!Array.isArray(data)) {
88+
return null;
17289
}
90+
const childs: React.ReactNode[][] = [];
91+
let childItem: React.ReactNode[] = [];
92+
data.forEach((item, idx) => {
93+
if (idx !== 0 && idx % columns === 0) {
94+
childs.push(childItem);
95+
childItem = [];
96+
}
97+
let icon = null;
98+
if (React.isValidElement(item.icon)) {
99+
icon = item.icon;
100+
} else if (item.icon) {
101+
icon = (
102+
<Image
103+
style={[{ width: 36, height: 36 }, StyleSheet.flatten(iconStyle)]}
104+
source={typeof item.icon === 'number' ? item.icon : { uri: item.icon as string }}
105+
/>
106+
);
107+
}
108+
if (renderItem && typeof renderItem === 'function') {
109+
childItem!.push(renderItem(item, idx, parseInt((idx / columns).toString(), 10) + 1));
110+
} else {
111+
const itemContent = (
112+
<Fragment>
113+
{icon && <MaybeTextOrView style={iconStyle}>{icon}</MaybeTextOrView>}
114+
<MaybeTextOrView style={[{ marginTop: 9, fontSize: 12 }, textStyle]}>{item.text}</MaybeTextOrView>
115+
</Fragment>
116+
);
117+
childItem!.push(
118+
<Flex
119+
direction="column"
120+
align="center"
121+
justify="center"
122+
style={[{ height: 120 }, StyleSheet.flatten(itemStyle), { width: `${100 / columns}%` }]}
123+
>
124+
{onPress ? (
125+
<TouchableOpacity
126+
style={styles.touchWarpper}
127+
onPress={(e) => onPress(item, idx, parseInt((idx / columns).toString(), 10) + 1, e)}
128+
>
129+
{itemContent}
130+
</TouchableOpacity>
131+
) : (
132+
itemContent
133+
)}
134+
</Flex>,
135+
);
136+
}
137+
if (idx === data.length - 1) {
138+
childs.push(childItem);
139+
}
140+
});
141+
return (
142+
<View style={[styles.defalut, style]} {...otherProps}>
143+
{childs.map((rowitem, rowidx) => (
144+
<Flex justify="start" key={rowidx}>
145+
{rowitem.map((item, idx) => {
146+
if (!React.isValidElement(item)) {
147+
return null;
148+
}
149+
const itemBorderStyle: ViewProps['style'] = {};
150+
if (hasLine) {
151+
const hairLineWidth = StyleSheet.hairlineWidth;
152+
itemBorderStyle.borderBottomWidth = childs.length - 1 === rowidx ? 0 : hairLineWidth;
153+
itemBorderStyle.borderRightWidth =
154+
rowitem.length - 1 === idx && rowitem.length === columns ? 0 : hairLineWidth;
155+
itemBorderStyle.borderBottomColor = '#ddd';
156+
itemBorderStyle.borderRightColor = '#ddd';
157+
}
158+
return React.cloneElement(item as React.ReactElement, {
159+
key: idx,
160+
style: [itemBorderStyle, item.props.style],
161+
});
162+
})}
163+
</Flex>
164+
))}
165+
</View>
166+
);
173167
}

0 commit comments

Comments
 (0)