|
| 1 | +/* eslint-disable jsx-a11y/control-has-associated-label */ |
| 2 | +import React, { |
| 3 | + ChangeEventHandler, |
| 4 | + MouseEventHandler, |
| 5 | + ReactNode, |
| 6 | +} from 'react'; |
| 7 | + |
| 8 | +export { default as Form } from './es/form/Form'; |
| 9 | + |
| 10 | +type ModalProps = { |
| 11 | + title: string; |
| 12 | + open: boolean; |
| 13 | + onOk: MouseEventHandler<HTMLButtonElement>; |
| 14 | + onCancel: MouseEventHandler<HTMLButtonElement>; |
| 15 | + children: ReactNode; |
| 16 | +}; |
| 17 | + |
| 18 | +type InputProps = { |
| 19 | + showCount: boolean; |
| 20 | + maxLength: number; |
| 21 | + value: string; |
| 22 | +}; |
| 23 | + |
| 24 | +type FileUploaderProps = { |
| 25 | + onChange: typeof jest.fn; |
| 26 | + fileList: any[]; |
| 27 | + className: string; |
| 28 | + multiple: boolean; |
| 29 | + accept: string; |
| 30 | + listType: string; |
| 31 | + maxCount: number; |
| 32 | + onPreview: typeof jest.fn; |
| 33 | + onRemove: typeof jest.fn; |
| 34 | + uploadTo: string; |
| 35 | + onSuccessUpload: typeof jest.fn; |
| 36 | + children: ReactNode; |
| 37 | +}; |
| 38 | + |
| 39 | +export type MockPaginationProps = { |
| 40 | + current: number; |
| 41 | + total: number; |
| 42 | + pageSize: number; |
| 43 | + onChange: typeof jest.fn; |
| 44 | +}; |
| 45 | + |
| 46 | +type ButtonProps = { |
| 47 | + className: string; |
| 48 | + onClick: MouseEventHandler<HTMLButtonElement>; |
| 49 | + children: ReactNode; |
| 50 | +}; |
| 51 | + |
| 52 | +type PopoverProps = { |
| 53 | + content: string; |
| 54 | + trigger: string; |
| 55 | + children: ReactNode; |
| 56 | +}; |
| 57 | + |
| 58 | +type SelectProps = { |
| 59 | + className: string; |
| 60 | + onSelect: MouseEventHandler<HTMLButtonElement>; |
| 61 | + mode: string; |
| 62 | + onDeselect: MouseEventHandler<HTMLButtonElement>; |
| 63 | + value: Array<any>; |
| 64 | + children: ReactNode; |
| 65 | +}; |
| 66 | + |
| 67 | +type CheckboxProps = { |
| 68 | + checked: boolean; |
| 69 | + onChange: ChangeEventHandler<HTMLInputElement>; |
| 70 | +}; |
| 71 | + |
| 72 | +type OptionProps = { |
| 73 | + value?: string; |
| 74 | +}; |
| 75 | + |
| 76 | +export const mockConfig = jest.fn(); |
| 77 | + |
| 78 | +export const Modal = ({ |
| 79 | + title, |
| 80 | + open, |
| 81 | + onOk, |
| 82 | + onCancel, |
| 83 | + children, |
| 84 | +}: ModalProps) => ( |
| 85 | + <> |
| 86 | + <div className="modalTitle">{title}</div> |
| 87 | + <div className="isModalOpen">{JSON.stringify(open)}</div> |
| 88 | + <button type="button" className="modalOkButton" onClick={onOk}> |
| 89 | + okButton |
| 90 | + </button> |
| 91 | + <button type="button" className="modalCancelButton" onClick={onCancel}> |
| 92 | + cancelButton |
| 93 | + </button> |
| 94 | + <div className="modal-children">{children}</div> |
| 95 | + </> |
| 96 | +); |
| 97 | + |
| 98 | +export const Button = ({ className, onClick, children }: ButtonProps) => ( |
| 99 | + <> |
| 100 | + <div data-test-id="button-class" className={className} /> |
| 101 | + <button type="button" data-test-id="button-button" onClick={onClick} /> |
| 102 | + <div data-test-id="modal-children">{children}</div> |
| 103 | + </> |
| 104 | +); |
| 105 | + |
| 106 | +export const message = { |
| 107 | + config: mockConfig, |
| 108 | +}; |
| 109 | + |
| 110 | +export const Popover = ({ content, trigger, children }: PopoverProps) => ( |
| 111 | + <> |
| 112 | + <div data-test-id="popover-content">{content}</div> |
| 113 | + <div data-test-id="popover-trigger">{trigger}</div> |
| 114 | + <div data-test-id="popover-children">{children}</div> |
| 115 | + </> |
| 116 | +); |
| 117 | + |
| 118 | +const Option = ({ value }: OptionProps) => ( |
| 119 | + <div data-test-id="option-value">{value}</div> |
| 120 | +); |
| 121 | + |
| 122 | +const Select = ({ |
| 123 | + className, |
| 124 | + onSelect, |
| 125 | + mode, |
| 126 | + onDeselect, |
| 127 | + value, |
| 128 | + children, |
| 129 | +}: SelectProps) => ( |
| 130 | + <> |
| 131 | + <div className={className} data-test-id="select-class-name" /> |
| 132 | + <button |
| 133 | + type="button" |
| 134 | + data-test-id="select-on-select" |
| 135 | + onClick={onSelect} |
| 136 | + /> |
| 137 | + <div data-test-id="select-mode">{mode}</div> |
| 138 | + <button |
| 139 | + type="button" |
| 140 | + data-test-id="select-on-deselect" |
| 141 | + onClick={onDeselect} |
| 142 | + /> |
| 143 | + <div data-test-id="select-value">{value}</div> |
| 144 | + <div data-test-id="select-children">{children}</div> |
| 145 | + </> |
| 146 | +); |
| 147 | + |
| 148 | +Select.Option = Option; |
| 149 | + |
| 150 | +export { Select }; |
| 151 | + |
| 152 | +export const Input = ({ value, showCount, maxLength }: InputProps) => ( |
| 153 | + <> |
| 154 | + <div data-testid="input-show-count">{showCount}</div> |
| 155 | + <div data-testid="input-max-length">{maxLength}</div> |
| 156 | + <input data-testid="input-value" value={value} /> |
| 157 | + </> |
| 158 | +); |
| 159 | + |
| 160 | +export const Checkbox = ({ checked, onChange }: CheckboxProps) => ( |
| 161 | + <input type="checkbox" checked={checked} onChange={onChange} /> |
| 162 | +); |
| 163 | + |
| 164 | +export const MockPagination = ({ current, total, pageSize, onChange }: MockPaginationProps) => { |
| 165 | + const totalPages = total % pageSize === 0 ? total / pageSize : (total / pageSize) + 1; |
| 166 | + return ( |
| 167 | + <ul> |
| 168 | + <li> |
| 169 | + <button type="button" disabled={current === 1} onChange={onChange}>{'<'}</button> |
| 170 | + </li> |
| 171 | + <li> |
| 172 | + <input type="text" size={3} /> |
| 173 | + {totalPages} |
| 174 | + </li> |
| 175 | + <li> |
| 176 | + <button type="button" disabled={current >= totalPages} onChange={onChange}>{'>'}</button> |
| 177 | + </li> |
| 178 | + </ul> |
| 179 | + ); |
| 180 | +}; |
0 commit comments