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

效果图

相关推荐
reembarkation18 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
KenXu18 小时前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|18 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青18 小时前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥18 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb19 小时前
【Python】字符串
java·前端·python
阿笑带你学前端19 小时前
Supabase云同步架构:Flutter应用的数据同步策略
前端
梦想CAD控件19 小时前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
万少19 小时前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
掘金约基奇_19 小时前
JS-SDK开发企微侧边栏
前端·javascript