@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
1 lines • 5.02 kB
Source Map (JSON)
{"version":3,"file":"file-input.cjs","names":["defaultFormat: (value: File, index: number) => string","createSlotComponent","fileInputStyle","useInputBorder","useFileInput","styled","Portal","useInputPropsContext"],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n extends Omit<\n HTMLStyledProps<\"input\">,\n \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n >,\n ThemeProps<FileInputStyle>,\n UseInputBorderProps,\n FieldProps,\n Omit<UseFileInputProps, \"children\"> {\n /**\n * A callback that returns a React node.\n */\n children?: (files: File[] | undefined) => ReactNode\n /**\n * The component that displays uploaded files.\n */\n component?: (props: { index: number; value: File }) => ReactNode\n /**\n * A callback that formats the name of the uploaded file.\n */\n format?: (value: File, index: number) => string\n /**\n * The string to separate uploaded files.\n *\n * @default ','\n */\n separator?: string\n}\n\nconst {\n PropsContext: FileInputPropsContext,\n usePropsContext: useFileInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n \"file-input\",\n fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n ({\n children,\n component,\n errorBorderColor,\n focusBorderColor,\n format = defaultFormat,\n placeholder,\n separator = \",\",\n ...props\n }) => {\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const { values, getFieldProps, getInputProps } = useFileInput(props)\n\n const cloneChildren = useMemo(() => {\n if (!values?.length)\n return (\n <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n {placeholder}\n </styled.span>\n )\n\n if (children) return children(values)\n\n return values.map((value, index) => {\n const last = values.length === index + 1\n\n if (component) {\n const node = component({ index, value })\n\n if (isValidElement(node)) {\n return cloneElement(node, { key: index })\n } else {\n return node\n }\n } else {\n return (\n <FileInputTag key={index}>\n {format(value, index)}\n {!last ? separator : null}\n </FileInputTag>\n )\n }\n })\n }, [children, format, placeholder, separator, component, values])\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <styled.div {...varProps} {...getFieldProps()}>\n {cloneChildren}\n </styled.div>\n </>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return { ...context, ...props }\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;;;;;;AAeA,MAAMA,iBAAyD,EAAE,WAAW;AA+B5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEC,6CACF,cACAC,wCACD;;;;;;AASD,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,IACZ,GAAG,YACC;CACJ,MAAM,WAAWC,wCAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,EAAE,QAAQ,eAAe,kBAAkBC,oCAAa,MAAM;CAEpE,MAAM,yCAA8B;AAClC,MAAI,CAAC,QAAQ,OACX,QACE,2CAACC,uBAAO;GAAK,UAAS;GAAS,YAAW;aACvC;IACW;AAGlB,MAAI,SAAU,QAAO,SAAS,OAAO;AAErC,SAAO,OAAO,KAAK,OAAO,UAAU;GAClC,MAAM,OAAO,OAAO,WAAW,QAAQ;AAEvC,OAAI,WAAW;IACb,MAAM,OAAO,UAAU;KAAE;KAAO;KAAO,CAAC;AAExC,kCAAmB,KAAK,CACtB,gCAAoB,MAAM,EAAE,KAAK,OAAO,CAAC;QAEzC,QAAO;SAGT,QACE,4CAAC,2BACE,OAAO,OAAO,MAAM,EACpB,CAAC,OAAO,YAAY,SAFJ,MAGJ;IAGnB;IACD;EAAC;EAAU;EAAQ;EAAa;EAAW;EAAW;EAAO,CAAC;AAEjE,QACE,qFACE,2CAACC,mCACC,2CAACD,uBAAO,SAAM,GAAI,eAAe,GAAI,GAC9B,EAET,2CAACA,uBAAO;EAAI,GAAI;EAAU,GAAI,eAAe;YAC1C;GACU,IACZ;GAGP,OACD,EAAE,UAAU;AAGX,QAAO;EAAE,GAFOE,oCAAsB;EAEjB,GAAG;EAAO;EAC/B;AAIF,MAAM,eAAe,YAAuC,QAAQ,MAAM,EAAE"}