linkmore-design
Version:
🌈 🚀lm组件库。🚀
257 lines • 8.8 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useMemo, useEffect, useCallback, useContext } from "react";
// import { Radio, Checkbox, Row, Col, InputNumber } from "linkmore-design";
import Radio from "../radio";
import Checkbox from "../checkbox";
import Row from "../row";
import Col from "../col";
import InputNumber from "../input-number";
import WeekSelect, { weekOptionsObj } from "./WeekSelect";
import GlobalContext from "./GlobalContext";
var RadioGroup = Radio.Group;
var CheckboxGroup = Checkbox.Group;
var radioStyle = {
display: "block",
paddingBottom: "6px"
};
var weekOptions = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
function WeekPane(props) {
var _useContext = useContext(GlobalContext),
_useContext$language = _useContext.language,
language = _useContext$language === void 0 ? {} : _useContext$language;
var assign = language.assign,
donTAssign = language.donTAssign,
_language$everyTime = language.everyTime,
everyTime = _language$everyTime === void 0 ? {} : _language$everyTime,
_language$aTob = language.aTob,
aTob = _language$aTob === void 0 ? {} : _language$aTob,
_language$aStartTob = language.aStartTob,
aStartTob = _language$aStartTob === void 0 ? {} : _language$aStartTob,
weekOptionsByL = language.week;
var value = props.value,
onChange = props.onChange;
var _useState = useState(2),
_useState2 = _slicedToArray(_useState, 2),
currentRadio = _useState2[0],
setCurrentRadio = _useState2[1];
var _useState3 = useState("SUN"),
_useState4 = _slicedToArray(_useState3, 2),
from = _useState4[0],
setFrom = _useState4[1];
var _useState5 = useState("MON"),
_useState6 = _slicedToArray(_useState5, 2),
to = _useState6[0],
setTo = _useState6[1];
var _useState7 = useState(1),
_useState8 = _slicedToArray(_useState7, 2),
weekOfMonth = _useState8[0],
setWeekOfMonth = _useState8[1];
var _useState9 = useState("MON"),
_useState10 = _slicedToArray(_useState9, 2),
dayOfWeek = _useState10[0],
setDayOfWeek = _useState10[1];
var _useState11 = useState("MON"),
_useState12 = _slicedToArray(_useState11, 2),
lastWeekOfMonth = _useState12[0],
setLastWeekOfMonth = _useState12[1];
var _useState13 = useState(["MON"]),
_useState14 = _slicedToArray(_useState13, 2),
selected = _useState14[0],
setSelected = _useState14[1];
var isFirstRender = React.useRef();
if (isFirstRender.current !== false) {
isFirstRender.current = true;
}
useEffect(function () {
if (value === "*") {
setCurrentRadio(1);
} else if (value === "?") {
setCurrentRadio(2);
} else if (value.indexOf("-") > -1) {
setCurrentRadio(3);
var _value$split = value.split("-"),
_value$split2 = _slicedToArray(_value$split, 2),
defaultFrom = _value$split2[0],
defaultTo = _value$split2[1];
setFrom(defaultFrom);
setTo(defaultTo);
} else if (value.indexOf("#") > -1) {
setCurrentRadio(4);
var _value$split3 = value.split("#"),
_value$split4 = _slicedToArray(_value$split3, 2),
defaultDayOfWeek = _value$split4[0],
defaultWeekOfMonth = _value$split4[1];
setWeekOfMonth(parseInt(defaultWeekOfMonth, 10));
setDayOfWeek(defaultDayOfWeek);
} else if (value.indexOf("L") > -1) {
setCurrentRadio(5);
var _value$split5 = value.split("L"),
_value$split6 = _slicedToArray(_value$split5, 1),
defaultLastWeekOfMonth = _value$split6[0];
setLastWeekOfMonth(defaultLastWeekOfMonth);
} else {
setCurrentRadio(6);
setSelected(value ? value.split(",") : ["MON"]);
}
}, [value]);
useEffect(function () {
if (!isFirstRender.current) {
switch (currentRadio) {
case 1:
onChange("*");
break;
case 2:
onChange("?");
break;
case 3:
onChange("".concat(from, "-").concat(to));
break;
case 4:
onChange("".concat(dayOfWeek, "#").concat(weekOfMonth));
break;
case 5:
onChange("".concat(lastWeekOfMonth, "L"));
break;
case 6:
onChange(selected.join(","));
break;
default:
break;
}
}
}, [currentRadio, from, to, weekOfMonth, dayOfWeek, lastWeekOfMonth, selected]);
var onChangeRadio = useCallback(function (e) {
setCurrentRadio(e.target.value);
}, []);
var onChangeFrom = useCallback(function (v) {
setFrom(v || "MON");
}, []);
var onChangeTo = useCallback(function (v) {
setTo(v || "MON");
}, []);
var onChangeWeekOfMonth = useCallback(function (v) {
setWeekOfMonth(v || 1);
}, []);
var onChangeDayOfWeek = useCallback(function (v) {
setDayOfWeek(v || "MON");
}, []);
var onChangeLastWeekOfMonth = useCallback(function (v) {
setLastWeekOfMonth(v || "MON");
}, []);
var onChangeSelected = useCallback(function (v) {
setSelected(v.length !== 0 ? v : ["MON"]);
}, []);
var checkList = useMemo(function () {
var disabled = currentRadio !== 6;
return weekOptions.map(function (item) {
return /*#__PURE__*/React.createElement(Col, {
key: item,
span: 3
}, /*#__PURE__*/React.createElement(Checkbox, {
disabled: disabled,
value: item
}, (weekOptionsByL === null || weekOptionsByL === void 0 ? void 0 : weekOptionsByL["".concat(item).toLocaleLowerCase()]) || weekOptionsObj[item]));
});
}, [currentRadio, selected]);
useEffect(function () {
isFirstRender.current = false;
}, []);
var aTobA = /*#__PURE__*/React.createElement(WeekSelect, {
disabled: currentRadio !== 3,
value: from,
size: "small",
onChange: onChangeFrom,
style: {
width: 100
}
});
var aTobB = /*#__PURE__*/React.createElement(WeekSelect, {
disabled: currentRadio !== 3,
value: to,
size: "small",
onChange: onChangeTo,
style: {
width: 100
}
});
var aStartTobA = /*#__PURE__*/React.createElement(InputNumber, {
disabled: currentRadio !== 4,
min: 0,
max: 5,
value: weekOfMonth,
size: "small",
onChange: onChangeWeekOfMonth,
style: {
width: 100
}
});
var aStartTobB = /*#__PURE__*/React.createElement(WeekSelect, {
disabled: currentRadio !== 4,
value: dayOfWeek,
size: "small",
onChange: onChangeDayOfWeek,
style: {
width: 100
}
});
var aStartTob2A = /*#__PURE__*/React.createElement(WeekSelect, {
disabled: currentRadio !== 5,
value: lastWeekOfMonth,
size: "small",
onChange: onChangeLastWeekOfMonth,
style: {
width: 100
}
});
return /*#__PURE__*/React.createElement(RadioGroup, {
name: "radiogroup",
value: currentRadio,
onChange: onChangeRadio,
style: {
width: "100%"
}
}, /*#__PURE__*/React.createElement(Radio, {
style: radioStyle,
value: 1
}, everyTime.week || "每一周"), /*#__PURE__*/React.createElement(Radio, {
style: radioStyle,
value: 2
}, donTAssign || "不指定"), /*#__PURE__*/React.createElement("span", {
style: {
display: "flex",
alignItems: "center",
fontSize: 14
}
}, /*#__PURE__*/React.createElement(Radio, {
style: radioStyle,
value: 3
}), aTob.week ? aTob.week(aTobA, aTobB) : /*#__PURE__*/React.createElement(React.Fragment, null, "\u4ECE\xA0", aTobA, "\xA0-\xA0", aTobB, "\xA0\uFF0C\u6BCF\u661F\u671F\u6267\u884C\u4E00\u6B21")), /*#__PURE__*/React.createElement("span", {
style: {
display: "flex",
alignItems: "center",
fontSize: 14
}
}, /*#__PURE__*/React.createElement(Radio, {
style: radioStyle,
value: 4
}), aStartTob.week ? aStartTob.week(aStartTobA, aStartTobB) : /*#__PURE__*/React.createElement(React.Fragment, null, "\u672C\u6708\u7B2C\xA0", aStartTobA, "\xA0\u5468\u7684\xA0", aStartTobB, "\xA0\u6267\u884C\u4E00\u6B21")), /*#__PURE__*/React.createElement("span", {
style: {
display: "flex",
alignItems: "center",
fontSize: 14
}
}, /*#__PURE__*/React.createElement(Radio, {
style: radioStyle,
value: 5
}), aStartTob.week2 ? aStartTob.week2(aStartTob2A) : /*#__PURE__*/React.createElement(React.Fragment, null, "\u672C\u6708\u7684\u6700\u540E\u4E00\u4E2A\xA0", aStartTob2A, "\xA0\u6267\u884C\u4E00\u6B21")), /*#__PURE__*/React.createElement(Radio, {
style: radioStyle,
value: 6
}, assign || "指定", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(CheckboxGroup, {
value: selected,
onChange: onChangeSelected,
style: {
width: "100%"
}
}, /*#__PURE__*/React.createElement(Row, null, checkList))));
}
export default WeekPane;