React实现座位排布组件
最近在开发一个影院系统的后台管理系统，该后台可以设置一个影厅的布局。
后台使用的是react框架，一位大神学长在几天之内就把这个控件研究出来了，并进行了较为严密的封装，佩服不已，虽然不是我写的，但着实有必要学习和记录一下。
以下是全部代码：
const MAX_COLUMN = 50;
const DEFAULT_COLUMN = 25;
const MAX_ROW = 50;
const DEFAULT_ROW = 12;
const SEAT_WIDTH = 15; // 每一个小座位的宽度
const SEAT_MARGIN = 2; // 每一个小座位的边距
const SEAT_BOUNDS_MARGIN_LEFT = 10; // seat_bounds_margin_left
// 头部信息(提示信息)
// 根据传入的座位的state属性，展示该座位图片的颜色(已选：灰色，可选：白色，故障：红色，无座位：白色空白)
const getSeatImg = seat => {
switch (seat.state) {
case SEAT_STATE.IDLE:
return WHITE_SEAT;
case SEAT_STATE.SELECTED:
return GREEN_SEAT;
case SEAT_STATE.LOCKED:
return RED_SEAT;
default:
return '';
}
};
// 格式化返回座位信息，例如：seat_1_2
const getSeatKey = seat => {
return `seat_${seat.xAxis}_${seat.yAxis}`;
};
// 每一个小座位的样式
const seatStyle = {
width: `${SEAT_WIDTH}px`,
height: `${SEAT_WIDTH}px`,
margin: `${SEAT_MARGIN}px`,
cursor: 'pointer',
};
// 坐标轴样式
const axisStyle = {
width: `${SEAT_WIDTH + SEAT_MARGIN * 2}px`,
height: `${SEAT_WIDTH + SEAT_MARGIN * 2}px`,
backgroundColor: 'grey',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
};
// 设置座位样式，需要传入onClick方法
const SeatIcon = ({ seat, onClick, editMode }) => {
if (seat.state === SEAT_STATE.NULL) {
return (
<div
style={{
...seatStyle,
backgroundColor: editMode ? '#dcdcdc' : '#ffffff',
}}
onClick={onClick}
/>
);
}
return <img style={seatStyle} src={getSeatImg(seat)} alt="" onClick={onClick} />;
};
class EditCinemaSeats extends React.Component {
constructor(props) {
super(props);
// colum: 35,row:15
const { column, row, seats } = props;
console.log(`constructor, seats,`, seats);
this.handlerSeatColumnRowChanged({ column, row, seats }, true);
}
componentWillReceiveProps(nextProps) {
if (
(isEmpty(this.props.seats) && !isEmpty(nextProps.seats)) ||
this.props.row !== nextProps.row ||
this.props.column !== nextProps.column
) {
this.handlerSeatColumnRowChanged(nextProps);
}
}
notifySeatsChange = () => {
const { row, column, seats } = this.state;
// 从整个布局中筛选除可选的座位，拼接成列表到selectedSeats中
const selectedSeats = chain(seats)
.filter(it => it.state === SEAT_STATE.IDLE)
.value();
this.props.onSeatsChange({
row,
column,
selectedSeats,
});
};
// 单击控制该座位可选还是不存在(针对影厅排布局的时候使用)
handlerSeatClick = seat => {
const { seats } = this.state;
seats.forEach(item => {
if (getSeatKey(item) === getSeatKey(seat)) {
if (item.state !== SEAT_STATE.IDLE) {
item.state = SEAT_STATE.IDLE;
} else {
item.state = SEAT_STATE.NULL;
}
}
});
this.setState({ seats }, this.notifySeatsChange);
};
handlerSeatColumnRowChanged = ({ row, column, seats }, initial) => {
console.log("+++++++++++");
console.log(seats);
const seatMap = reduce(
seats,
(obj, seat) => {
obj[getSeatKey(seat)] = seat;
return obj;
},
{}
);
const newList = createSeats(0, column, 0, row);
newList.forEach(it => {
const pre = seatMap[getSeatKey(it)];
if (!isNil(pre) && pre.state === SEAT_STATE.IDLE) {
it.state = SEAT_STATE.IDLE;
}
});
if (initial) {
this.state = {
row,
column,
seats: newList,
};
this.notifySeatsChange();
} else {
this.setState(
{
row,
column,
seats: newList,
},
this.notifySeatsChange
);
}
};
renderEditHeader = () => {
const { column, row, editMode } = this.props;
return (
<div className={styles.cinema_seats_header_1}>
<img src={WHITE_SEAT} alt="" />
<div style={{ marginLeft: '5px' }}>已选</div>
<InputNumber
style={{ marginLeft: '15px' }}
min={1}
disabled={!editMode}
max={MAX_COLUMN}
defaultValue={column}
formatter={value => `y:${value}`}
parser={value => value.replace('y:', '')}
value={this.state.column}
onChange={value => {
this.handlerSeatColumnRowChanged({
...this.state,
column: value,
});
}}
/>
<InputNumber
style={{ marginLeft: '15px' }}
min={1}
disabled={!editMode}
max={MAX_ROW}
defaultValue={row}
formatter={value => `x:${value}`}
parser={value => value.replace('x:', '')}
value={this.state.row}
onChange={value => {
this.handlerSeatColumnRowChanged({
...this.state,
row: value,
});
}}
/>
</div>
);
};
renderXAxis = () => {
const { column } = this.state;
const children = [];
for (let i = 0; i < column; i++) {
children.push(
<div key={`xAxis_${i}`} style={axisStyle}>
<span style={{ color: '#ffffff', fontSize: '8px' }}>{i + 1}</span>
</div>
);
}
return (
<div
style={{
display: 'flex',
flexDirection: 'row',
marginLeft: SEAT_BOUNDS_MARGIN_LEFT + SEAT_WIDTH,
marginTop: '10px',
}}
>
{children}
</div>
);
};
renderYAxis = () => {
const { row } = this.state;
const children = [];
for (let i = 0; i < row; i++) {
children.push(
<div key={`yAxis_${i}`} style={axisStyle}>
<span style={{ color: '#ffffff', fontSize: '8px' }}>{i + 1}</span>
</div>
);
}
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
marginTop: '10px',
}}
>
{children}
</div>
);
};
// 显示整个排座的列表
renderSeatsBounds = () => {
const { editMode } = this.props;
const { row, column } = this.state;
const boxStyle = {
width: `${(SEAT_WIDTH + SEAT_MARGIN * 2) * column}px`,
height: `${(SEAT_WIDTH + SEAT_MARGIN * 2) * row}px`,
marginTop: '10px',
};
const { seats } = this.state;
return (
<div style={boxStyle} className={styles.cinema_seats_bounds}>
{seats.map(item => (
<SeatIcon
key={getSeatKey(item)}
seat={item}
editMode={editMode}
onClick={() => {
if (editMode) {
this.handlerSeatClick(item);
}
}}
/>
))}
</div>
);
};
render() {
return (
<div className={styles.cinema_seats_container}>
{this.renderEditHeader()}
{this.renderXAxis()}
<div
style={{
display: 'flex',
flexDirection: 'row',
}}
>
{this.renderYAxis()}
<div
className={styles.cinema_seats_container_box}
style={{
marginLeft: SEAT_BOUNDS_MARGIN_LEFT,
}}
>
{this.renderSeatsBounds()}
</div>
</div>
</div>
);
}
}
EditCinemaSeats.propTypes = {
seats: PropTypes.array,
column: PropTypes.number,
row: PropTypes.number,
onSeatsChange: PropTypes.func,
editMode: PropTypes.bool,
};
EditCinemaSeats.defaultProps = {
seats: createDefaultSeat(), // 初始值为中间一块为可选状态的区域
row: DEFAULT_ROW,
column: DEFAULT_COLUMN,
onSeatsChange: noop,
editMode: true,
};
// 创建默认座位
function createDefaultSeat() {
const seats = createSeats(1, 24, 0, 11);
seats.forEach(it => {
it.state = SEAT_STATE.IDLE;
});
// const res = chain(seats).filter((item) => item.yAxis !== 3).value()
return seats;
}
// 先设置矩形座位区域，初始值都为null，即：不存在座位
function createSeats(fromX, toX, fromY, toY) {
const seats = [];
for (let y = fromY; y < toY; y++) {
for (let x = fromX; x < toX; x++) {
seats.push({
xAxis: x,
yAxis: y,
state: SEAT_STATE.NULL,
});
}
}
return seats;
}
const SEAT_STATE = {
NULL: 0, // 空，没位置
IDLE: 1, //可选
SELECTED: 2, // 已选
LOCKED: 3, //坏了
};
export default EditCinemaSeats;
除了图标资源以外，基本上所有的代码都在这了，注意代码中用到了lodash库中的一些方法，比如chain和reduce等，由于是大神编写的，所以在理解上我都花了很大功夫，不过这样的代码才有助于成长，特此记录一下。