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

前提:

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

目前的效果:

期望效果:

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

在搜索之后并没有找到 React 相关的开源组件,于是借助了于 AntdSlider 组件的 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;
}

效果图

相关推荐
蒙特卡洛的随机游走4 分钟前
Spark的宽依赖与窄依赖
大数据·前端·spark
共享家952711 分钟前
QT-常用控件(多元素控件)
开发语言·前端·qt
葱头的故事13 分钟前
将传给后端的数据转换为以formData的类型传递
开发语言·前端·javascript
_233325 分钟前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·vue.js
jump68028 分钟前
js中数组详解
前端·面试
崽崽长肉肉31 分钟前
iOS 基于Vision.framework从图片中提取文字
前端
温宇飞37 分钟前
Web Abort API - AbortSignal 与 AbortController
前端
Tomoon38 分钟前
前端开发者的全栈逆袭
前端
Filotimo_1 小时前
2.CSS3.(3).html
前端·css3