@fibery/ui-kit 3.0.0 → 4.1.0

package/src/antd/ant-upload.tsx

@@ -1,21 +1,56 @@
 import {css, cx} from "@linaria/core";
-import type {UploadProps} from "antd/lib/upload";
-import Upload from "antd/lib/upload";
-import type {UploadFile} from "antd/lib/upload/interface";
-import type {ComponentPropsWithoutRef, FunctionComponent, PropsWithChildren} from "react";
-import "antd/lib/upload/style/css";
-import {forwardRef} from "react";
-
-import {border, space, themeVars, transition} from "../design-system";
-import {wrapWith} from "./utils";
-
-function getWrapper(wrapperClassName: string) {
-  return forwardRef<HTMLDivElement, ComponentPropsWithoutRef<"div">>(function UploadWrapper(
-    {className, ...props},
-    ref: React.ForwardedRef<HTMLDivElement>
-  ) {
-    return <div className={cx(className, wrapperClassName)} ref={ref} {...props} />;
-  });
+import RcUpload from "rc-upload";
+import type {RcFile, UploadProps as RcUploadProps, UploadRequestOption} from "rc-upload/lib/interface";
+import type {ComponentPropsWithoutRef} from "react";
+import {forwardRef, useCallback, useRef, useState} from "react";
+
+import {border, space, textStyles, themeVars, transitions} from "../design-system";
+
+export type UploadFileStatus = "error" | "success" | "done" | "uploading" | "removed";
+
+export interface UploadFile<T = unknown> {
+  uid: string;
+  size?: number;
+  name: string;
+  lastModified?: number;
+  lastModifiedDate?: Date;
+  url?: string;
+  status?: UploadFileStatus;
+  percent?: number;
+  thumbUrl?: string;
+  originFileObj?: RcFile;
+  response?: T;
+  error?: unknown;
+  type?: string;
+  xhr?: T;
+}
+
+export interface UploadChangeParam<T = UploadFile> {
+  file: T;
+  fileList: T[];
+  event?: {percent: number};
+}
+
+function file2Obj(file: RcFile): UploadFile {
+  return {
+    uid: file.uid,
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    lastModified: file.lastModified,
+    percent: 0,
+    originFileObj: file,
+  };
+}
+
+function upsertFile(file: UploadFile, list: UploadFile[]): UploadFile[] {
+  const index = list.findIndex((f) => f.uid === file.uid);
+  if (index === -1) {
+    return [...list, file];
+  }
+  const next = list.slice();
+  next[index] = file;
+  return next;
 }
 
 export const antUploadStyle = css`
@@ -29,12 +64,50 @@ export const antUploadStyle = css`
       alignItems: "stretch",
       alignContent: "stretch",
     },
-    "& .ant-upload:where(.ant-upload-drag), .ant-upload:where(.ant-upload-select-picture-card)": {
+    "& .ant-upload": {
+      boxSizing: "border-box",
+      margin: 0,
+      padding: 0,
+      ...textStyles.regular,
+      color: themeVars.textColor,
+      listStyle: "none",
+      outline: "none",
+    },
+    "& .ant-upload p": {
+      margin: 0,
+    },
+    "& .ant-upload-btn": {
+      display: "block",
+      width: "100%",
+      outline: "none",
+    },
+    "& .ant-upload input[type='file']": {
+      cursor: "pointer",
+    },
+    "& .ant-upload.ant-upload-disabled": {
+      color: themeVars.disabledTextColor,
+      cursor: "not-allowed",
+    },
+    "& .ant-upload.ant-upload-disabled input[type='file']": {
+      cursor: "not-allowed",
+    },
+    "& .ant-upload-select": {
+      display: "inline-flex",
+      alignItems: "stretch",
+      maxWidth: "100%",
+    },
+    "& .ant-upload-select > .ant-upload": {
+      display: "inline-flex",
+      alignItems: "center",
+      outline: "none",
+    },
+    "& .ant-upload:where(.ant-upload-drag), & .ant-upload:where(.ant-upload-select-picture-card)": {
       border: `1px dashed ${themeVars.colorAccentBgStrong}`,
       position: "relative",
       backgroundColor: themeVars.transparent,
       borderRadius: border.radius6,
-      transition: `border-color ${transition}`,
+      transition: `border-color ${transitions.faster}`,
+      cursor: "pointer",
       margin: 0,
       flex: 1,
       alignSelf: "stretch",
@@ -57,19 +130,204 @@ export const antUploadStyle = css`
         alignContent: "stretch",
         padding: space.s8,
       },
-      "&.ant-upload-drag-hover": {
-        border: `1px dashed ${themeVars.colorAccent}`,
+      "&.ant-upload-drag-hover:not(.ant-upload-disabled)": {
+        border: `1px dashed ${themeVars.colorAccentStrokeFocus}`,
         transition: "none",
       },
-      "&:hover": {
-        border: `1px dashed ${themeVars.colorAccent}`,
+      "&:not(.ant-upload-disabled):hover": {
+        border: `1px dashed ${themeVars.colorAccentStrokeHover}`,
         transition: "none",
       },
     },
+    "& .ant-upload.ant-upload-drag .ant-upload-btn": {
+      display: "table",
+      height: "100%",
+    },
+    "& .ant-upload.ant-upload-drag .ant-upload-drag-container": {
+      display: "table-cell",
+      verticalAlign: "middle",
+    },
+    "& .ant-upload-picture-card-wrapper": {
+      display: "inline-block",
+      width: "100%",
+    },
+    "& .ant-upload-picture-card-wrapper::before": {
+      display: "table",
+      content: "''",
+    },
+    "& .ant-upload-picture-card-wrapper::after": {
+      display: "table",
+      clear: "both",
+      content: "''",
+    },
   }}
 `;
 
-export const AntUpload = wrapWith(getWrapper(antUploadStyle), Upload) as FunctionComponent<
-  PropsWithChildren<UploadProps>
->;
-export type {UploadFile};
+export type AntUploadProps = Omit<
+  RcUploadProps,
+  "prefixCls" | "onStart" | "onSuccess" | "onError" | "onProgress" | "type" | "onChange" | "children"
+> & {
+  type?: "select" | "drag";
+  listType?: "text" | "picture" | "picture-card";
+  disabled?: boolean;
+  className?: string;
+  wrapClassName?: string;
+  children?: React.ReactNode;
+  onChange?: (info: UploadChangeParam) => void;
+};
+
+function Wrapper({className, ...props}: ComponentPropsWithoutRef<"div">) {
+  return <div className={cx(className, antUploadStyle)} {...props} />;
+}
+
+export const AntUpload = forwardRef<HTMLSpanElement, AntUploadProps>(function AntUpload(
+  {type = "select", listType = "text", disabled, className, wrapClassName, children, onChange, ...rcProps},
+  ref
+) {
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const fileListRef = useRef(fileList);
+  fileListRef.current = fileList;
+  const [dragState, setDragState] = useState<"drop" | "dragover" | "dragleave">("drop");
+
+  const emit = useCallback(
+    (file: UploadFile, nextList: UploadFile[], event?: {percent: number}) => {
+      fileListRef.current = nextList;
+      setFileList(nextList);
+      onChange?.({file, fileList: nextList, event});
+    },
+    [onChange]
+  );
+
+  const handleStart = useCallback(
+    (file: RcFile) => {
+      const obj = file2Obj(file);
+      obj.status = "uploading";
+      emit(obj, upsertFile(obj, fileListRef.current));
+    },
+    [emit]
+  );
+
+  const handleProgress = useCallback(
+    (event: {percent?: number}, file: RcFile) => {
+      const current = fileListRef.current.find((f) => f.uid === file.uid);
+      if (!current) {
+        return;
+      }
+      const next = {...current, status: "uploading" as UploadFileStatus, percent: event.percent};
+      emit(next, upsertFile(next, fileListRef.current), {percent: event.percent ?? 0});
+    },
+    [emit]
+  );
+
+  const handleSuccess = useCallback(
+    (response: unknown, file: RcFile, xhr?: XMLHttpRequest) => {
+      const current = fileListRef.current.find((f) => f.uid === file.uid);
+      if (!current) {
+        return;
+      }
+      let parsed = response;
+      if (typeof response === "string") {
+        try {
+          parsed = JSON.parse(response);
+        } catch {
+          /* ignore */
+        }
+      }
+      const next: UploadFile = {
+        ...current,
+        status: "done",
+        percent: 100,
+        response: parsed,
+        xhr,
+      };
+      emit(next, upsertFile(next, fileListRef.current));
+    },
+    [emit]
+  );
+
+  const handleError = useCallback(
+    (error: Error, response: unknown, file: RcFile) => {
+      const current = fileListRef.current.find((f) => f.uid === file.uid);
+      if (!current) {
+        return;
+      }
+      const next: UploadFile = {
+        ...current,
+        status: "error",
+        error,
+        response,
+      };
+      emit(next, upsertFile(next, fileListRef.current));
+    },
+    [emit]
+  );
+
+  const onFileDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    setDragState(e.type as typeof dragState);
+  }, []);
+
+  const rcUploadProps: RcUploadProps = {
+    ...rcProps,
+    prefixCls: "ant-upload",
+    disabled,
+    onStart: handleStart,
+    onProgress: handleProgress,
+    onSuccess: handleSuccess,
+    onError: handleError,
+  };
+
+  if (type === "drag") {
+    const hasUploading = fileList.some((f) => f.status === "uploading");
+    const dragCls = cx(
+      "ant-upload",
+      "ant-upload-drag",
+      hasUploading && "ant-upload-drag-uploading",
+      dragState === "dragover" && "ant-upload-drag-hover",
+      disabled && "ant-upload-disabled",
+      className
+    );
+    return (
+      <Wrapper className={wrapClassName}>
+        <span ref={ref}>
+          <div className={dragCls} onDrop={onFileDrop} onDragOver={onFileDrop} onDragLeave={onFileDrop}>
+            <RcUpload {...rcUploadProps} className="ant-upload-btn">
+              <div className="ant-upload-drag-container">{children}</div>
+            </RcUpload>
+          </div>
+        </span>
+      </Wrapper>
+    );
+  }
+
+  const buttonCls = cx(
+    "ant-upload",
+    "ant-upload-select",
+    `ant-upload-select-${listType}`,
+    disabled && "ant-upload-disabled"
+  );
+  const button = (
+    <div className={buttonCls}>
+      <RcUpload {...rcUploadProps}>{children}</RcUpload>
+    </div>
+  );
+
+  if (listType === "picture-card") {
+    return (
+      <Wrapper className={wrapClassName}>
+        <span ref={ref} className={cx("ant-upload-picture-card-wrapper", className)}>
+          {button}
+        </span>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper className={wrapClassName}>
+      <span ref={ref} className={className}>
+        {button}
+      </span>
+    </Wrapper>
+  );
+});
+
+export type {UploadRequestOption};

package/src/antd/auto-complete.tsx

@@ -0,0 +1,145 @@
+import {css, cx} from "@linaria/core";
+import Select from "rc-select";
+import type {BaseSelectRef, SelectProps} from "rc-select";
+import type {DefaultOptionType} from "rc-select/lib/Select";
+import type {ReactElement} from "react";
+import {forwardRef, useCallback} from "react";
+
+import {border, layout, space, textStyles, themeVars, transitions} from "../design-system";
+import {ThemeProvider} from "../theme-provider";
+import {getWrapper} from "./get-wrapper";
+import {wrapWithPopupContainer} from "./utils";
+
+const autoCompleteStyles = css`
+  ${{
+    position: "relative",
+    "& .ant-select": {
+      ...textStyles.regular,
+      boxSizing: "border-box",
+      display: "inline-block",
+      width: "100%",
+      cursor: "text",
+    },
+    "& .ant-select-selector": {
+      boxSizing: "border-box",
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      minHeight: layout.inputHeight,
+      position: "relative",
+      backgroundColor: themeVars.transparent,
+    },
+    "& .ant-select-selection-search": {
+      flex: 1,
+      minWidth: 0,
+    },
+    "& .ant-select-selection-search-input, & .ant-select-selection-search .ant-input": {
+      width: "100%",
+      margin: 0,
+      // horizontal padding to match other Fibery inputs (was 0 → text sat flush against selector edge,
+      // a regression vs master where antd input CSS gave it 4px 11px)
+      padding: `0 ${space.s12}px`,
+      border: "none",
+      outline: "none",
+      backgroundColor: themeVars.transparent,
+      appearance: "none",
+      ...textStyles.regular,
+    },
+    "& .ant-select-dropdown": {
+      boxSizing: "border-box",
+      position: "absolute",
+      zIndex: 1050,
+      backgroundColor: themeVars.colorBgPopup,
+      boxShadow: themeVars.shadowSelectMenu,
+      borderRadius: border.radius6,
+      paddingTop: space.s8,
+      paddingBottom: space.s8,
+    },
+    "& .ant-select-dropdown-hidden": {
+      display: "none",
+    },
+    "& .ant-select-item-empty": {
+      minHeight: 32,
+      padding: "5px 12px",
+      lineHeight: "22px",
+      color: themeVars.colorTextListItemGeneralDisabled,
+    },
+    "& .ant-select-item": {
+      ...textStyles.regular,
+      color: themeVars.textColor,
+      minHeight: 32,
+      padding: "5px 12px",
+      lineHeight: "22px",
+      backgroundColor: themeVars.colorBgListItemGeneral,
+      borderRadius: border.radius6,
+      cursor: "pointer",
+      transition: `background-color ${transitions.slow}`,
+    },
+    "& .ant-select-item-option-content": {
+      flex: 1,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+    },
+    "& .ant-select-item-option-state": {
+      display: "none",
+    },
+    "& .ant-select-item-option": {
+      display: "flex",
+      alignItems: "center",
+      "&:hover": {
+        backgroundColor: themeVars.colorBgListItemGeneralHover,
+      },
+      "&.ant-select-item-option-active:not(.ant-select-item-option-disabled)": {
+        backgroundColor: themeVars.colorBgListItemGeneralFocus,
+      },
+      "&.ant-select-item-option-selected:not(.ant-select-item-option-disabled)": {
+        fontWeight: "normal",
+        backgroundColor: themeVars.colorBgListItemGeneralSelected,
+        "&:hover": {
+          backgroundColor: themeVars.colorBgListItemGeneralSelectedHover,
+        },
+        "&.ant-select-item-option-active": {
+          backgroundColor: themeVars.colorBgListItemGeneralSelectedFocus,
+        },
+      },
+      "&.ant-select-item-option-disabled": {
+        color: themeVars.colorTextListItemGeneralDisabled,
+        backgroundColor: themeVars.colorBgListItemGeneralDisabled,
+        cursor: "not-allowed",
+      },
+    },
+  }}
+`;
+
+type AutoCompleteProps<ValueType = string, OptionType extends DefaultOptionType = DefaultOptionType> = Omit<
+  SelectProps<ValueType, OptionType>,
+  "mode" | "prefixCls" | "getInputElement" | "children"
+> & {
+  children?: ReactElement;
+};
+
+const AutoComplete = forwardRef<BaseSelectRef, AutoCompleteProps>(function AutoComplete(
+  {children, className, dropdownRender, ...props},
+  ref
+) {
+  const getInputElement = children ? () => children : undefined;
+  const themedDropdownRender = useCallback(
+    (menu: ReactElement) => <ThemeProvider portal>{dropdownRender ? dropdownRender(menu) : menu}</ThemeProvider>,
+    [dropdownRender]
+  );
+
+  return (
+    <Select<string>
+      ref={ref}
+      prefixCls="ant-select"
+      className={cx("ant-select-auto-complete", className)}
+      mode="combobox"
+      getInputElement={getInputElement}
+      dropdownRender={themedDropdownRender}
+      {...props}
+    />
+  );
+});
+
+export const AntAutoComplete = wrapWithPopupContainer(getWrapper(autoCompleteStyles), AutoComplete);

package/src/antd/auto-width-transparent-textarea.tsx

@@ -1,6 +1,6 @@
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {css, cx} from "@linaria/core";
-import TextArea from "antd/lib/input/TextArea";
+import TextArea from "rc-textarea";
 import {forwardRef, useRef} from "react";
 
 import {TransparentInputWrapper} from "./input";
@@ -50,7 +50,14 @@ export const AutoWidthTransparentTextArea = forwardRef<HTMLDivElement, AutoWidth
         data-value={props.value || props.placeholder}
         ref={composedRef}
       >
-        <TextArea className={cx(textArea, className)} style={style} onChange={handleChange} cols={1} {...props} />
+        <TextArea
+          prefixCls="ant-input"
+          className={cx("ant-input", textArea, className)}
+          style={style}
+          onChange={handleChange}
+          cols={1}
+          {...props}
+        />
       </TransparentInputWrapper>
     );
   }