@kdcloudjs/kdesign 1.0.2

package/es/config-provider/compDefaultProps.js

@@ -0,0 +1,411 @@
+import * as React from 'react';
+import { Icon } from '../index';
+/**
+ * 组件默认属性，所有组件的默认属性都在这里写，
+ * 而不是在组件文件中以“componentName.defaultProps”的方式去写
+ * componentName: defaultPropsObj
+ * （用于处理用户自定义默认属性）
+ */
+
+var compDefaultProps = {
+  Alert: {
+    type: 'warning',
+    showIcon: false,
+    closable: false,
+    delayOffTime: 5000,
+    banner: false,
+    bannerOffset: [0, 0]
+  },
+  Button: {
+    type: 'second',
+    iconPlace: 'left',
+    size: 'middle',
+    bordered: true
+  },
+  Card: {
+    hoverable: false,
+    selectable: false
+  },
+  Carousel: {
+    autoplay: false,
+    dotPosition: 'bottom',
+    dots: true,
+    easing: 'cubic-bezier(0.4,0,0.6,1)',
+    effect: 'scrollx',
+    intervalTime: 4000
+  },
+  Cascader: {
+    allowClear: true,
+    expandTrigger: 'click',
+    notFoundContent: 'No Data',
+    popupPlacement: 'bottomLeft',
+    dropdownRender: function dropdownRender(menus) {
+      return menus;
+    },
+    displayRender: function displayRender(labels) {
+      return labels.join('/');
+    },
+    fieldNames: {
+      label: 'label',
+      value: 'value',
+      children: 'children'
+    }
+  },
+  Col: {},
+  Collapse: {
+    accordion: false,
+    expandIconPosition: 'left',
+    bordered: false
+  },
+  CollapsePanel: {
+    disabled: false
+  },
+  Checkbox: {
+    defaultChecked: false,
+    checkboxType: 'default',
+    indeterminate: false,
+    disabled: false,
+    size: 'middle'
+  },
+  CheckboxGroup: {
+    checkboxType: 'default',
+    disabled: false
+  },
+  Dropdown: {
+    arrow: false,
+    placement: 'bottomLeft',
+    trigger: 'hover'
+  },
+  DropdownItem: {},
+  DropdownMenu: {},
+  DatePicker: {
+    allowClear: true,
+    autoFocus: false,
+    borderType: 'underline',
+    disabled: false,
+    inputReadOnly: false,
+    picker: 'date',
+    popupStyle: {},
+    size: 'middle',
+    showToday: false,
+    style: {},
+    showArrow: true,
+    defaultOpen: false,
+    showWeeksTitle: true,
+    yearItemNumber: 15,
+    hourStep: 1,
+    minuteStep: 1,
+    secondStep: 1
+  },
+  Drawer: {
+    closable: true,
+    destroyOnClose: false,
+    forceRender: false,
+    getContainer: document.body,
+    height: 220,
+    keyboard: true,
+    mask: true,
+    maskClosable: true,
+    placement: 'right',
+    width: 365,
+    zIndex: 1050
+  },
+  Empty: {},
+  Filter: {
+    fields: [],
+    schemes: [],
+    defaultTabKey: 'condition'
+  },
+  Form: {
+    layout: 'vertical',
+    labelAlign: 'left',
+    size: 'middle'
+  },
+  Icon: {
+    prefix: 'kdicon'
+  },
+  Input: {
+    type: 'text',
+    size: 'middle',
+    borderType: 'underline'
+  },
+  Select: {
+    size: 'middle',
+    borderType: 'underline',
+    mode: 'single',
+    defaultOpen: false,
+    showArrow: true,
+    showSearch: false
+  },
+  Image: {
+    preview: true
+  },
+  InputNumber: {
+    type: 'text',
+    size: 'middle',
+    borderType: 'underline',
+    minMark: '(',
+    maxMark: ']',
+    zeroShow: false,
+    showDecimalTailZero: false,
+    mask: '',
+    mustInScope: false,
+    mustInPrecisionScope: true
+  },
+  Layout: {},
+  Modal: {
+    type: 'normal',
+    keyboard: true,
+    mask: true,
+    maskClosable: true,
+    closable: true,
+    getContainer: document.body,
+    footerBtnOrder: 'normal',
+    width: 460,
+    height: 340,
+    focusTriggerAfterClose: true,
+    destroyOnClose: false,
+    draggable: true,
+    cancelButtonProps: {},
+    okButtonProps: {},
+    showline: true
+  },
+  Menu: {
+    mode: 'vertical',
+    inlineIndent: 50,
+    forceSubMenuRender: false,
+    triggerSubMenuAction: 'hover',
+    theme: 'dark',
+    collapsed: false
+  },
+  MenuItem: {
+    disabled: false
+  },
+  MenuSubMenu: {
+    disabled: false,
+    popupOffset: [0, 0]
+  },
+  Message: {},
+  Notice: {},
+  Notification: {},
+  Pagination: {
+    total: 0,
+    pageType: 'basic',
+    defaultCurrent: 1,
+    defaultPageSize: 10,
+    pageSizeOptions: [10, 20, 50, 100],
+    showTitle: true,
+    bordered: false,
+    hideOnSinglePage: false
+  },
+  Popconfirm: {
+    icon: false,
+    placement: 'top',
+    trigger: 'click',
+    okType: 'primary'
+  },
+  Progress: {
+    type: 'line',
+    // width: 88,
+    trailColor: '#E5E5E5',
+    percent: 0,
+    showInfo: true,
+    infoPosition: 'right',
+    trailWidth: 8,
+    strokeWidth: 4
+  },
+  Radio: {
+    checked: false,
+    defaultChecked: false,
+    disabled: false
+  },
+  RadioGroup: {},
+  Rate: {
+    allowHalf: true,
+    icon: function icon() {
+      return /*#__PURE__*/React.createElement(Icon, {
+        type: "star"
+      });
+    },
+    count: 5,
+    defaultValue: 0,
+    disabled: false,
+    size: 'middle'
+  },
+  RangePicker: {
+    order: true,
+    allowClear: true,
+    autoFocus: false,
+    allowEmpty: [false, false],
+    borderType: 'underline',
+    disabled: false,
+    inputReadOnly: false,
+    picker: 'date',
+    separator: '~',
+    popupStyle: {},
+    size: 'middle',
+    showArrow: true,
+    defaultOpen: false,
+    showWeeksTitle: true,
+    hourStep: 1,
+    minuteStep: 1,
+    secondStep: 1
+  },
+  Row: {
+    align: 'top',
+    gutter: 12,
+    justify: 'start',
+    wrap: true
+  },
+  Switch: {
+    size: 'small',
+    defaultChecked: false,
+    disabled: false,
+    loading: false
+  },
+  Steps: {
+    direction: 'horizontal',
+    initial: 0,
+    labelPlacement: 'bottom'
+  },
+  Space: {
+    direction: 'horizontal',
+    size: 'small',
+    align: 'center'
+  },
+  SplitPanel: {
+    defaultSplit: 0.5,
+    mode: 'horizontal',
+    min: 0,
+    max: 0,
+    canFold: true
+  },
+  Spin: {
+    type: 'page',
+    spinning: true
+  },
+  TextArea: {
+    size: 'middle',
+    defaultValue: '',
+    autoSize: true,
+    canResize: false,
+    borderType: 'underline',
+    disabled: false,
+    count: true,
+    maxLength: 255
+  },
+  Timeline: {
+    reverse: false,
+    mode: '',
+    labelWidth: 70,
+    lineHeight: 18
+  },
+  TimelineItem: {
+    color: 'blue',
+    pending: false,
+    position: ''
+  },
+  Tree: {
+    defaultExpandAll: false,
+    defaultExpandRoot: false,
+    checkable: false,
+    checkStrictly: false,
+    disabled: false,
+    draggable: false,
+    virtual: true,
+    switcherIcon: function switcherIcon() {
+      return /*#__PURE__*/React.createElement(Icon, {
+        type: "arrow-right-solid"
+      });
+    }
+  },
+  TreeNode: {},
+  ToolTip: {
+    placement: 'top',
+    trigger: 'hover'
+  },
+  Tabs: {
+    type: 'line',
+    size: 'middle'
+  },
+  TabPane: {},
+  Transfer: {
+    dataSource: [],
+    locale: {},
+    showSearch: false,
+    listStyle: {}
+  },
+  Tag: {
+    type: 'status',
+    closable: false,
+    clickable: false,
+    disabled: false,
+    size: 'middle'
+  },
+  Upload: {
+    multiple: false,
+    disabled: false,
+    directory: false,
+    method: 'post',
+    name: 'file',
+    type: 'select',
+    listType: 'text',
+    showUploadList: true,
+    withCredentials: false
+  },
+  ViewContainer: {},
+  Typography: {},
+  Search: {
+    size: 'middle',
+    borderType: 'underline',
+    type: 'basis',
+    disabled: false
+  },
+  Badge: {},
+  ImageCropper: {
+    containerWidth: 860,
+    containerHeight: 620,
+    dragMode: 'crop',
+    viewMode: 0,
+    aspectRatio: NaN,
+    okText: '确认裁剪'
+  },
+  Anchor: {
+    type: 'bookmarks',
+    affix: true,
+    trigger: 'hover',
+    placement: 'bottomRight'
+  },
+  Slider: {
+    default: 0,
+    disabled: false,
+    dots: false,
+    marks: [],
+    max: 100,
+    min: 0,
+    reverse: false,
+    step: 1,
+    tooltipPlacement: 'top',
+    vertical: false
+  },
+  Stepper: {
+    size: 'middle',
+    step: 1,
+    borderType: 'bordered',
+    minMark: '[',
+    maxMark: ']',
+    mustInScope: false
+  },
+  BaseData: {
+    mode: 'single',
+    optionLabelProp: 'label',
+    searchField: 'all',
+    size: 10
+  },
+  Avatar: {
+    size: 'middle',
+    shape: 'circle',
+    gap: 4
+  }
+};
+export default compDefaultProps;

package/es/config-provider/configProvider.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 对外暴露用于注入全局配置属性的Context.Provider
+ */
+import React, { FunctionComponentElement } from 'react';
+import { IConfigProps } from './ConfigContext';
+interface IConfigProviderProps {
+    value?: IConfigProps;
+    children?: React.ReactNode;
+}
+declare const ConfigProvider: (props: IConfigProviderProps) => FunctionComponentElement<IConfigProviderProps>;
+export default ConfigProvider;

package/es/config-provider/configProvider.js

@@ -0,0 +1,45 @@
+/**
+ * 对外暴露用于注入全局配置属性的Context.Provider
+ */
+import React, { useMemo } from 'react';
+import assign from 'lodash/assign';
+import ConfigContext from './ConfigContext';
+import defaultConfig from './defaultConfig';
+import localeCacher, { getLangMsg as getLang, getCompLangMsg as getCompLang } from '../locale/index';
+
+var ConfigProvider = function ConfigProvider(props) {
+  // 处理当前语言
+  var value = props.value;
+  var localeConfig = value && value.localeConfig;
+
+  if (localeConfig) {
+    localeCacher.setLocalesData(localeConfig.locale, localeConfig.localeData);
+  }
+
+  var locale = useMemo(function () {
+    return {
+      getLangMsg: function getLangMsg(componentName, labelName, params) {
+        if (localeConfig && localeConfig.customGetLangMsg) {
+          return localeConfig.customGetLangMsg(componentName, labelName, params);
+        }
+
+        return getLang(componentName, labelName, params);
+      },
+      getCompLangMsg: function getCompLangMsg(compLangMsgParams) {
+        return getCompLang(compLangMsgParams, localeConfig === null || localeConfig === void 0 ? void 0 : localeConfig.customGetLangMsg);
+      },
+      locale: localeCacher.getLocal()
+    };
+  }, [localeConfig]); // 处理组件默认属性
+
+  var providerValue = useMemo(function () {
+    return assign({}, defaultConfig, value, {
+      locale: locale
+    });
+  }, [locale, value]);
+  return /*#__PURE__*/React.createElement(ConfigContext.Provider, {
+    value: providerValue
+  }, props.children);
+};
+
+export default ConfigProvider;

package/es/config-provider/defaultConfig.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const defaultConfig: {
+    getPrefixCls: (configPrefixCls?: string | undefined, suffixCls?: string | undefined, customizePrefixCls?: string | undefined) => string;
+    prefixCls: string;
+    locale: {
+        getLangMsg: (componentName: string, labelName: string, params?: any) => string | import("react").ReactNode[];
+        getCompLangMsg: (compLangMsgParams: import("../locale").CompLangMsgParams, customGetLangMsg?: ((componentName: string, labelName: string, params: any) => any) | undefined, localeDate?: any) => any;
+    };
+};
+export default defaultConfig;

package/es/config-provider/defaultConfig.js

@@ -0,0 +1,19 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import { getLangMsg, getCompLangMsg } from '../locale';
+var defaultConfig = {
+  getPrefixCls: function getPrefixCls(configPrefixCls, suffixCls, customizePrefixCls) {
+    var _context;
+
+    // 获取样式前缀方法
+    if (customizePrefixCls) return customizePrefixCls;
+    configPrefixCls = configPrefixCls || 'kd';
+    var t = suffixCls ? _concatInstanceProperty(_context = "".concat(configPrefixCls, "-")).call(_context, suffixCls) : configPrefixCls;
+    return t;
+  },
+  prefixCls: 'kd',
+  locale: {
+    getLangMsg: getLangMsg,
+    getCompLangMsg: getCompLangMsg
+  }
+};
+export default defaultConfig;

package/es/config-provider/index.d.ts

@@ -0,0 +1,6 @@
+import ConfigProvider from './configProvider';
+import compDefaultProps from './compDefaultProps';
+import ConfigContext from './ConfigContext';
+import defaultConfig from './defaultConfig';
+export { compDefaultProps, ConfigContext, defaultConfig };
+export default ConfigProvider;

package/es/config-provider/index.js

@@ -0,0 +1,6 @@
+import ConfigProvider from './configProvider';
+import compDefaultProps from './compDefaultProps';
+import ConfigContext from './ConfigContext';
+import defaultConfig from './defaultConfig';
+export { compDefaultProps, ConfigContext, defaultConfig };
+export default ConfigProvider;

package/es/date-picker/calendar.d.ts

@@ -0,0 +1,12 @@
+import { DateType, PickerMode, SharedTimeProps } from './interface';
+import { RangeShowTimeObject } from './range-picker';
+export interface CalendarProps {
+    picker: PickerMode;
+    useWeekdaysShort?: boolean;
+    showWeekNumber?: boolean;
+    showWeeksTitle?: boolean;
+    showTime?: boolean | SharedTimeProps | RangeShowTimeObject;
+    disabledDate?: (date: DateType) => boolean;
+}
+declare function Calendar(props: CalendarProps): JSX.Element;
+export default Calendar;

package/es/date-picker/calendar.js

@@ -0,0 +1,108 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import Week from './panel/week/week';
+import Context from './context';
+import { getStartOfWeek, getStartOfMonth, addWeeks, addDays, getWeekdayShortInLocale, getWeekdayMinInLocale } from './utils/date-fns';
+var DATE_ROW_COUNT = 6;
+
+function Calendar(props) {
+  var context = useContext(Context);
+  var prefixCls = context.prefixCls,
+      viewDate = context.viewDate;
+  var picker = props.picker,
+      useWeekdaysShort = props.useWeekdaysShort,
+      showWeekNumber = props.showWeekNumber,
+      showWeeksTitle = props.showWeeksTitle,
+      showTime = props.showTime,
+      disabledDate = props.disabledDate; // const isWeekInMonth = (startOfWeek: DateType) => {
+  //   const endOfWeek = addDays(startOfWeek, 6)
+  //   return isSameMonth(startOfWeek, viewDate) || isSameMonth(endOfWeek, viewDate)
+  // }
+  // 获取title部分 周的格式
+
+  var formatWeekday = function formatWeekday(day) {
+    return useWeekdaysShort ? getWeekdayShortInLocale(day) : getWeekdayMinInLocale(day);
+  }; // const getEffectTime = () => {
+  // }
+
+
+  var renderWeeksTitle = function renderWeeksTitle() {
+    var _context;
+
+    var startOfWeek = getStartOfWeek(viewDate);
+    var dayNames = [];
+    var weekTitleCls = classnames("".concat(prefixCls, "-weektitle"));
+    var weekTitleItemCls = classnames("".concat(prefixCls, "-weektitle-item"));
+
+    if (showWeekNumber) {
+      var weekTitleNumberItemCls = classnames("".concat(prefixCls, "-weektitle-weeknumber"));
+      dayNames.push( /*#__PURE__*/React.createElement("div", {
+        key: "W",
+        className: weekTitleNumberItemCls
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: weekTitleCls
+    }, _concatInstanceProperty(dayNames).call(dayNames, _mapInstanceProperty(_context = [0, 1, 2, 3, 4, 5, 6]).call(_context, function (offset) {
+      var day = addDays(startOfWeek, offset);
+      var weekDayName = formatWeekday(day);
+      return /*#__PURE__*/React.createElement("div", {
+        key: offset,
+        className: weekTitleItemCls
+      }, weekDayName);
+    })));
+  };
+
+  var renderWeeks = function renderWeeks() {
+    var currentWeekStart = getStartOfWeek(getStartOfMonth(viewDate));
+    var weeks = [];
+    var i = 0;
+
+    while (true) {
+      weeks.push( /*#__PURE__*/React.createElement(Week, {
+        key: i,
+        day: currentWeekStart,
+        picker: picker,
+        showWeekNumber: showWeekNumber,
+        showTime: !!showTime,
+        disabledDate: disabledDate
+      }));
+      i++;
+      currentWeekStart = addWeeks(currentWeekStart, 1); // 最少保证面板包含有六周，保证左右面板及切换面板时周数一致
+
+      if (i >= DATE_ROW_COUNT) {
+        break;
+      } // const isNonFixedAndOutOfMonth = !isWeekInMonth(currentWeekStart)
+      // if (panelPosition) {
+      //   // range 模式时，最少保证面板包含有六周，保证左右面板周数一致
+      //   if (i >= DATE_ROW_COUNT) {
+      //     break
+      //   }
+      // } else {
+      //   if (isNonFixedAndOutOfMonth) {
+      //     break
+      //   }
+      // }
+
+    }
+
+    return weeks;
+  };
+
+  var calendarCls = classnames("".concat(prefixCls, "-calendar"));
+  var calendarWarpperCls = classnames("".concat(prefixCls, "-calendar-warpper")); // let _showWeeksTitle
+  // if (picker === 'date' || picker === 'week') {
+  //   _showWeeksTitle = showWeeksTitle
+  // }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: calendarCls
+  }, showWeeksTitle ? renderWeeksTitle() : null, /*#__PURE__*/React.createElement("div", {
+    className: calendarWarpperCls
+  }, renderWeeks()));
+}
+
+export default Calendar;

package/es/date-picker/context.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { DateType, InnerLocale, RangeValue, TimeUnit } from './interface';
+export declare type ContextOperationRefProps = {
+    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => boolean;
+    onClose?: () => void;
+};
+export interface SingleContextProps {
+    prefixCls: string;
+    viewDate: DateType;
+    locale: InnerLocale;
+    dateValue?: DateType | null;
+    rangeValue?: RangeValue;
+    hoverRangedValue?: RangeValue;
+    panelPosition?: string;
+    open?: boolean;
+    originHour?: number;
+    minute?: number;
+    second?: number;
+    hours?: TimeUnit[];
+    minutes?: TimeUnit[];
+    seconds?: TimeUnit[];
+    disabledTimePanel?: boolean;
+    setViewDate: (date: DateType, index?: 0 | 1) => void;
+    onSelect: (date: DateType, type: 'key' | 'mouse' | 'submit') => void;
+    onDateMouseEnter: (date: DateType) => void;
+    onDateMouseLeave: (arg?: boolean) => void;
+}
+declare const Context: React.Context<SingleContextProps>;
+export default Context;

package/es/date-picker/context.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+var Context = /*#__PURE__*/React.createContext({});
+export default Context;