x-ui-design 1.0.31-gamma.1 → 1.0.33

package/lib/types/datepicker.ts

@@ -0,0 +1,165 @@
+import { FocusEvent, ReactNode } from 'react';
+import { DefaultProps, Placement, RuleType, SizeType } from '.';
+
+export interface BaseInfo {
+  range?: 'start' | 'end';
+  source?: string;
+}
+
+export type CustomFormat<RuleType> = (value: RuleType) => string;
+export type FormatType<DateType = RuleType> = string | CustomFormat<DateType>;
+export type PanelMode =
+  | 'time'
+  | 'date'
+  | 'week'
+  | 'month'
+  | 'quarter'
+  | 'year'
+  | 'decade';
+
+export type TDatePickerProps = DefaultProps & {
+  value?: Date;
+  disabled?: boolean;
+  placeholder?: string;
+  error?: boolean;
+  feedbackIcons?: boolean;
+  locale?: Locale;
+  placement?: Placement;
+  defaultOpen?: boolean;
+  allowClear?:
+    | boolean
+    | {
+        clearIcon?: ReactNode;
+      };
+  defaultValue?: Date;
+  disabledDate?: (
+    date: RuleType,
+    info: {
+      to: RuleType;
+      from?: RuleType;
+    }
+  ) => boolean;
+  suffixIcon?: ReactNode;
+  prefix?: ReactNode;
+  size?: SizeType;
+  format?:
+    | FormatType<RuleType>
+    | FormatType<RuleType>[]
+    | {
+        format: string;
+        type?: 'mask';
+      };
+  onChange?: (
+    date: RuleType | RuleType[],
+    dateString: string | string[]
+  ) => void;
+  onCalendarChange?: (
+    date: RuleType | RuleType[],
+    dateString: string | string[],
+    info: BaseInfo
+  ) => void;
+  onVisibleChange?: ((open: boolean) => void) | undefined;
+  getPopupContainer?: (node: HTMLElement) => HTMLElement;
+  showToday?: boolean;
+  inputReadOnly?: boolean;
+  picker?: PanelMode;
+  bordered?: boolean;
+  defaultPickerValue?: Date;
+};
+
+export type TRangePickerProps = Omit<
+  TDatePickerProps,
+  'placeholder' | 'value' | 'defaultValue'
+> & {
+  placeholder?: string[];
+  value?: Date[];
+  defaultValue?: Date[];
+  separator?: ReactNode;
+};
+
+export type Locale = {
+  locale: string;
+  dateFormat?: string;
+  dateTimeFormat?: string;
+  fieldDateTimeFormat?: string;
+  fieldDateFormat?: string;
+  fieldTimeFormat?: string;
+  fieldMonthFormat?: string;
+  fieldYearFormat?: string;
+  fieldWeekFormat?: string;
+  fieldQuarterFormat?: string;
+  monthBeforeYear?: boolean;
+  yearFormat?: string;
+  monthFormat?: string;
+  cellYearFormat?: string;
+  cellQuarterFormat?: string;
+  dayFormat?: string;
+  cellDateFormat?: string;
+  cellMeridiemFormat?: string;
+  today: string;
+  now: string;
+  backToToday: string;
+  ok: string;
+  timeSelect: string;
+  dateSelect: string;
+  weekSelect?: string;
+  clear: string;
+  week: string;
+  month: string;
+  year: string;
+  previousMonth: string;
+  nextMonth: string;
+  monthSelect: string;
+  yearSelect: string;
+  decadeSelect: string;
+  previousYear: string;
+  nextYear: string;
+  previousDecade: string;
+  nextDecade: string;
+  previousCentury: string;
+  nextCentury: string;
+  shortWeekDays?: string[];
+  shortMonths?: string[];
+};
+
+export interface DisabledTimes {
+  disabledHours?: () => number[];
+  disabledMinutes?: (hour: number) => number[];
+  disabledSeconds?: (hour: number, minute: number) => number[];
+}
+
+export type PickerFocusEventHandler = (
+  e: FocusEvent<HTMLElement>,
+  info: BaseInfo
+) => void;
+
+export type DisabledDate<DateType = RuleType> = (
+  date: DateType,
+  info: {
+    type: PanelMode;
+    from?: DateType;
+  }
+) => boolean;
+
+export type TimePickerProps = DefaultProps & {
+  disabledTime?: (date: RuleType) => DisabledTimes;
+  inputReadOnly?: boolean;
+  format?:
+    | FormatType<RuleType>
+    | FormatType<RuleType>[]
+    | {
+        format: string;
+        type?: 'mask';
+      };
+  defaultValue?: RuleType | null;
+  value?: RuleType | null;
+  onChange?: (date: RuleType, dateString: string | string[]) => void;
+  onBlur?: PickerFocusEventHandler;
+  onSelect?: ((value: Date | null) => void) | undefined;
+  showNow?: boolean;
+  clearIcon?: ReactNode;
+  getPopupContainer?: (node: HTMLElement) => HTMLElement;
+  suffixIcon?: ReactNode;
+  placeholder?: string;
+  placement?: Placement;
+};

package/lib/types/dropdown.ts

@@ -0,0 +1,41 @@
+import { CSSProperties, MouseEvent, ReactElement, ReactNode, RefObject } from "react";
+import { DefaultProps, Placement } from ".";
+
+export type TriggerType = 'click' | 'hover' | 'contextMenu' | Array<TriggerType>;
+
+export interface DropdownItemType {
+    key: string;
+    label?: ReactNode;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    danger?: boolean;
+}
+
+declare type OverlayFunc = () => ReactElement;
+
+export type DropdownProps = DefaultProps & {
+    children: ReactNode;
+    menu?: { items: DropdownItemType[] };
+    open?: boolean;
+    defaultOpen?: boolean;
+    onVisibleChange?: ((open: boolean) => void) | undefined;
+    trigger?: TriggerType;
+    placement?: Placement;
+    overlayClassName?: string;
+    overlayStyle?: CSSProperties;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    destroyOnHidden?: boolean;
+    disabled?: boolean;
+    arrow?: boolean;
+    autoFocus?: boolean;
+    autoAdjustOverflow?: boolean;
+    popupRender?: (node: ReactNode) => ReactNode;
+    overlay?: ReactElement | OverlayFunc;
+}
+
+
+export type DropdownMenuInnerProps = DefaultProps & {
+    items: DropdownItemType[];
+    menuRef: RefObject<HTMLUListElement | null>;
+    onClose: () => void;
+}

package/lib/types/empty.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { DefaultProps } from '.';
+
+export type EmptyContentProps = DefaultProps & {
+  title?: string;
+  description?: string;
+  icon?: ReactNode;
+};

package/lib/types/form.ts

@@ -0,0 +1,179 @@
+import { ComponentClass, FC, FormEvent, ReactElement, ReactNode } from 'react';
+import {
+  DefaultProps,
+  RuleType,
+  RuleTypes,
+  SizeType,
+  SyntheticBaseEvent
+} from '.';
+import { OptionProps } from './select';
+
+export type RuleRender = (form: FormInstance) => RuleObject;
+
+export type RuleObject =
+  | RuleRender
+  | {
+    required?: boolean;
+    message?: string;
+    pattern?: RegExp;
+    min?: number;
+    max?: number;
+    validateBooleanFalse?: boolean;
+    warningPattern?: RegExp;
+    warningMessage?: string;
+    validator?: (
+      rule: RuleObject,
+      value: RuleTypes,
+      callback: (error?: string) => void
+    ) => Promise<void> | void;
+  };
+
+export interface FieldData {
+  name: string | string[];
+  value?: RuleTypes;
+  errors?: string[];
+}
+
+export type FieldInstancesInputRef = HTMLInputElement | null;
+export type FieldInstancesRef = {
+  input?: FieldInstancesInputRef;
+};
+
+export interface FieldError {
+  name: string;
+  errors: string[];
+}
+
+export type FormLayoutTypes = 'horizontal' | 'vertical' | 'inline';
+
+export type FormProps = DefaultProps & {
+  colon?: boolean;
+  name?: string;
+  layout?: FormLayoutTypes;
+  form?: FormInstance;
+  size?: SizeType;
+  initialValues?: Record<string, RuleTypes>;
+  children?: ReactNode;
+  component?: false | string | FC<ReactNode> | ComponentClass<ReactNode>;
+  fields?: FieldData[];
+  onChange?: (e: FormEvent<HTMLFormElement>) => void;
+  onFieldsChange?: (changedFields: FieldData[]) => void;
+  onSubmitCapture?: (changedFields: FieldData[]) => void;
+  onValuesChange?: (
+    changedValues: Record<string, RuleTypes>,
+    allValues: Record<string, RuleTypes>
+  ) => void;
+  onFinish?: (values: Record<string, RuleTypes>) => void;
+  onFinishFailed?: (errorInfo: {
+    values: Record<string, RuleTypes>;
+    errorFields: Pick<FieldError, 'errors' | 'name'>[];
+  }) => void;
+  scrollToFirstError?: boolean;
+};
+
+export type FormItemProps = DefaultProps & {
+  name: string;
+  label?: string | ReactNode;
+  rules?: RuleObject[];
+  initialValue?: RuleType;
+  children:
+  | (ReactElement & { props: { value: RuleTypes } })
+  | (ReactElement & { props: { value: RuleTypes } })[];
+  layout?: FormLayoutTypes;
+  dependencies?: string[];
+  normalize?: (
+    value: RuleType,
+    prevValue: RuleType,
+    allValues: RuleType
+  ) => RuleType;
+  feedbackIcons?: boolean;
+  extra?: ReactNode;
+  hideLabel?: boolean;
+  removeErrorMessageHeight?: boolean;
+};
+
+export interface FormItemChildComponentProps {
+  child: ReactElement;
+  name: string;
+  error: boolean;
+  fieldValue: RuleTypes;
+  value: RuleType;
+  setFieldValue: (
+    name: string,
+    value: RuleType,
+    errors?: string[],
+    reset?: boolean | null | undefined,
+    touch?: boolean) => void;
+  onChange?: (e: SyntheticBaseEvent, option?: OptionProps) => void;
+  size?: SizeType;
+  normalize?: (
+    value: RuleType,
+    prevValue: RuleType,
+    allValues: RuleType
+  ) => RuleType;
+  noStyle?: boolean;
+  feedbackIcons?: boolean;
+  ref?: FieldInstancesRef | null
+}
+
+export interface FormInstance {
+  submit: () => Promise<Record<string, RuleTypes> | undefined>;
+  setFields: (fields: FieldData[]) => void;
+  resetFields: (nameList?: string[], showError?: boolean | null) => void;
+  getFieldError: (name: string) => string[];
+  registerField: (name: string, rules?: RuleObject[], remove?: boolean) => void;
+  setFieldValue: (name: string, value: RuleTypes, errors?: string[],
+    reset?: boolean | null | undefined,
+    touch?: boolean) => void;
+  getFieldValue: (name: string) => RuleTypes;
+  validateFields: (nameList?: string[]) => Promise<boolean>;
+  setFieldsValue: (
+    values: Partial<Record<string, RuleTypes>>,
+    reset?: boolean | null | undefined
+  ) => void;
+  getFieldsValue: (nameList?: string[]) => Record<string, RuleTypes>;
+  isFieldTouched: (name: string) => boolean;
+  getFieldsError: () => Pick<FieldError, 'errors' | 'name'>[];
+  isFieldsTouched: (nameList?: string[], allFieldsTouched?: boolean) => boolean;
+  getFieldWarning: (name: string) => string[];
+  subscribeToField: (
+    name: string,
+    callback: (value: RuleTypes) => void
+  ) => () => void;
+  subscribeToForm: (
+    callback: (values: Record<string, RuleTypes>) => void
+  ) => () => void;
+  subscribeToFields: (
+    names: string[],
+    callback: (values: Record<string, RuleTypes>) => void
+  ) => () => void;
+  subscribeToError?: (name: string, callback: (errors?: string[]) => void) => void;
+  isFieldValidating: (name: string) => boolean;
+  onFieldsChange?: (changedFields: FieldData[]) => void;
+  onValuesChange?: (
+    changedValues: Record<string, RuleTypes>,
+    allValues: Record<string, RuleTypes>
+  ) => void;
+  getFieldInstance: (fieldName?: string) => FieldInstancesRef | null;
+  setFieldInstance: (fieldName: string, fieldRef: FieldInstancesRef | null) => void; 
+  setScrollToFirstError: (value: boolean) => void;
+  scrollToFirstError?: boolean;
+  isReseting: boolean;
+  setOnFieldsChange?: (
+    onFieldsChange?: (changedFields: FieldData[]) => void
+  ) => void;
+  setOnFinish?: (onFinish?: ((values: Record<string, RuleTypes>) => void) | undefined) => void,
+  setOnValuesChange?: (
+    onValuesChange?: (
+      changedValues: Record<string, RuleTypes>,
+      allValues: Record<string, RuleTypes>
+    ) => void
+  ) => void;
+  setOnFinishFailed?: (
+    onFinishFailed?: (errorInfo: {
+      values: Record<string, RuleTypes>;
+      errorFields: Pick<FieldError, 'errors' | 'name'>[];
+    }) => void
+  ) => void;
+  changeStep: (step: number) => void;
+}

package/lib/types/index.ts

@@ -0,0 +1,38 @@
+import { CSSProperties, MouseEvent } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type RuleType = any;
+export type RuleTypes = RuleType | RuleType[];
+export type SizeType = 'small' | 'middle' | 'large';
+export type MouseEventHandlerSelect = MouseEvent<HTMLDivElement> & TargetProps;
+export interface DefaultProps {
+  prefixCls?: string;
+  prefixClsV3?: string;
+  className?: string;
+  style?: CSSProperties;
+  noStyle?: boolean;
+}
+
+export type TargetProps = {
+  target: {
+    value: RuleType;
+  };
+};
+
+export type SyntheticBaseEvent = {
+  target: EventTarget & {
+    value: RuleType;
+  };
+  nativeEvent?: Event & { data?: string | null };
+  currentTarget: EventTarget;
+};
+
+export type Placement =
+  | 'bottomLeft'
+  | 'bottom'
+  | 'bottomRight'
+  | 'topLeft'
+  | 'top'
+  | 'topRight'
+  | 'left'
+  | 'right';

package/lib/types/input.ts

@@ -0,0 +1,72 @@
+import {
+    CSSProperties,
+    ForwardedRef,
+    InputHTMLAttributes,
+    KeyboardEvent,
+    KeyboardEventHandler,
+    MouseEventHandler,
+    ReactElement,
+    ReactNode,
+    TextareaHTMLAttributes
+} from 'react';
+import { DefaultProps, SizeType, SyntheticBaseEvent } from '.';
+
+export type InputProps = Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    'size' | 'prefix'
+> &
+    DefaultProps & {
+        addonBefore?: ReactNode;
+        addonAfter?: ReactNode;
+        size?: SizeType;
+        prefix?: ReactNode;
+        suffix?: ReactNode;
+        disabled?: boolean;
+        allowClear?: boolean;
+        error?: boolean;
+        bordered?: boolean;
+        iconRender?: (visible: boolean) => ReactElement;
+        onChange?: (event: SyntheticBaseEvent) => void;
+        onClick?: MouseEventHandler<HTMLElement>;
+        onMouseEnter?: MouseEventHandler<HTMLElement>;
+        onMouseLeave?: MouseEventHandler<HTMLElement>;
+        onKeyPress?: KeyboardEventHandler<HTMLElement>;
+        onKeyDown?: KeyboardEventHandler<HTMLElement>;
+        onPressEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
+        feedbackIcons?: boolean;
+        child?: ReactNode;
+        mask?: string;
+        maskChar?: string;
+        maskRegex?: RegExp;
+        ref?: ForwardedRef<HTMLInputElement>,
+    };
+
+export type TextareaProps = Omit<
+    TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'onResize'
+> &
+    DefaultProps & {
+        value?: string;
+        className?: string;
+        style?: CSSProperties;
+        autoSize?:
+        | boolean
+        | {
+            minRows?: number;
+            maxRows?: number;
+        };
+        onPressEnter?: KeyboardEventHandler<HTMLTextAreaElement>;
+        onResize?: (size: { width: number; height: number }) => void;
+        styles?: {
+            textarea?: CSSProperties;
+            count?: CSSProperties;
+        };
+        bordered?: boolean;
+        size?: SizeType;
+        status?: 'success' | 'error';
+        rootClassName?: string;
+        variant?: 'outlined' | 'borderless' | 'filled' | 'underlined';
+        error?: boolean;
+        allowClear?: boolean;
+        ref?: ForwardedRef<HTMLTextAreaElement>
+    };

package/lib/types/menu.ts

@@ -0,0 +1,55 @@
+import { CSSProperties, MouseEvent, ReactNode } from "react";
+import { DefaultProps } from ".";
+
+export type MenuMode = "vertical" | "horizontal" | "inline";
+
+export type ItemType = DefaultProps & {
+  danger?: boolean;
+  disabled?: boolean;
+  extra?: ReactNode;
+  icon?: ReactNode;
+  key: string;
+  label?: ReactNode;
+  title?: ReactNode;
+  children?: ItemType[];
+  type?: string;
+  selected?: boolean;
+  itemKey?: string;
+  onClick?: (info: { key: string; keyPath: string[]; domEvent?: MouseEvent }) => void;
+};
+
+export type SubMenuItem = DefaultProps & {
+  key: string;
+  title?: ReactNode;
+  icon?: ReactNode;
+  children?: ReactNode;
+  itemKey: string;
+  level: "1" | "2"
+}
+
+export interface MenuProps {
+  prefixCls?: string;
+  className?: string;
+  style?: CSSProperties;
+  defaultOpenKeys?: string[];
+  defaultSelectedKeys?: string[];
+  expandIcon?: ReactNode;
+  forceSubMenuRender?: boolean;
+  inlineCollapsed?: boolean;
+  inlineIndent?: number;
+  items?: ItemType[];
+  mode?: MenuMode;
+  multiple?: boolean;
+  openKeys?: string[];
+  overflowedIndicator?: ReactNode;
+  selectable?: boolean;
+  selectedKeys?: string[];
+  subMenuCloseDelay?: number;
+  subMenuOpenDelay?: number;
+  triggerSubMenuAction?: "hover" | "click";
+  onClick?: (info: { key: string; keyPath: string[]; domEvent?: MouseEvent }) => void;
+  onDeselect?: (info: { key: string; keyPath: string[] }) => void;
+  onOpenChange?: (openKeys: string[]) => void;
+  onSelect?: (info: { key: string; keyPath: string[]; selectedKeys: string[] }) => void;
+  children?: ReactNode;
+}

package/lib/types/popover.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from "react";
+import { DefaultProps } from ".";
+
+export type PopoverProps = DefaultProps & {
+    content: ReactNode;
+    children: ReactNode;
+    trigger?: "click" | "hover";
+    placement?: "top" | "bottom" | "left" | "right" | "topRight" | "bottomRight" | "topLeft" | "bottomLeft";
+    open?: boolean;
+    overlayStyle?: CSSProperties;
+    overlayClassName?: string;
+    title?: string | ReactNode;
+    visible?: boolean;
+    onVisibleChange?: ((open: boolean) => void) | undefined;
+    getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined
+}

package/lib/types/radio.ts

@@ -0,0 +1,69 @@
+import {
+  CSSProperties,
+  FocusEventHandler,
+  ForwardedRef,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactNode
+} from 'react';
+import { DefaultProps, RuleType, SizeType, SyntheticBaseEvent } from '.';
+
+export type RadioValueType = string | number | readonly string[] | undefined;
+
+export interface RadioGroupProps {
+  defaultValue?: RuleType;
+  value?: RuleType;
+  onChange?: (e: SyntheticBaseEvent) => void;
+  size?: SizeType;
+  disabled?: boolean;
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+  name?: string;
+  children?: ReactNode;
+  id?: string;
+  optionType?: 'default' | 'button';
+  buttonStyle?: 'outline' | 'solid';
+  onFocus?: FocusEventHandler<HTMLDivElement>;
+  onBlur?: FocusEventHandler<HTMLDivElement>;
+  block?: boolean;
+  prefixCls?: string;
+  prefixClsV3?: string;
+  className?: string;
+  options?:
+    | Array<{ label: ReactNode; value: RuleType; disabled?: boolean }>
+    | string[]
+    | number[];
+  style?: CSSProperties;
+}
+
+export type RadioProps = DefaultProps & {
+  defaultChecked?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  title?: string;
+  onChange?: (e: SyntheticBaseEvent) => void;
+  onClick?: MouseEventHandler<HTMLElement>;
+  onMouseEnter?: MouseEventHandler<HTMLElement>;
+  onMouseLeave?: MouseEventHandler<HTMLElement>;
+  onKeyPress?: KeyboardEventHandler<HTMLElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  value?: RuleType;
+  tabIndex?: number;
+  name?: string;
+  children?: ReactNode;
+  id?: string;
+  autoFocus?: boolean;
+  type?: string;
+  skipGroup?: boolean;
+  required?: boolean;
+  button?: boolean;
+  error?: boolean;
+  ref?: ForwardedRef<HTMLLabelElement>
+};
+
+export type RadioButtonProps = RadioProps & {
+  children?: ReactNode;
+  size?: SizeType;
+}

package/lib/types/result.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, ReactNode } from "react";
+
+export type ResultStatusType =
+    | "success"
+    | "error"
+    | "info"
+    | "warning"
+    | "403"
+    | "404"
+    | "500";
+
+export interface ResultProps {
+    icon?: ReactNode;
+    status?: ResultStatusType;
+    title?: ReactNode;
+    subTitle?: ReactNode;
+    extra?: ReactNode;
+    prefixCls?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}