React 会议时段拖拽选择组件开发

朝九晚六敲代码2024-03-12 17:17

前提：

类似企微会议选择的功能，之前的选择需要用户对会议时间段一个个的点击进行选择，操作非常繁琐，期望达到企微拖拽选择的一个效果。

目前的效果：

期望效果：

现在的功能是将一天的时间分为24个时间段，每个时间段又分成两个半小时，每半小时为一个最小单位，用户可以对这个单位的进行时间的占用操作。

在搜索之后并没有找到 React 相关的开源组件，于是借助了于 Antd 的 Slider 组件的 range 功能去实现。

思路

Slider 组件的步进值设置为 100 / 48

点击某个时间块，根据下标获取当前的范围，作为初始值赋值给 Slider, 并显示组件（对组件的样式进行了一些修改，组件父容器为一整天的时间元素）

javascript 复制代码

const STEP = 100 / 48;

const [timeArea, setTimeArea] = useState<Array<number>>([]); // Slider组件值
const [controllerVisible, setControllerVisible] = useState(false);

// 根据点击区块的下标获取 Slider 组件的 value
const getTimeArea = (index: number) => {
    const area = [index * STEP, (index + 1) * STEP];
    setTimeArea(area);
}

const handleTimeClick = (item: TimeItem, index: number) => {
    getTimeArea(index);
    setControllerVisible(true);
};

const handleSliderChange = (value: Array<number>) => {
    setTimeArea(value);
};

// 获取已选择的时间段下标范围
const getSelectedIndexRange = () => {
    let leftIndex = Math.floor(timeArea[0] / STEP);
    const indexRange: Array<number> = [
      leftIndex,
      Math.floor(timeArea[1] / STEP ) - 1,
    ];
    
    return indexRange
}

return ( 
    <div>
        // ...
        <Slider
            style={{ display: controllerVisible ? "block" : "none" }}
            range
            step={STEP}
            value={timeArea}
            tooltip={{ open: false }}
            onChange={handleSliderChange}
            onAfterChange={handleAfterChange}
        />
        // ...
    </div>
)

css 复制代码

.ant-slider-rail {
    display: none;
}

.ant-slider-track {
    position: relative;
    height: 25px;
    opacity: .4;
}

.ant-slider-handle {
    top: 7px;
}

效果图