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;
}

效果图

相关推荐
jiangzhihao051524 分钟前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI2 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front4 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie4 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀4 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻4 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树4 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔5 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04125 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj505 小时前
前端基础之《React(1)—webpack简介》
前端·react