{"version":3,"file":"index.40e4f67b.js","sources":["../../src/components/FormItemEx/Input/index.tsx","../../src/components/Video/index.tsx","../../src/components/Image/helper.ts","../../src/components/Image/index.tsx","../../src/components/Upload/index.tsx","../../src/components/TextArea/index.tsx"],"sourcesContent":["import React, {useEffect, useState} from \"react\";\r\nimport './index.less';\r\nimport {IFormItemProps} from \"../interface\";\r\n\r\ntype borderedType = 'all' | 'bottom' | 'none'\r\n\r\n\r\ninterface Props extends IFormItemProps {\r\n errorMsg?: string\r\n min?: any\r\n readOnly?: boolean\r\n bordered?: borderedType\r\n}\r\n\r\n\r\nconst borderedMap = {\r\n 'all': 'zc-input-wrapper',\r\n 'bottom': 'zc-input-bottom',\r\n 'none': 'zc-input-none'\r\n}\r\nconst activeMap = {\r\n 'all': 'input-active',\r\n 'bottom': 'input-bottom-active',\r\n 'none': 'input-none-active'\r\n}\r\nconst errMap = {\r\n 'all': 'errorMsg',\r\n 'bottom': 'errorMsg-bottom',\r\n 'none': 'errorMsg'\r\n}\r\n\r\nconst ZInput = (props: Props) => {\r\n const {\r\n extra,\r\n // clearable = true,\r\n width,\r\n size = 'large',\r\n placeholder,\r\n type = 'input' && 'text',\r\n disabled,\r\n onBlur,\r\n errStatus = false,\r\n errorMsg = '',\r\n readOnly = false,\r\n min,\r\n value = '',\r\n bordered = 'all',\r\n align = 'left',\r\n mode,\r\n onKeyDown,\r\n onKeyUp,\r\n filter = false\r\n } = props;\r\n //@ts-ignore\r\n const [active, setActive] = useState('')\r\n const [errs, setErrs] = useState('')\r\n\r\n useEffect(() => {\r\n setErrs(errorMsg)\r\n }, [errorMsg])\r\n\r\n useEffect(() => {\r\n if (value) {\r\n setErrs('')\r\n }\r\n }, [value])\r\n\r\n const onChange = (e: any) => {\r\n if (type === 'picker') {\r\n\r\n } else {\r\n const value = e.target.value\r\n props?.onChange?.(type === 'number' && Number(value) || value)\r\n }\r\n }\r\n const onFocus = (e: any) => {\r\n const value = e.target.value\r\n e.target.setSelectionRange(0, value.length)\r\n setActive(activeMap[bordered])\r\n props.onFocus?.(value)\r\n }\r\n const onInputBlur = (e: any) => {\r\n if (!filter) {\r\n onBlur?.(e)\r\n }\r\n setActive('')\r\n }\r\n // 获取class\r\n const getClassName = () => `${borderedMap[bordered]} ${active} ${(!!errs || errStatus) && errMap[bordered] || '2'}`\r\n // 属性\r\n const inputAttr = () => {\r\n return {\r\n disabled,\r\n readOnly,\r\n placeholder,\r\n type,\r\n className: `zcinput ${mode === 'table' ? 'full' : size}`,\r\n min: min ?? 1,\r\n value,\r\n onInput: onChange,\r\n onFocus,\r\n onBlur: onInputBlur,\r\n onKeyUp,\r\n onKeyDown\r\n }\r\n }\r\n // 清空\r\n // const onClear = () => {\r\n // const e = {target: {value: ''}}\r\n // onChange(e)\r\n // }\r\n //\r\n\r\n return (\r\n
\r\n \r\n {extra?.suffix && {extra.suffix} || ''}\r\n {/*{clearable && defaultValue && }*/}\r\n
\r\n )\r\n}\r\n\r\nexport default ZInput;","import React from \"react\";\r\nimport './index.less'\r\n\r\nexport interface IVideoProps {\r\n src: string\r\n width?: number\r\n height?: number\r\n autoplay?: boolean\r\n controls?: boolean\r\n}\r\n\r\nconst ZVideo = (props: IVideoProps) => {\r\n const {src, height = 98, autoplay = false, controls = false} = props\r\n return (\r\n
\r\n {!autoplay &&
|| ''}\r\n \r\n
\r\n )\r\n}\r\nexport default ZVideo","const videoType = ['wmv', 'asf', 'asx', 'rm', 'rmvb', 'mpg', 'mpeg', 'mpe', '3gp', 'mov', 'mp4', 'm4v', 'avi', 'dat', 'mkv', 'flv', 'vob']\r\nconst pdfType = ['pdf', 'PDF']\r\nconst zipType = ['rar', 'zip', 'arj', 'z', 'lzh', 'jar']\r\nconst wordType = ['doc', 'docx']\r\n\r\nexport const isVideo = (url: string) => {\r\n const result: string[] = url.split('.')\r\n const suffix: string = result[result.length - 1]\r\n return videoType.includes(suffix.toLowerCase()) && true || false\r\n}\r\nexport const isPDF = (url: string) => {\r\n const result: string[] = url.split('.')\r\n const suffix: string = result[result.length - 1]\r\n return pdfType.includes(suffix.toLowerCase()) && true || false\r\n}\r\n\r\nexport const checkFileType = (url: string) => {\r\n const result: string[] = url?.split?.('.') || []\r\n const suffix: string = result[result.length - 1] || ''\r\n if (videoType.includes(suffix.toLowerCase())) {\r\n return 'video'\r\n }\r\n if (pdfType.includes(suffix.toLowerCase())) {\r\n return 'pdf'\r\n }\r\n if (zipType.includes(suffix.toLowerCase())) {\r\n return 'zip'\r\n }\r\n if (wordType.includes(suffix.toLowerCase())) {\r\n return 'word'\r\n }\r\n return 'image'\r\n}","import React, {useEffect, useState} from \"react\";\r\nimport './index.less'\r\nimport ZVideo from \"@/components/Video\";\r\nimport {checkFileType, isVideo} from \"@/components/Image/helper\";\r\n\r\nexport type ZImageProps = {\r\n src?: string,\r\n alt?: string,\r\n className?: string\r\n closeable?: boolean\r\n onDelete?: () => void\r\n list?: string[]\r\n height?: number\r\n autoplay?: boolean\r\n controls?: boolean\r\n preview?: boolean\r\n style?: any\r\n showName?: boolean\r\n}\r\n\r\n\r\nconst ZImage = (props: ZImageProps) => {\r\n const {\r\n showName = false,\r\n src = '',\r\n alt,\r\n className,\r\n closeable = false,\r\n onDelete,\r\n list = [],\r\n height = 98,\r\n autoplay = false,\r\n controls,\r\n preview = true,\r\n style = {}\r\n } = props\r\n const [name, setName] = useState('')\r\n\r\n useEffect(() => {\r\n if (src) {\r\n const label: string = src.split('/').pop() as string\r\n setName(label)\r\n }\r\n }, [src])\r\n\r\n const onClick = (e: any) => {\r\n if (!preview || checkFileType(src) !== 'video') {\r\n return\r\n }\r\n let press: boolean = true\r\n let scale: number = 1\r\n let rotate: number = 0\r\n e.stopPropagation()\r\n let img: any = document.createElement(isVideo(src) && 'video' || 'img')\r\n img.className = 'zc-mode-img'\r\n img.src = src\r\n if (isVideo(src)) {\r\n img.setAttribute('controls', 'controls')\r\n img.play()\r\n }\r\n const len = list.length\r\n let current = src\r\n const mode = document.createElement('div')\r\n if (list.length) {\r\n // 上一张\r\n const leftArrow = document.createElement('button')\r\n leftArrow.className = 'zc-img-left-arrow'\r\n leftArrow.innerText = '上一张'\r\n mode.appendChild(leftArrow)\r\n\r\n leftArrow.addEventListener('click', (e: any) => {\r\n e.stopPropagation()\r\n mode.removeChild(img)\r\n const index = list.findIndex((url: string) => url === current)\r\n current = list[Math.max(0, index - 1)]\r\n if (isVideo(current)) {\r\n img = document.createElement('video')\r\n img.setAttribute('controls', 'controls')\r\n img.src = current\r\n img.play()\r\n } else {\r\n img = document.createElement('img')\r\n img.className = 'zc-mode-img'\r\n img.src = current\r\n }\r\n mode.appendChild(img)\r\n img.addEventListener('click', (e: any) => e.stopPropagation())\r\n })\r\n\r\n // 下一张\r\n const rightArrow = document.createElement('button')\r\n rightArrow.className = 'zc-img-right-arrow'\r\n rightArrow.innerText = '下一张'\r\n mode.appendChild(rightArrow)\r\n rightArrow.addEventListener('click', (e: any) => {\r\n e.stopPropagation()\r\n mode.removeChild(img)\r\n const index = list.findIndex((url: string) => url === current)\r\n current = list[Math.min(len - 1, index + 1)]\r\n if (isVideo(current)) {\r\n img = document.createElement('video')\r\n img.src = current\r\n img.setAttribute('controls', 'controls')\r\n img.play()\r\n } else {\r\n img = document.createElement('img')\r\n img.className = 'zc-mode-img'\r\n img.src = current\r\n }\r\n\r\n mode.appendChild(img)\r\n img.addEventListener('click', (e: any) => e.stopPropagation())\r\n })\r\n\r\n }\r\n\r\n // 逆时针旋转\r\n const leftRotate = document.createElement('div')\r\n leftRotate.className = 'zc-img-left-rotate'\r\n mode.appendChild(leftRotate)\r\n leftRotate.addEventListener('click', (e: any) => {\r\n e.stopPropagation()\r\n rotate -= 90\r\n img.style.transform = `scale(${scale}) rotate(${rotate}deg)`\r\n })\r\n\r\n // 顺时针旋转\r\n const rightRotate = document.createElement('div')\r\n rightRotate.className = 'zc-img-right-rotate'\r\n mode.appendChild(rightRotate)\r\n rightRotate.addEventListener('click', (e: any) => {\r\n e.stopPropagation()\r\n rotate += 90\r\n img.style.transform = `scale(${scale}) rotate(${rotate}deg)`\r\n })\r\n mode.appendChild(img)\r\n mode.className = 'zc-mode-wrapper'\r\n img.addEventListener('click', (e: any) => e.stopPropagation())\r\n mode.addEventListener('click', () => document.body.removeChild(mode))\r\n\r\n // 鼠标滚动 图片放大 缩小\r\n window.addEventListener('wheel', (e: any) => {\r\n scale = e.deltaY > 0 && Math.max(0.8, scale - 0.1) || Math.min(5, scale + 0.1)\r\n img.style.transform = `scale(${scale}) rotate(${rotate}deg)`\r\n })\r\n document.body.appendChild(mode)\r\n const handleKeydown = (e: any) => {\r\n if (e.keyCode === 27 && press && mode) {\r\n document.body.removeChild(mode)\r\n window.removeEventListener(\"keydown\", handleKeydown)\r\n }\r\n if ((e.keyCode === 39 || e.keyCode === 40) && press) {\r\n e.stopPropagation()\r\n const index = list.findIndex((url: string) => url === current)\r\n current = list[Math.min(len - 1, index + 1)]\r\n img.src = current\r\n }\r\n if ((e.keyCode === 37 || e.keyCode === 38) && press) {\r\n e.stopPropagation()\r\n const index = list.findIndex((url: string) => url === current)\r\n current = list[Math.max(0, index - 1)]\r\n img.src = current\r\n }\r\n press = false\r\n }\r\n const handleKeyup = () => press = true\r\n\r\n window.addEventListener('keydown', handleKeydown)\r\n window.addEventListener('keyup', handleKeyup)\r\n }\r\n return (\r\n
\r\n
\r\n {\r\n checkFileType(src) === 'video'\r\n &&\r\n \r\n ||\r\n checkFileType(src) === \"pdf\"\r\n &&\r\n
\r\n {alt\r\n
\r\n ||\r\n checkFileType(src) === \"zip\"\r\n &&\r\n
\r\n {alt\r\n
\r\n ||\r\n checkFileType(src) === \"word\"\r\n &&\r\n
\r\n {alt\r\n
\r\n ||\r\n {alt\r\n }\r\n\r\n
\r\n {\r\n closeable\r\n &&\r\n
×
\r\n ||\r\n ''\r\n }\r\n {showName &&
{alt || name}
|| ''}\r\n
\r\n )\r\n}\r\n\r\nexport default ZImage\r\n\r\n","import React, {useEffect, useState} from \"react\";\r\nimport './index.less'\r\nimport {IFormItemProps} from \"@/components/FormItemEx/interface\";\r\nimport ZImage from \"@/components/Image\";\r\n\r\nexport interface ZUploadProps extends IFormItemProps {\r\n children?: any\r\n upload?: any\r\n multiple?: boolean // 是否支持多选文件。开启后按住 ctrl 可选择多个文件,默认关闭\r\n maxCount?: number\r\n value?: string\r\n hideName?: true\r\n title?: React.ReactNode\r\n}\r\n\r\nconst ZUpload = (props:ZUploadProps) => {\r\n const {children, upload, multiple = false, width, onChange, hideName = false, extra = {}, title = '上传'} = props\r\n const {listType = 'picture'} = extra\r\n const [file, setFile] = useState('')\r\n const [fileName, setFileName] = useState('')\r\n const customRequest = (e: any) => {\r\n if (e?.target?.files?.length) {\r\n const s = e.target.value?.split(/\\\\/)\r\n setFileName(s[s.length - 1])\r\n upload?.(e, (url: string) => {\r\n setFile(url)\r\n onChange?.(url)\r\n e.target.value = ''\r\n })\r\n e.target.value = ''\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (props.value !== file) {\r\n onChange?.(props.value)\r\n setFileName('')\r\n setFile(props.value as string)\r\n }\r\n }, [props.value])\r\n\r\n\r\n const content = {\r\n 'picture':
\r\n {\r\n file\r\n &&\r\n \r\n ||\r\n title\r\n }\r\n
,\r\n 'picture-card':\r\n
\r\n {\r\n file\r\n &&\r\n setFile('')} src={file}/>\r\n ||\r\n '+'\r\n }\r\n
,\r\n 'text':\r\n
\r\n
\r\n \r\n 文件上传\r\n
\r\n {!hideName && || ''}\r\n
,\r\n }\r\n\r\n return (\r\n
\r\n {\r\n listType !== 'text'\r\n &&\r\n \r\n ||\r\n ''\r\n }\r\n {children || content[listType]}\r\n
\r\n )\r\n}\r\nexport default ZUpload\r\n\r\n","import React, {useState} from \"react\";\r\nimport './index.less';\r\nimport {IFormItemProps} from \"../FormItemEx/interface\";\r\n\r\n\r\ninterface Props extends IFormItemProps {\r\n readOnly?: boolean\r\n}\r\nconst ZTextArea = (props:Props)=>{\r\n const {\r\n width,\r\n size = 'large',\r\n placeholder = '',\r\n type = 'input' && 'text',\r\n border,\r\n disabled,\r\n onBlur,\r\n extra = {},\r\n value = ''\r\n } = props;\r\n const {areaHeight} = extra\r\n //@ts-ignore\r\n const [active,setActive] = useState('')\r\n const onChange = (e: any) => {\r\n const value = e?.target?.value\r\n props?.onChange(type === 'number' && Number(value) || value)\r\n }\r\n\r\n const onFocus = () => {\r\n setActive(border && 'no-active' || 'input-active')\r\n if (props?.onFocus) {\r\n props.onFocus?.(value)\r\n }\r\n }\r\n\r\n const getActiveClass = () => {\r\n if (!border) {\r\n if (active) {\r\n return 'black'\r\n } else {\r\n return 'color-333'\r\n }\r\n } else {\r\n return 'black'\r\n }\r\n }\r\n\r\n\r\n return (\r\n
\r\n