2.0.0-beta2

react-widget · May 30, 2020 · 165e8e2 · 165e8e2
1 parent ac01a5e
commit 165e8e2
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 432 deletions.
diff --git a/examples/demos/demo1.js b/examples/demos/demo1.js
@@ -26,15 +26,15 @@ for (let i = 0; i < 10; i++) {
 
 export default class DEMO extends Component {
 	state = {
-		value: 2,
+		value: 102,
 	};
 
-	handleChange = (value) => {
+	handleChange = (value, items) => {
 		this.setState({
 			value,
 		});
 
-		console.log("changed ", value);
+		console.log("changed ", value, items);
 	};
 
 	handleChange2 = (value) => {

diff --git a/src/ListItem.tsx b/src/ListItem.tsx
@@ -2,13 +2,10 @@ import React from "react";
 import classNames from "classnames";
 import shallowEqual from "shallowequal";
 
-import { Item } from "./types";
+import { Item, ItemData } from "./types";
 
 export interface ListItemProps {
 	prefixCls: string;
-	// onSelect: string;
-	// onDeselect: string;
-	// shallowequal only
 	data: {};
 	value: any;
 	onClick: any;
@@ -17,65 +14,19 @@ export interface ListItemProps {
 	selected: boolean;
 	disabled: boolean;
 	active: boolean;
+	getItemProps: (data: ItemData) => React.HTMLAttributes<HTMLElement>;
 }
 
 export interface ListItemState {}
 
 export class ListItem extends React.PureComponent<ListItemProps> {
-	// static propTypes = {
-	//     prefixCls: PropTypes.string,
-	//     onSelect: PropTypes.func,
-	//     onDeselect: PropTypes.func,
-	//     onClick: PropTypes.func,
-	//     onMouseEnter: PropTypes.func,
-	//     onMouseLeave: PropTypes.func,
-	//     selected: PropTypes.bool,
-	//     disabled: PropTypes.bool,
-	//     item: PropTypes.object,
-	// }
-
 	static defaultProps = {
-		prefixCls: "rw-listbox-item",
-		selected: false,
-		disabled: false,
 		data: {},
 	};
 
 	node: HTMLElement;
 
-	// shouldComponentUpdate(nextProps, nextState) {
-	// 	return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
-	// }
-
-	handleItemClick = (e) => {
-		const { onClick, selected, active, value } = this.props;
-
-		// const itemDOM = this.getItemDOM();
-
-		if (onClick) {
-			onClick(value, e);
-		}
-
-		// if (!selected) {
-		// 	onSelect && onSelect(item, itemDOM);
-		// } else {
-		// 	onDeselect && onDeselect(item, itemDOM);
-		// }
-	};
-
-	handleMouseEnter = (e: React.MouseEvent) => {
-		const { onMouseEnter, value } = this.props;
-
-		onMouseEnter(value, e);
-	};
-
-	handleMouseLeave = (e: React.MouseEvent) => {
-		const { onMouseLeave, value } = this.props;
-
-		onMouseLeave(value, e);
-	};
-
-	saveNode = (dom: React.ReactInstance) => {
+	saveNode = (dom: React.ReactInstance | null) => {
 		this.node = dom as HTMLElement;
 	};
 
@@ -84,21 +35,47 @@ export class ListItem extends React.PureComponent<ListItemProps> {
 	}
 
 	render() {
-		const { prefixCls, selected, children, active, disabled } = this.props;
+		const {
+			prefixCls,
+			selected,
+			children,
+			active,
+			disabled,
+			getItemProps,
+			onMouseEnter,
+			onMouseLeave,
+			data,
+			value,
+			onClick,
+		} = this.props;
+
+		const customProps = getItemProps(data);
+
 		const classes = classNames({
 			[`${prefixCls}`]: true,
 			[`${prefixCls}-active`]: active,
 			[`${prefixCls}-selected`]: selected,
 			[`${prefixCls}-disabled`]: disabled,
+			[customProps.className!]: customProps.className,
 		});
 
 		return (
 			<div
 				ref={this.saveNode}
+				{...customProps}
 				className={classes}
-				onClick={this.handleItemClick}
-				onMouseEnter={this.handleMouseEnter}
-				onMouseLeave={this.handleMouseLeave}
+				onClick={(e) => {
+					onClick(value, e);
+					customProps.onClick?.(e);
+				}}
+				onMouseEnter={(e) => {
+					onMouseEnter(value, e);
+					customProps.onMouseEnter?.(e);
+				}}
+				onMouseLeave={(e) => {
+					onMouseLeave(value, e);
+					customProps.onMouseLeave?.(e);
+				}}
 			>
 				{children}
 			</div>

diff --git a/src/ListItemGroup.tsx b/src/ListItemGroup.tsx
@@ -1,31 +1,23 @@
 import React from "react";
-import { Item } from "./types";
+
+import { Item, ItemData } from "./types";
 export interface ItemGroupProps {
 	item: Item;
 	prefixCls: string;
-	onClick: any;
+	renderGroupTitle?: (data: ItemData) => React.ReactNode;
+	getGroupTitleProps?: (data: ItemData) => React.HTMLAttributes<HTMLElement>;
 }
 
 export default class ItemGroup extends React.Component<ItemGroupProps> {
-	static defaultProps = {
-		prefixCls: "rw-listbox-item-group",
-		label: "",
-	};
-
-	handleClick = (e) => {
-		const { onClick, item } = this.props;
+	render() {
+		const { prefixCls, item, children, renderGroupTitle, getGroupTitleProps } = this.props;
 
-		if (onClick) {
-			onClick(item, e);
-		}
-	};
+		const customProps = getGroupTitleProps ? getGroupTitleProps(item.data) : {};
 
-	render() {
-		const { prefixCls, item, children } = this.props;
 		return (
 			<div className={prefixCls}>
-				<div className={`${prefixCls}-title`} onClick={this.handleClick}>
-					{item.label}
+				<div {...customProps} className={`${prefixCls}-title`}>
+					{renderGroupTitle ? renderGroupTitle(item.data) : item.label}
 				</div>
 				<div className={`${prefixCls}-list`}>{children}</div>
 			</div>