@titaui/pc 1.7.96 → 1.7.97

package/src/components/period-selector/common.ts

@@ -0,0 +1,247 @@
+import { SelectedInterface, PeriodObj } from "./type";
+import moment from "moment";
+
+export const dealSelectedPeriodData = (period: string) => {
+  let option: any = {};
+  option.cycleType = period == "-1" ? "-1" : period.substring(0, 1);
+  option.yqmNum = period.substring(2) == "" ? "0" : period.substring(2);
+  return option;
+};
+
+export const dealYearsRange = (
+  yearsRange: number[],
+  showAllYears?: boolean
+) => {
+  let yearsData: PeriodObj[] = [];
+  if (yearsRange.length) {
+    if (yearsRange.length > 1 && showAllYears) {
+      yearsData = [
+        {
+          title: "全部年份",
+          order: ["-1"],
+          checked: false,
+        },
+      ];
+    }
+    let startYear = yearsRange[0];
+    let endYear = yearsRange[yearsRange.length - 1];
+    for (var i = startYear; i <= endYear; i++) {
+      yearsData.push({
+        checked: false,
+        order: [i + ""],
+        title: i + "",
+      });
+    }
+  } else {
+    let nowYear = new Date().getFullYear();
+    yearsData = [
+      {
+        title: nowYear + "",
+        order: [nowYear + ""],
+        checked: false,
+      },
+    ];
+  }
+  return yearsData;
+};
+
+export const formatPeriod = (selected: SelectedInterface) => {
+  if (!selected) return "";
+  var quarter = ["", "第一季度", "第二季度", "第三季度", "第四季度"];
+  var cycleDate = "";
+  var annualNum =
+    selected.annualNum == "-1" ? "全部年份" : selected.annualNum + "年";
+  switch (`${selected.cycleType}`) {
+    case "-1":
+      cycleDate = "全部周期";
+      break;
+    case "1":
+      cycleDate = "年度";
+      break;
+    case "2":
+      // 季度
+      cycleDate = quarter[Number(selected.yqmNum)];
+      break;
+    case "3":
+      cycleDate = selected.yqmNum + "月";
+      break;
+    case "4":
+      cycleDate = `${selected.yqmNum} - ${
+        ((Number(selected.yqmNum) + 1) % 12 || 12)
+      }月`;
+      break;
+    case "5":
+      cycleDate = selected.yqmNum == "1" ? "上半年" : "下半年";
+      break;
+    default:
+      cycleDate = "自定义";
+  }
+  return annualNum + "  " + cycleDate;
+};
+
+export const computeYearIndex = (
+  currentYear: number,
+  yearsData: PeriodObj[],
+  computeType: string
+) => {
+  let newIndex;
+  let currentYearIndex = yearsData.findIndex(
+    (item) => Number(item.title) == currentYear
+  );
+  if (computeType == "add") {
+    newIndex = currentYearIndex + 1;
+  } else {
+    newIndex = currentYearIndex - 1;
+  }
+  return newIndex;
+};
+
+export interface ICycle {
+  cycleType: string;
+  annualNum: string;
+  yqmNum: string;
+}
+export const getDateRangeByCycle = (cycle: ICycle, startMonth: number = 1) => {
+  if (!cycle) {
+    const start = moment();
+    return {
+      startDate: start.format("YYYY/MM/DD"),
+      endDate: start.add(1, "M").format("YYYY/MM/DD"),
+    };
+  }
+  switch (cycle.cycleType) {
+    case "1": {
+      const start = moment()
+        .year(Number(cycle.annualNum))
+        .month(startMonth - 1)
+        .date(1);
+      return {
+        startDate: start.format("YYYY/MM/DD"),
+        endDate: start.add(11, "M").endOf("M").format("YYYY/MM/DD"),
+      };
+    }
+    case "2": {
+      const yearStart = moment()
+        .year(Number(cycle.annualNum))
+        .month(startMonth - 1)
+        .date(1);
+      const quarterStart = yearStart.add((Number(cycle.yqmNum) - 1) * 3, "M");
+      return {
+        startDate: quarterStart.format("YYYY/MM/DD"),
+        endDate: quarterStart.add(2, "M").endOf("M").format("YYYY/MM/DD"),
+      };
+    }
+    case "3": {
+      return {
+        startDate: `${cycle.annualNum}/${
+          Number(cycle.yqmNum) < 10 ? "0" + cycle.yqmNum : cycle.yqmNum
+        }/01`,
+        endDate: moment(cycle.annualNum + "/" + cycle.yqmNum + "/" + 1)
+          .add(1, "month")
+          .set("date", 0)
+          .format("YYYY/MM/DD"),
+      };
+    }
+    case "4": {
+      const start = moment()
+        .year(Number(cycle.annualNum))
+        .month(Number(cycle.yqmNum) - 1)
+        .date(1);
+      return {
+        startDate: start.format("YYYY/MM/DD"),
+        endDate: start.add(1, "month").endOf("M").format("YYYY/MM/DD"),
+      };
+    }
+    case "5": {
+      const start = moment()
+        .year(Number(cycle.annualNum))
+        .month(startMonth - 1)
+        .date(1);
+      if (cycle.yqmNum == "2") start.add(6, "M");
+      return {
+        startDate: start.format("YYYY/MM/DD"),
+        endDate: start.add(5, "month").endOf("M").format("YYYY/MM/DD"),
+      };
+    }
+    default: {
+      return {
+        startDate: moment()
+          .set("year", Number(cycle.annualNum))
+          .format("YYYY/MM/DD"),
+        endDate: moment()
+          .set("year", Number(cycle.annualNum))
+          .add(30, "day")
+          .format("YYYY/MM/DD"),
+      };
+    }
+  }
+};
+
+export function getQuaterNum(month, startMonth = 1) {
+  let m = month >= startMonth ? month : month + 12;
+  return Math.floor((m - startMonth) / 3) + 1;
+}
+
+export function getDefalutCycle(setting) {
+  if (setting.isOpenQuarter) {
+    const cycle = {
+      annualNum: new Date().getFullYear() + "",
+      cycleType: "2",
+      yqmNum: `${getQuaterNum(
+        new Date().getMonth() + 1,
+        setting.yearStartMonth
+      )}`,
+    };
+    return {
+      ...cycle,
+      ...getDateRangeByCycle(cycle, setting.yearStartMonth),
+    };
+  } else if (setting.isOpenMonth) {
+    const cycle = {
+      annualNum: new Date().getFullYear() + "",
+      cycleType: "3",
+      yqmNum: new Date().getMonth() + 1 + "",
+    };
+    return {
+      ...cycle,
+      ...getDateRangeByCycle(cycle, setting.yearStartMonth),
+    };
+  } else if (setting.isOpenBimonthly) {
+    let month = new Date().getMonth() + 1;
+    if (setting.yearStartMonth % 2 == 1) {
+      month = month - (month % 2 == 1 ? 0 : 1);
+    } else {
+      month = month - (month % 2) || 12;
+    }
+    const cycle = {
+      annualNum: new Date().getFullYear() + "",
+      cycleType: "4",
+      yqmNum: month + "",
+    };
+    return {
+      ...cycle,
+      ...getDateRangeByCycle(cycle, setting.yearStartMonth),
+    };
+  } else if (setting.isOpenHalfYear) {
+    const cycle = {
+      annualNum: new Date().getFullYear() + "",
+      cycleType: "5",
+      yqmNum: "1",
+    };
+    return {
+      ...cycle,
+      ...getDateRangeByCycle(cycle, setting.yearStartMonth),
+    };
+  }
+  const cycle = {
+    annualNum: new Date().getFullYear() + "",
+    cycleType: "1",
+    yqmNum: "1",
+  };
+  return {
+    annualNum: new Date().getFullYear() + "",
+    cycleType: "1",
+    yqmNum: "1",
+    ...getDateRangeByCycle(cycle, setting.yearStartMonth),
+  };
+}

package/src/components/period-selector/components/button/index.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef } from "react";
+import { DefaultWrapper, PrimaryWrapper, BorderWrapper, LinkWrapper } from "./style";
+import { StyledComponent } from "styled-components";
+
+type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
+
+export type BtnSize = "s" | "m"
+export type Props = Overwrite<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  {
+    type?: "primary" | "default" | "border" | "link";
+    size?: BtnSize,
+    css?: any
+    theme?: 'default' | 'danger'
+  }
+>;
+
+const Button: React.FC<Props> = function ({
+  type = "default",
+  children,
+  onClick,
+  className,
+  style,
+  size = "m",
+  theme = 'default',
+  ...others
+}, ref) {
+  let Wrapper: StyledComponent<"button", any, any> = DefaultWrapper;
+  switch (type) {
+    case "default": {
+      Wrapper = DefaultWrapper;
+      break;
+    }
+    case "primary": {
+      Wrapper = PrimaryWrapper;
+      break;
+    }
+    case "border": {
+      Wrapper = BorderWrapper;
+      break;
+    }
+    case "link": {
+      Wrapper = LinkWrapper;
+      break
+    }
+  }
+
+  return (
+    <Wrapper
+      onClick={onClick}
+      {...others}
+      className={className + ' btn-size-' + size}
+      style={style}
+      size={size}
+      ref={ref}
+      theme={theme}
+    >
+      {children}
+    </Wrapper>
+  );
+};
+//@ts-ignore
+export default forwardRef(Button);

package/src/components/period-selector/components/button/style.ts

@@ -0,0 +1,87 @@
+import styled from "styled-components";
+import { BtnSize } from "./index";
+interface BtnProps {
+  size: BtnSize;
+}
+
+export const DefaultWrapper = styled.button<BtnProps>`
+  box-sizing: border-box;
+  display: inline-flex;
+
+  align-items: center;
+  justify-content: center;
+  color: #6f7886;
+  cursor: pointer;
+  outline: none;
+  transition: color 0.3s ease, border 0.3s ease;
+  background: transparent;
+  border-radius: 3px;
+  border: 1px solid #e9ecf0;
+  &.btn-size-m {
+    min-width: 90px;
+    height: 36px;
+    padding: 0 18px;
+    font-size: 14px;
+    font-weight: 400;
+  }
+  &.btn-size-s {
+    min-width: 68px;
+    height: 26px;
+    padding: 0 20px;
+    font-size: 13px;
+    font-weight: 400;
+  }
+  :hover {
+    color: #2879ff;
+    border-color: #2879ff;
+  }
+  :disabled {
+    cursor: not-allowed;
+    background-color: #f0f2f5;
+    color: #a4acb9;
+    border: none;
+    :hover {
+      border: none;
+      color: #bfc7d5;
+      opacity: 1;
+      background-color: #f0f2f5;
+    }
+  }
+`;
+
+export const PrimaryWrapper = styled(DefaultWrapper)`
+  color: #ffffff;
+  background: #2879ff;
+  border: none;
+  :hover {
+    color: #ffffff;
+    background-color: #5c8eff;
+    border: none;
+  }
+`;
+
+export const BorderWrapper = styled(DefaultWrapper)`
+  color: ${(p) => (p.theme == "danger" ? "#F05E5E" : "#2879ff")};
+  background: transparent;
+  border: 1px solid ${(p) => (p.theme == "danger" ? "#F05E5E" : "#2879ff")};
+  :hover {
+    background: ${(p) =>
+    p.theme == "danger" ? "rgba(240,94,94,.1)" : "#e9f1ff"};
+    color: ${(p) => (p.theme == "danger" ? "#F05E5E" : "#2879ff")};
+    border-color: ${(p) => (p.theme == "danger" ? "#F05E5E" : "#2879ff")};
+  }
+`;
+
+export const LinkWrapper = styled.button`
+  border: none;
+  background-color: transparent;
+  outline: none;
+  color: #2879ff;
+  font-size: 14px;
+  padding: 0;
+  transition: color 0.3s ease;
+  cursor: pointer;
+  :hover{
+    color: #5c8eff;
+  }
+`;

package/src/components/period-selector/components/selector/index.tsx

@@ -0,0 +1,282 @@
+import React, { useEffect, useState } from "react";
+import {
+  computeYearIndex,
+  dealSelectedPeriodData,
+  dealYearsRange,
+  getDateRangeByCycle,
+} from "../../common";
+import { MockMonth, MockPeriod, MockQuarter } from "../../mockData";
+import { PeriodObj, SelectedInterface } from "../../type";
+import { Head, List, Item, Icon, Title, Wrapper, PlaceHolder } from "./style";
+
+export interface ISelectorProps {
+  className?: string;
+  selected: SelectedInterface;
+  /** 是否显示 “自定义” */
+  showCustom: boolean;
+  /** 是否显示 “全部周期” */
+
+  showFullCycle?: boolean;
+  /** 是否显示 “月份” */
+  showMonth: boolean;
+  /** 是否显示 “双月” */
+  showDoubleMonth: boolean;
+  /** 是否显示 “季度” */
+  showQuarter: boolean;
+  /** 是否显示 “半年度” */
+  showHalfYear: boolean;
+  /** 是否显示 “年度” */
+  showYear: boolean;
+  /** 财年起始月份 */
+  startMonth: number;
+  onSelected: (period: SelectedInterface) => void;
+  yearsRange: number[];
+  wrapperStyle?: React.CSSProperties;
+}
+
+interface PeriodListProps {
+  actived: string[];
+  periodData: PeriodObj[];
+  style?: React.CSSProperties;
+  onSelected: (value: string) => void;
+  size?: "m" | "s";
+}
+function PeriodList({
+  actived,
+  periodData,
+  onSelected,
+  style,
+  size = "m",
+}: PeriodListProps) {
+  const [activeOrder, setActiveOrder] = useState<string[]>(["0"]);
+
+  useEffect(() => {
+    setActiveOrder(actived);
+  }, [actived]);
+  return (
+    <List style={style}>
+      {periodData.map((item: PeriodObj, index: number) => {
+        return (
+          <Item
+            className={item.order[0] == activeOrder[0] ? "active" : ""}
+            key={index}
+            onClick={() => onSelected(item.order[0])}
+            size={size}
+          >
+            {item.title}
+          </Item>
+        );
+      })}
+      {new Array(6).fill(1).map(() => (
+        <PlaceHolder size={size} />
+      ))}
+    </List>
+  );
+}
+
+function getDoubleMonthData(startMonth) {
+  let start = startMonth % 2 == 1 ? 1 : 2;
+  let month = start;
+  const getNextMonth = (month, step = 1) => (month + step) % 12 || 12;
+  let datas = [
+    {
+      title: `${start} - ${getNextMonth(start)}月`,
+      order: [`4,${start}`],
+      checked: false,
+    },
+  ];
+  while (1) {
+    month = getNextMonth(month, 2);
+    if (month == start) break;
+    datas.push({
+      title: `${month} - ${getNextMonth(month)}月`,
+      order: [`4,${month}`],
+      checked: false,
+    });
+  }
+  return datas;
+}
+
+function Selector({
+  className,
+  onSelected,
+  selected,
+  showCustom,
+  showFullCycle,
+  showMonth,
+  showQuarter,
+  showYear,
+  showHalfYear,
+  showDoubleMonth,
+  yearsRange,
+  wrapperStyle,
+  startMonth = 1,
+}: ISelectorProps) {
+  const [annualNum, setAnnualNum] = useState(new Date().getFullYear() + "");
+  const [annualNumIndex, setAnnualNumIndex] = useState(0);
+  const [cycleType, setCycleType] = useState("-1");
+  const [periodData, setPeriodData] = useState(MockPeriod);
+  const [yqmNum, setYqmNum] = useState("0");
+  const yearsRangeLen = dealYearsRange(yearsRange).length;
+
+  function setYear(computeType: string, condition: boolean) {
+    let yearsData = dealYearsRange(yearsRange);
+    if (condition) {
+      let yearIndex = computeYearIndex(
+        Number(annualNum),
+        yearsData,
+        computeType
+      );
+      setAnnualNum(yearsData[yearIndex].title);
+      setAnnualNumIndex(yearIndex);
+      setCycleType("");
+      setYqmNum("");
+    }
+  }
+
+  function handleSelected(period: string) {
+    let selected = {
+      annualNum,
+      cycleType: dealSelectedPeriodData(period).cycleType,
+      yqmNum: dealSelectedPeriodData(period).yqmNum,
+      ...dealSelectedPeriodData(period),
+    };
+    onSelected({
+      ...selected,
+      ...getDateRangeByCycle(selected, startMonth),
+    });
+  }
+
+  useEffect(() => {
+    setAnnualNum(selected.annualNum);
+    setCycleType(selected.cycleType);
+    setYqmNum(selected.yqmNum);
+    setAnnualNumIndex(
+      dealYearsRange(yearsRange).findIndex(
+        (item) => Number(item.title) == Number(selected.annualNum)
+      )
+    );
+
+    let periodDatas: any[] = [
+      showFullCycle && {
+        title: "全部周期",
+        order: ["-1"],
+        checked: false,
+      },
+      showYear && {
+        title: "年度",
+        order: ["1"],
+        checked: false,
+      },
+    ].filter((item: any) => item);
+    if (showHalfYear) {
+      periodDatas.push(
+        {
+          title: "上半年",
+          order: ["5,1"],
+          checked: false,
+        },
+        {
+          title: "下半年",
+          order: ["5,2"],
+          checked: false,
+        }
+      );
+    }
+    if (showQuarter) {
+      periodDatas.push(...MockQuarter);
+    }
+    if (showCustom) {
+      periodDatas.push({
+        title: "自定义",
+        order: ["0,0"],
+        checked: false,
+      });
+    }
+    setPeriodData(periodDatas);
+  }, [selected, showCustom, showFullCycle, showMonth, showQuarter, showYear]);
+  return (
+    <Wrapper className={className} style={wrapperStyle}>
+      <Head>
+        {yearsRange.length > 1 && (
+          <Icon
+            className={`tu-icon-angle-left ${
+              yearsRangeLen > 1 && annualNumIndex != 0 ? "" : "disabled"
+            }`}
+            onClick={() =>
+              setYear("subtract", yearsRangeLen > 1 && annualNumIndex != 0)
+            }
+          />
+        )}
+        <Title>{annualNum}</Title>
+        {yearsRange.length > 1 && (
+          <Icon
+            className={`tu-icon-angle-right ${
+              yearsRangeLen > 1 && annualNumIndex != yearsRangeLen - 1
+                ? ""
+                : "disabled"
+            }`}
+            onClick={() =>
+              setYear(
+                "add",
+                yearsRangeLen > 1 && annualNumIndex != yearsRangeLen - 1
+              )
+            }
+          />
+        )}
+      </Head>
+      <PeriodList
+        actived={[
+          `${
+            cycleType == "-1"
+              ? "-1"
+              : cycleType == "1"
+              ? cycleType
+              : `${cycleType},${yqmNum}`
+          }`,
+        ]}
+        periodData={periodData}
+        onSelected={(period: string) => {
+          handleSelected(period);
+        }}
+      />
+      {showDoubleMonth && (
+        <PeriodList
+          actived={[
+            `${
+              cycleType == "-1"
+                ? "-1"
+                : cycleType == "1"
+                ? cycleType
+                : `${cycleType},${yqmNum}`
+            }`,
+          ]}
+          periodData={getDoubleMonthData(startMonth)}
+          onSelected={(period: string) => {
+            handleSelected(period);
+          }}
+        />
+      )}
+      {showMonth && (
+        <PeriodList
+          actived={[
+            `${
+              cycleType == "-1"
+                ? "-1"
+                : cycleType == "1"
+                ? cycleType
+                : `${cycleType},${yqmNum}`
+            }`,
+          ]}
+          size="s"
+          periodData={MockMonth}
+          onSelected={(period: string) => {
+            handleSelected(period);
+          }}
+        />
+      )}
+    </Wrapper>
+  );
+}
+
+export default Selector;