@iobroker/adapter-react-v5 7.5.1 → 7.6.0

package/build/Components/IconPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.js","sourceRoot":"./src/","sources":["Components/IconPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\r\nimport { useDropzone } from 'react-dropzone';\r\n\r\nimport { InputLabel, FormControl, IconButton } from '@mui/material';\r\nimport { Clear as ClearIcon } from '@mui/icons-material';\r\n\r\nimport { IconSelector } from './IconSelector';\r\nimport { Icon } from './Icon';\r\nimport { I18n } from '../i18n';\r\nimport { Utils } from './Utils';\r\n\r\nconst styles: Record<string, React.CSSProperties> = {\r\n    formContainer: {\r\n        display: 'flex',\r\n        justifyContent: 'left',\r\n        alignItems: 'center',\r\n    },\r\n    formControl: {\r\n        display: 'flex',\r\n        padding: 24,\r\n        flexGrow: 1000,\r\n    },\r\n    divContainer: {\r\n        width: 32 + 32,\r\n        height: 32,\r\n        whiteSpace: 'nowrap',\r\n        lineHeight: '32px',\r\n        marginRight: 8,\r\n    },\r\n    dragField: {\r\n        textAlign: 'center',\r\n        display: 'table',\r\n        minHeight: 90,\r\n        width: 'calc(100% - 60px)',\r\n        border: '2px dashed #777',\r\n        borderRadius: 10,\r\n        padding: 4,\r\n    },\r\n    formIcon: {\r\n        margin: 10,\r\n        opacity: 0.6,\r\n    },\r\n    text: {\r\n        display: 'table-cell',\r\n        verticalAlign: 'middle',\r\n    },\r\n};\r\n\r\ninterface IconPickerProps {\r\n    previewStyle?: React.CSSProperties;\r\n    previewClassName?: string;\r\n    /** Custom icon element. */\r\n    icon?: React.FC<{ style?: React.CSSProperties }>;\r\n    customStyles?: Record<string, React.CSSProperties>;\r\n    customClasses?: Record<string, string>;\r\n    /** The label. */\r\n    label?: string;\r\n    /** The value. */\r\n    value?: any;\r\n    /** Set to true to disable the icon picker. */\r\n    disabled?: boolean;\r\n    /** The icon change callback. */\r\n    onChange: (icon: string) => void;\r\n    icons?: {\r\n        icon?: string;\r\n        src?: string;\r\n        href?: string;\r\n        name?: ioBroker.StringOrTranslated;\r\n        _id?: string;\r\n    }[];\r\n    onlyRooms?: boolean;\r\n    onlyDevices?: boolean;\r\n}\r\n\r\nexport function IconPicker(props: IconPickerProps): React.JSX.Element {\r\n    const IconCustom = props.icon;\r\n\r\n    const onChange = props.onChange;\r\n\r\n    const onDrop = useCallback(\r\n        (acceptedFiles: File[]) => {\r\n            const reader = new FileReader();\r\n\r\n            reader.addEventListener('load', () => onChange(reader.result as string), false);\r\n\r\n            if (acceptedFiles[0]) {\r\n                reader.readAsDataURL(acceptedFiles[0]);\r\n            }\r\n        },\r\n        [onChange],\r\n    );\r\n\r\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });\r\n\r\n    return (\r\n        <div style={styles.formContainer}>\r\n            {IconCustom ? <IconCustom style={styles.formIcon} /> : null}\r\n            <FormControl\r\n                variant=\"standard\"\r\n                style={{ ...styles.formControl, padding: 3 }}\r\n            >\r\n                <InputLabel\r\n                    shrink\r\n                    sx={props.customStyles?.label ? { '&.MuiInputLabel-root': props.customStyles.label } : undefined}\r\n                    classes={{ root: props.customClasses?.label }}\r\n                >\r\n                    {props.label}\r\n                </InputLabel>\r\n                <div style={styles.formContainer}>\r\n                    {props.value ? (\r\n                        <div style={styles.divContainer}>\r\n                            <Icon\r\n                                style={{ ...props.previewStyle, ...(props.customStyles?.icon || undefined) }}\r\n                                src={props.value}\r\n                                className={Utils.clsx(props.previewClassName, props.customClasses?.icon)}\r\n                            />\r\n                            {!props.disabled && (\r\n                                <IconButton\r\n                                    style={{ verticalAlign: 'top' }}\r\n                                    title={I18n.t('ra_Clear icon')}\r\n                                    size=\"small\"\r\n                                    onClick={() => props.onChange('')}\r\n                                >\r\n                                    <ClearIcon />\r\n                                </IconButton>\r\n                            )}\r\n                        </div>\r\n                    ) : (\r\n                        !props.disabled && (\r\n                            <IconSelector\r\n                                icons={props.icons}\r\n                                onlyRooms={props.onlyRooms}\r\n                                onlyDevices={props.onlyDevices}\r\n                                onSelect={(base64: string) => props.onChange(base64)}\r\n                                t={I18n.t}\r\n                                lang={I18n.getLanguage()}\r\n                            />\r\n                        )\r\n                    )}\r\n\r\n                    {!props.disabled && (\r\n                        <div\r\n                            {...getRootProps()}\r\n                            style={{\r\n                                ...styles.dragField,\r\n                                ...(isDragActive ? { backgroundColor: 'rgba(0, 255, 0, 0.1)' } : { cursor: 'pointer' }),\r\n                            }}\r\n                        >\r\n                            <input {...getInputProps()} />\r\n                            {isDragActive ? (\r\n                                <span style={styles.text}>{I18n.t('ra_Drop the files here...')}</span>\r\n                            ) : (\r\n                                <span style={styles.text}>\r\n                                    {I18n.t(\"ra_Drag 'n' drop some files here, or click to select files\")}\r\n                                </span>\r\n                            )}\r\n                        </div>\r\n                    )}\r\n                </div>\r\n            </FormControl>\r\n        </div>\r\n    );\r\n}\r\n"]}
+{"version":3,"file":"IconPicker.js","sourceRoot":"./src/","sources":["Components/IconPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\nimport { useDropzone } from 'react-dropzone';\n\nimport { InputLabel, FormControl, IconButton } from '@mui/material';\nimport { Clear as ClearIcon } from '@mui/icons-material';\n\nimport { IconSelector } from './IconSelector';\nimport { Icon } from './Icon';\nimport { I18n } from '../i18n';\nimport { Utils } from './Utils';\n\nconst styles: Record<string, React.CSSProperties> = {\n    formContainer: {\n        display: 'flex',\n        justifyContent: 'left',\n        alignItems: 'center',\n    },\n    formControl: {\n        display: 'flex',\n        padding: 24,\n        flexGrow: 1000,\n    },\n    divContainer: {\n        width: 32 + 32,\n        height: 32,\n        whiteSpace: 'nowrap',\n        lineHeight: '32px',\n        marginRight: 8,\n    },\n    dragField: {\n        textAlign: 'center',\n        display: 'table',\n        minHeight: 90,\n        width: 'calc(100% - 60px)',\n        border: '2px dashed #777',\n        borderRadius: 10,\n        padding: 4,\n    },\n    formIcon: {\n        margin: 10,\n        opacity: 0.6,\n    },\n    text: {\n        display: 'table-cell',\n        verticalAlign: 'middle',\n    },\n};\n\ninterface IconPickerProps {\n    previewStyle?: React.CSSProperties;\n    previewClassName?: string;\n    /** Custom icon element. */\n    icon?: React.FC<{ style?: React.CSSProperties }>;\n    customStyles?: Record<string, React.CSSProperties>;\n    customClasses?: Record<string, string>;\n    /** The label. */\n    label?: string;\n    /** The value. */\n    value?: any;\n    /** Set to true to disable the icon picker. */\n    disabled?: boolean;\n    /** The icon change callback. */\n    onChange: (icon: string) => void;\n    icons?: {\n        icon?: string;\n        src?: string;\n        href?: string;\n        name?: ioBroker.StringOrTranslated;\n        _id?: string;\n    }[];\n    onlyRooms?: boolean;\n    onlyDevices?: boolean;\n}\n\nexport function IconPicker(props: IconPickerProps): React.JSX.Element {\n    const IconCustom = props.icon;\n\n    const onChange = props.onChange;\n\n    const onDrop = useCallback(\n        (acceptedFiles: File[]) => {\n            const reader = new FileReader();\n\n            reader.addEventListener('load', () => onChange(reader.result as string), false);\n\n            if (acceptedFiles[0]) {\n                reader.readAsDataURL(acceptedFiles[0]);\n            }\n        },\n        [onChange],\n    );\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });\n\n    return (\n        <div style={styles.formContainer}>\n            {IconCustom ? <IconCustom style={styles.formIcon} /> : null}\n            <FormControl\n                variant=\"standard\"\n                style={{ ...styles.formControl, padding: 3 }}\n            >\n                <InputLabel\n                    shrink\n                    sx={props.customStyles?.label ? { '&.MuiInputLabel-root': props.customStyles.label } : undefined}\n                    classes={{ root: props.customClasses?.label }}\n                >\n                    {props.label}\n                </InputLabel>\n                <div style={styles.formContainer}>\n                    {props.value ? (\n                        <div style={styles.divContainer}>\n                            <Icon\n                                style={{ ...props.previewStyle, ...(props.customStyles?.icon || undefined) }}\n                                src={props.value}\n                                className={Utils.clsx(props.previewClassName, props.customClasses?.icon)}\n                            />\n                            {!props.disabled && (\n                                <IconButton\n                                    style={{ verticalAlign: 'top' }}\n                                    title={I18n.t('ra_Clear icon')}\n                                    size=\"small\"\n                                    onClick={() => props.onChange('')}\n                                >\n                                    <ClearIcon />\n                                </IconButton>\n                            )}\n                        </div>\n                    ) : (\n                        !props.disabled && (\n                            <IconSelector\n                                icons={props.icons}\n                                onlyRooms={props.onlyRooms}\n                                onlyDevices={props.onlyDevices}\n                                onSelect={(base64: string) => props.onChange(base64)}\n                                t={I18n.t}\n                                lang={I18n.getLanguage()}\n                            />\n                        )\n                    )}\n\n                    {!props.disabled && (\n                        <div\n                            {...getRootProps()}\n                            style={{\n                                ...styles.dragField,\n                                ...(isDragActive ? { backgroundColor: 'rgba(0, 255, 0, 0.1)' } : { cursor: 'pointer' }),\n                            }}\n                        >\n                            <input {...getInputProps()} />\n                            {isDragActive ? (\n                                <span style={styles.text}>{I18n.t('ra_Drop the files here...')}</span>\n                            ) : (\n                                <span style={styles.text}>\n                                    {I18n.t(\"ra_Drag 'n' drop some files here, or click to select files\")}\n                                </span>\n                            )}\n                        </div>\n                    )}\n                </div>\n            </FormControl>\n        </div>\n    );\n}\n"]}