antd#UploadProps TypeScript Examples

The following examples show how to use antd#UploadProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: utils.tsx    From antdp with MIT License 6 votes vote down vote up 
getItem = ({ attr, type, inputNode }: {
  attr?: Partial<ItemChildAttr<any, any>>;
  type?: ItemChildType;
  inputNode?: ((...arg: any[]) => React.ReactNode) | React.ReactNode;
}) => {
  let renderItem = undefined;
  if (type === 'Input') {
    const inputAttr = attr as InputProps;
    renderItem = <Input {...inputAttr} />;
  } else if (type === 'TextArea') {
    const inputAttr = attr as TextAreaProps;
    renderItem = <Input.TextArea {...inputAttr} />;
  } else if (type === 'InputNumber') {
    const inputAttr = attr as InputNumberProps;
    renderItem = <InputNumber {...inputAttr} />;
  } else if (type === 'AutoComplete') {
    const inputAttr = attr as AutoCompleteProps;
    renderItem = <AutoComplete {...inputAttr} />;
  } else if (type === 'Cascader') {
    const inputAttr = attr as CascaderProps;
    renderItem = <Cascader {...inputAttr} />;
  } else if (type === 'DatePicker') {
    const inputAttr = attr as DatePickerProps;
    renderItem = <DatePicker {...inputAttr} />;
  } else if (type === 'Rate') {
    const inputAttr = attr as RateProps;
    renderItem = <Rate {...inputAttr} />;
  } else if (type === 'Slider') {
    const inputAttr = attr as SliderSingleProps;
    renderItem = <Slider {...inputAttr} />;
  } else if (type === 'TreeSelect') {
    const inputAttr = attr as TreeSelectProps<any>;
    renderItem = <TreeSelect {...inputAttr} />;
  } else if (type === 'Select') {
    const inputAttr = attr as SelectProps<any>;
    renderItem = <Select {...inputAttr} />;
  } else if (type === 'Checkbox') {
    const inputAttr = attr as CheckboxGroupProps;
    renderItem = <Checkbox.Group {...inputAttr} />;
  } else if (type === 'Mentions') {
    const inputAttr = attr as MentionProps;
    renderItem = <Mentions {...inputAttr} />;
  } else if (type === 'Radio') {
    const inputAttr = attr as RadioProps;
    renderItem = <Radio.Group {...inputAttr} />;
  } else if (type === 'Switch') {
    const inputAttr = attr as SwitchProps;
    renderItem = <Switch {...inputAttr} />;
  } else if (type === 'TimePicker') {
    const inputAttr = attr as TimePickerProps;
    renderItem = <TimePicker {...inputAttr} />;
  } else if (type === 'Upload') {
    const inputAttr = attr as UploadProps;
    renderItem = <Upload {...inputAttr} />;
  } else if (type === 'RangePicker') {
    const inputAttr = attr as RangePickerProps;
    renderItem = <RangePicker {...inputAttr} />;
  } else if (type === 'Custom') {
    renderItem = inputNode;
  }
  return renderItem;
}
Example #2
Source File: index.test.tsx    From erda-ui with GNU Affero General Public License v3.0 6 votes vote down vote up 
jest.mock('antd', () => {
  // eslint-disable-next-line @typescript-eslint/no-shadow
  const React = require('react');
  // eslint-disable-next-line @typescript-eslint/no-shadow
  const antd = jest.requireActual('antd');
  const OldUpload = antd.Upload;
  const Upload: React.FC<UploadProps> = ({ children, onChange, ...rest }) => {
    return (
      <OldUpload
        {...rest}
        onChange={(data: UploadChangeParam) => {
          const file = data.file;
          onChange?.({
            ...data,
            file: {
              ...file,
              response: file.name
                ? {
                    data: {
                      url: imgUrl,
                    },
                  }
                : undefined,
            },
          });
        }}
      >
        {children}
      </OldUpload>
    );
  };
  return {
    ...antd,
    Upload,
  };
});
Example #3
Source File: upload-props.tsx    From erda-ui with GNU Affero General Public License v3.0 6 votes vote down vote up 
/**
 * 获得公共上传props
 * @param overwrite 覆盖配置
 * @param sizeLimit 上传大小限制，单位M
 */
export function getUploadProps(
  overwrite: Merge<UploadProps, { queryData?: Record<string, any> }>,
  sizeLimit = 20,
): UploadProps {
  const { queryData = {}, ...rest } = overwrite;
  const queryStr = qs.stringify(queryData);
  return {
    action: `/api/files${queryStr ? `?${queryStr}` : ''}`,
    showUploadList: false,
    headers: {
      'OPENAPI-CSRF-TOKEN': getCookies('OPENAPI-CSRF-TOKEN'),
      org: getOrgFromPath(),
    },
    beforeUpload: (file: any) => {
      const UPLOAD_SIZE_LIMIT = sizeLimit; // M
      const isLtSize = file.size / 1024 / 1024 < UPLOAD_SIZE_LIMIT;
      if (!isLtSize) {
        message.warning(i18n.t('common:the uploaded file must not exceed {size}M', { size: UPLOAD_SIZE_LIMIT }));
      }
      return isLtSize;
    },
    ...rest,
  };
}
Example #4
Source File: upload-plugin.test.tsx    From erda-ui with GNU Affero General Public License v3.0 5 votes vote down vote up 
jest.mock('antd', () => {
  // eslint-disable-next-line @typescript-eslint/no-shadow
  const React = require('react');
  // eslint-disable-next-line @typescript-eslint/no-shadow
  const antd = jest.requireActual('antd');
  const OldUpload = antd.Upload;
  const Upload: React.FC<UploadProps> = ({ children, onChange, ...rest }) => {
    return (
      <OldUpload
        {...rest}
        onChange={(data: UploadChangeParam) => {
          const file = data.file;
          const response = {};
          onChange?.({
            ...data,
            file: {
              status: 'success',
              response: file.name
                ? {
                    success: true,
                    err: {},
                    data: {
                      ...file,
                      url: 'filePath',
                    },
                  }
                : undefined,
            },
          });
        }}
      >
        {children}
      </OldUpload>
    );
  };
  return {
    ...antd,
    Upload,
  };
});