@fle-ui/next 1.0.0-alpha.2 → 1.0.0-alpha.4

package/components/calendar/demo/notice-calendar.tsx

@@ -0,0 +1,78 @@
+/**
+ * title: 通知事项日历
+ * desc: 一个复杂的应用示例，用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
+ */
+
+import React from 'react';
+import { Calendar, Badge } from '@fle-ui/next';
+
+const NoticeCalendarDemo = () => {
+ 
+  const getListData = (value: any) => {
+    let listData;
+    switch (value.date()) {
+      case 8:
+        listData = [
+          { type: 'warning', content: 'This is warning event.' },
+          { type: 'success', content: 'This is usual event.' },
+        ];
+        break;
+      case 10:
+        listData = [
+          { type: 'warning', content: 'This is warning event.' },
+          { type: 'success', content: 'This is usual event.' },
+          { type: 'error', content: 'This is error event.' },
+        ];
+        break;
+      case 15:
+        listData = [
+          { type: 'warning', content: 'This is warning event' },
+          { type: 'success', content: 'This is very long usual event。。....' },
+          { type: 'error', content: 'This is error event 1.' },
+          { type: 'error', content: 'This is error event 2.' },
+          { type: 'error', content: 'This is error event 3.' },
+          { type: 'error', content: 'This is error event 4.' },
+        ];
+        break;
+      default:
+    }
+    return listData || [];
+  };
+
+  const dateCellRender = (value: any) => {
+    const listData = getListData(value);
+    return (
+      <ul className="events">
+        {listData.map((item: any) => (
+          <li key={item.content}>
+            <Badge status={item.type} text={item.content} />
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  const getMonthData = (value: any) => {
+    if (value.month() === 8) {
+      return 1394;
+    }
+  };
+
+  const monthCellRender = (value: any) => {
+    const num = getMonthData(value);
+    return num ? (
+      <div className="notes-month">
+        <section>{num}</section>
+        <span>Backlog number</span>
+      </div>
+    ) : null;
+  };
+  return (
+    <Calendar
+      dateCellRender={dateCellRender}
+      monthCellRender={monthCellRender}
+    />
+  );
+};
+
+export default NoticeCalendarDemo;

package/components/calendar/demo/select.tsx

@@ -0,0 +1,37 @@
+/**
+ * title: 选择功能
+ * desc: 一个通用的日历面板，支持年/月切换。
+ */
+
+import React, { useState } from 'react';
+import { Calendar, Alert } from '@fle-ui/next';
+import moment from 'moment';
+
+const SelectDemo = () => {
+  const [value, setValue] = useState(moment('2017-01-25'));
+  const [selectedValue, setSelectedValue] = useState(moment('2017-01-25'));
+  const onSelect = (value: moment.Moment) => {
+    setValue(value);
+    setSelectedValue(value);
+  };
+
+  const onPanelChange = (value: moment.Moment) => {
+    setValue(value);
+  };
+  return (
+    <>
+      <Alert
+        message={`You selected date: ${
+          selectedValue && selectedValue.format('YYYY-MM-DD')
+        }`}
+      />
+      <Calendar
+        value={value}
+        onSelect={onSelect}
+        onPanelChange={onPanelChange}
+      />
+    </>
+  );
+};
+
+export default SelectDemo;

package/components/calendar/generateCalendar.tsx

@@ -0,0 +1,291 @@
+import * as React from 'react';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import classNames from 'classnames';
+import padStart from 'lodash/padStart';
+import { PickerPanel as RCPickerPanel } from 'rc-picker';
+import { Locale } from 'rc-picker/lib/interface';
+import { GenerateConfig } from 'rc-picker/lib/generate';
+import {
+  PickerPanelBaseProps as RCPickerPanelBaseProps,
+  PickerPanelDateProps as RCPickerPanelDateProps,
+  PickerPanelTimeProps as RCPickerPanelTimeProps,
+} from 'rc-picker/lib/PickerPanel';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import enUS from './locale/en_US';
+import { ConfigContext } from '../config-provider';
+import CalendarHeader from './Header';
+
+type InjectDefaultProps<Props> = Omit<
+  Props,
+  'locale' | 'generateConfig' | 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon'
+> & {
+  locale?: typeof enUS;
+  size?: 'large' | 'default' | 'small';
+};
+
+// Picker Props
+export type PickerPanelBaseProps<DateType> = InjectDefaultProps<RCPickerPanelBaseProps<DateType>>;
+export type PickerPanelDateProps<DateType> = InjectDefaultProps<RCPickerPanelDateProps<DateType>>;
+export type PickerPanelTimeProps<DateType> = InjectDefaultProps<RCPickerPanelTimeProps<DateType>>;
+
+export type PickerProps<DateType> =
+  | PickerPanelBaseProps<DateType>
+  | PickerPanelDateProps<DateType>
+  | PickerPanelTimeProps<DateType>;
+
+export type CalendarMode = 'year' | 'month';
+export type HeaderRender<DateType> = (config: {
+  value: DateType;
+  type: CalendarMode;
+  onChange: (date: DateType) => void;
+  onTypeChange: (type: CalendarMode) => void;
+}) => React.ReactNode;
+
+export interface CalendarProps<DateType> {
+  prefixCls?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  locale?: typeof enUS;
+  validRange?: [DateType, DateType];
+  disabledDate?: (date: DateType) => boolean;
+  dateFullCellRender?: (date: DateType) => React.ReactNode;
+  dateCellRender?: (date: DateType) => React.ReactNode;
+  monthFullCellRender?: (date: DateType) => React.ReactNode;
+  monthCellRender?: (date: DateType) => React.ReactNode;
+  headerRender?: HeaderRender<DateType>;
+  value?: DateType;
+  defaultValue?: DateType;
+  mode?: CalendarMode;
+  fullscreen?: boolean;
+  onChange?: (date: DateType) => void;
+  onPanelChange?: (date: DateType, mode: CalendarMode) => void;
+  onSelect?: (date: DateType) => void;
+}
+
+function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
+  function isSameYear(date1: DateType, date2: DateType) {
+    return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2);
+  }
+
+  function isSameMonth(date1: DateType, date2: DateType) {
+    return (
+      isSameYear(date1, date2) && generateConfig.getMonth(date1) === generateConfig.getMonth(date2)
+    );
+  }
+
+  function isSameDate(date1: DateType, date2: DateType) {
+    return (
+      isSameMonth(date1, date2) && generateConfig.getDate(date1) === generateConfig.getDate(date2)
+    );
+  }
+
+  const Calendar = (props: CalendarProps<DateType>) => {
+    const {
+      prefixCls: customizePrefixCls,
+      className,
+      style,
+      dateFullCellRender,
+      dateCellRender,
+      monthFullCellRender,
+      monthCellRender,
+      headerRender,
+      value,
+      defaultValue,
+      disabledDate,
+      mode,
+      validRange,
+      fullscreen = true,
+      onChange,
+      onPanelChange,
+      onSelect,
+    } = props;
+    const { getPrefixCls, direction } = React.useContext(ConfigContext);
+    const prefixCls = getPrefixCls('picker', customizePrefixCls);
+    const calendarPrefixCls = `${prefixCls}-calendar`;
+    const today = generateConfig.getNow();
+
+    // ====================== State =======================
+
+    // Value
+    const [mergedValue, setMergedValue] = useMergedState(() => value || generateConfig.getNow(), {
+      defaultValue,
+      value,
+    });
+
+    // Mode
+    const [mergedMode, setMergedMode] = useMergedState('month', {
+      value: mode,
+    });
+    const panelMode = React.useMemo<'month' | 'date'>(
+      () => (mergedMode === 'year' ? 'month' : 'date'),
+      [mergedMode],
+    );
+
+    // Disabled Date
+    const mergedDisabledDate = React.useCallback(
+      (date: DateType) => {
+        const notInRange = validRange
+          ? generateConfig.isAfter(validRange[0], date) ||
+            generateConfig.isAfter(date, validRange[1])
+          : false;
+        return notInRange || !!disabledDate?.(date);
+      },
+      [disabledDate, validRange],
+    );
+
+    // ====================== Events ======================
+    const triggerPanelChange = (date: DateType, newMode: CalendarMode) => {
+      onPanelChange?.(date, newMode);
+    };
+
+    const triggerChange = (date: DateType) => {
+      setMergedValue(date);
+
+      if (!isSameDate(date, mergedValue)) {
+        // Trigger when month panel switch month
+        if (
+          (panelMode === 'date' && !isSameMonth(date, mergedValue)) ||
+          (panelMode === 'month' && !isSameYear(date, mergedValue))
+        ) {
+          triggerPanelChange(date, mergedMode);
+        }
+
+        onChange?.(date);
+      }
+    };
+
+    const triggerModeChange = (newMode: CalendarMode) => {
+      setMergedMode(newMode);
+      triggerPanelChange(mergedValue, newMode);
+    };
+
+    const onInternalSelect = (date: DateType) => {
+      triggerChange(date);
+
+      onSelect?.(date);
+    };
+
+    // ====================== Locale ======================
+    const getDefaultLocale = () => {
+      const { locale } = props;
+      const result = {
+        ...enUS,
+        ...locale,
+      };
+      result.lang = {
+        ...result.lang,
+        ...((locale || {}) as any).lang,
+      };
+      return result;
+    };
+
+    // ====================== Render ======================
+    const dateRender = React.useCallback(
+      (date: DateType): React.ReactNode => {
+        if (dateFullCellRender) {
+          return dateFullCellRender(date);
+        }
+
+        return (
+          <div
+            className={classNames(`${prefixCls}-cell-inner`, `${calendarPrefixCls}-date`, {
+              [`${calendarPrefixCls}-date-today`]: isSameDate(today, date),
+            })}
+          >
+            <div className={`${calendarPrefixCls}-date-value`}>
+              {padStart(String(generateConfig.getDate(date)), 2, '0')}
+            </div>
+            <div className={`${calendarPrefixCls}-date-content`}>
+              {dateCellRender && dateCellRender(date)}
+            </div>
+          </div>
+        );
+      },
+      [dateFullCellRender, dateCellRender],
+    );
+
+    const monthRender = React.useCallback(
+      (date: DateType, locale: Locale): React.ReactNode => {
+        if (monthFullCellRender) {
+          return monthFullCellRender(date);
+        }
+
+        const months = locale.shortMonths || generateConfig.locale.getShortMonths!(locale.locale);
+
+        return (
+          <div
+            className={classNames(`${prefixCls}-cell-inner`, `${calendarPrefixCls}-date`, {
+              [`${calendarPrefixCls}-date-today`]: isSameMonth(today, date),
+            })}
+          >
+            <div className={`${calendarPrefixCls}-date-value`}>
+              {months[generateConfig.getMonth(date)]}
+            </div>
+            <div className={`${calendarPrefixCls}-date-content`}>
+              {monthCellRender && monthCellRender(date)}
+            </div>
+          </div>
+        );
+      },
+      [monthFullCellRender, monthCellRender],
+    );
+
+    return (
+      <LocaleReceiver componentName="Calendar" defaultLocale={getDefaultLocale}>
+        {(mergedLocale: any) => (
+          <div
+            className={classNames(
+              calendarPrefixCls,
+              {
+                [`${calendarPrefixCls}-full`]: fullscreen,
+                [`${calendarPrefixCls}-mini`]: !fullscreen,
+                [`${calendarPrefixCls}-rtl`]: direction === 'rtl',
+              },
+              className,
+            )}
+            style={style}
+          >
+            {headerRender ? (
+              headerRender({
+                value: mergedValue,
+                type: mergedMode,
+                onChange: onInternalSelect,
+                onTypeChange: triggerModeChange,
+              })
+            ) : (
+              <CalendarHeader
+                prefixCls={calendarPrefixCls}
+                value={mergedValue}
+                generateConfig={generateConfig}
+                mode={mergedMode}
+                fullscreen={fullscreen}
+                locale={mergedLocale.lang}
+                validRange={validRange}
+                onChange={onInternalSelect}
+                onModeChange={triggerModeChange}
+              />
+            )}
+
+            <RCPickerPanel
+              value={mergedValue}
+              prefixCls={prefixCls}
+              locale={mergedLocale.lang}
+              generateConfig={generateConfig}
+              dateRender={dateRender}
+              monthCellRender={date => monthRender(date, mergedLocale.lang)}
+              onSelect={onInternalSelect}
+              mode={panelMode}
+              picker={panelMode as any}
+              disabledDate={mergedDisabledDate}
+              hideHeader
+            />
+          </div>
+        )}
+      </LocaleReceiver>
+    );
+  };
+
+  return Calendar;
+}
+
+export default generateCalendar;

package/components/calendar/index.tsx

@@ -0,0 +1,8 @@
+import { Moment } from 'moment';
+import momentGenerateConfig from 'rc-picker/lib/generate/moment';
+import generateCalendar, { CalendarProps } from './generateCalendar';
+
+const Calendar = generateCalendar<Moment>(momentGenerateConfig);
+
+export { CalendarProps };
+export default Calendar;

package/components/calendar/locale/ar_EG.tsx

@@ -0,0 +1,3 @@
+import arEG from '../../date-picker/locale/ar_EG';
+
+export default arEG;

package/components/calendar/locale/az_AZ.tsx

@@ -0,0 +1,3 @@
+import azAZ from '../../date-picker/locale/az_AZ';
+
+export default azAZ;

package/components/calendar/locale/bg_BG.tsx

@@ -0,0 +1,3 @@
+import bgBG from '../../date-picker/locale/bg_BG';
+
+export default bgBG;

package/components/calendar/locale/bn_BD.tsx

@@ -0,0 +1,3 @@
+import bnBD from '../../date-picker/locale/bn_BD';
+
+export default bnBD;

package/components/calendar/locale/by_BY.tsx

@@ -0,0 +1,3 @@
+import byBY from '../../date-picker/locale/by_BY';
+
+export default byBY;

package/components/calendar/locale/ca_ES.tsx

@@ -0,0 +1,3 @@
+import caES from '../../date-picker/locale/ca_ES';
+
+export default caES;