react-admin-base-bootstrap 0.5.0

package/src/Components/ApiSelect.tsx

@@ -0,0 +1,122 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useFetch } from 'react-admin-base';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Select, { components } from "react-select";
+import CreatableSelect from 'react-select/creatable';
+
+function Option(props) {
+    return <components.Option {...props}>
+        { (props.selectProps.children && props.selectProps.children(props.data)) || (props.data.__isNew__ ? <FormattedMessage
+            id="CREATE_VALUE"
+            values={{ text: props.children }}
+        /> : props.children) }
+    </components.Option>
+}
+
+function SingleValue(props) {
+    return <components.SingleValue {...props}>
+        { (props.selectProps.children && props.selectProps.children(props.data)) || (props.data.__isNew__ ? <FormattedMessage
+            id="CREATE_VALUE"
+            values={{ text: props.children }}
+        /> : props.children) }
+    </components.SingleValue>
+}
+
+function EditOrAddIndicator(props) {
+    const { className, cx, getStyles, innerProps } = props;
+
+    return (
+      <div
+        {...innerProps}
+        className={cx(
+          {
+            indicator: true,
+            'clear-indicator': true
+          },
+          className
+        )}
+        css={getStyles('clearIndicator', props)}
+        onMouseDown={e => { 
+            e.stopPropagation();
+            e.preventDefault();
+            props.selectProps.onAddOrEdit();
+        }}
+      >
+       <i className={"fas " + (props.hasValue ? 'fa-pencil-alt' : 'fa-plus')} />
+      </div>);
+}
+
+function IndicatorsContainer(props) {
+    return <components.IndicatorsContainer {...props}>
+        { props.selectProps.onAddOrEdit && <React.Fragment>
+            <EditOrAddIndicator {...props} />
+            <components.IndicatorSeparator {...props} />
+        </React.Fragment> }
+        {props.children}
+    </components.IndicatorsContainer>;
+}
+
+const Components = { Option, SingleValue, IndicatorsContainer };
+
+export default function ApiSelect(props) {
+    const { disabled, url, getOptionLabel, getOptionValue, idKey, nameKey, filter, group, onCreateOption, getNewOptionData, isMulti, onChange, value, placeholder, staticOptions } = props;
+    const intl = useIntl();
+    const [ search, setSearch ] = useState('');
+    const params = useMemo(() => ({ query: search }), [search]);
+    const [ isMenuOpen, setIsMenuOpen ] = useState(false);
+    const [ hasMenuOpen, setHasMenuOpen ] = useState(false);
+    const [ data, loading ] = useFetch((hasMenuOpen && url) || false, params);
+    const [ creating, setCreating ] = useState(false);
+
+    let options = staticOptions || (data && data.data) || data;
+    if (group) {
+        options = group(options || []);
+    }
+
+    const handleCreateOption = useCallback(async function(input) {
+        setCreating(true);
+        try {
+            let option = await onCreateOption(input);
+            if (isMulti) {
+                onChange((value || []).concat([option]));
+            } else {
+                onChange(option);
+            }
+        } finally {
+            setCreating(false);
+        }
+    }, [onCreateOption, setCreating, isMulti, value]);
+
+    const onMenuOpen = useCallback(function() {
+        setIsMenuOpen(true);
+        setHasMenuOpen(true);
+    }, [ setIsMenuOpen, setHasMenuOpen ]);
+
+    const onMenuClose = useCallback(function() {
+        setIsMenuOpen(false);
+    }, [ setIsMenuOpen ]);
+
+    const Component = onCreateOption ? CreatableSelect : Select;
+
+    return <Component
+        {...props}
+        onCreateOption={(onCreateOption && handleCreateOption) || null}
+        getNewOptionData={onCreateOption ? getNewOptionData ? getNewOptionData : (inputValue) =>( { [nameKey || 'name']: inputValue, __isNew__: true }) : null}
+        inputValue={search}
+        onInputChange={a => setSearch(a)}
+        components={Components}
+        isLoading={!!loading || creating}
+        getOptionLabel={getOptionLabel || ((row:any) => row[nameKey || 'name'])}
+        getOptionValue={getOptionValue || ((row:any) => row[idKey || 'id'])}
+        isDisabled={!!disabled || creating}
+        isClearable
+        isSearchable
+        placeholder={placeholder || intl.formatMessage({ id: 'SELECT' })}
+        options={!options ? [] : ((filter && options.filter(filter)) || options)}
+        isMenuOpen={isMenuOpen}
+        onMenuOpen={onMenuOpen}
+        onMenuClose={onMenuClose}
+    />;
+}

package/src/Components/BootstrapDataTable.tsx

@@ -0,0 +1,160 @@
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { DataContextProvider, useAuth, useDataTable } from 'react-admin-base';
+import { FormattedMessage, useIntl } from "react-intl";
+import { Link } from 'react-router-dom';
+import { Alert, Button, Card, CardFooter, CardHeader, Col, Input, Row, Table } from 'reactstrap';
+import Swal from 'sweetalert2';
+import BootstrapPagination from "./BootstrapPagination";
+
+const DataTableContext = React.createContext(null as any);
+
+export function useDataTableContext() {
+    return useContext(DataTableContext);
+}
+
+export function Actions({edit, del, rowSpan, children} : {edit: any, del: any, rowSpan?:any, children?: any}) {
+    const [api] = useAuth();
+    const [, setParams] = useContext(DataTableContext);
+    const intl = useIntl();
+    const [ loading, setLoading ] = useState(false);
+
+    const delFnc = useCallback(async function (e) {
+        e && e.preventDefault();
+
+        const val = await Swal.fire({
+            title: intl.formatMessage({ id: 'ACTIONS.DELETE.TITLE' }),
+            text: intl.formatMessage({ id: 'ACTIONS.DELETE.TEXT' }),
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: intl.formatMessage({ id: 'ACTIONS.DELETE.CONFIRM' })
+        });
+        
+        if (val.value) {
+            setLoading(true);
+            try {
+                await api.tokenized.delete(del);
+                setParams({}, true);
+            } finally {
+                setLoading(false);
+            }
+        }
+    }, [api, del, setParams, intl, setLoading]);
+
+    return <td className="min" rowSpan={rowSpan}>
+        {edit && <Link to={edit}><Button outline color="primary"><i className="fa fa-pencil-alt"/></Button></Link>}
+        {edit && del && ' '}
+        {del && <Button color="danger" outline onClick={delFnc} disabled={loading}><i className={loading ? "fa fa-spin fa-spinner" : "fa fa-trash"} /></Button>}
+        {children}
+    </td>;
+}
+
+export function IdColumn() {
+    return <Column className="min text-center" sort="id"><i className="fas fa-hashtag"/></Column>;
+}
+
+export function ActionsColumn() {
+    return <Column className="min text-center"><i className="fas fa-water"/></Column>;
+}
+
+export function Column(props) {
+    const [params, setParams] = useContext(DataTableContext);
+    const {sort} = props;
+    return <th
+        {...props}
+        style={props.sort && {cursor: 'pointer'}}
+        onClick={props.sort && (() => setParams({
+            sort: sort,
+            desc: params.sort === sort ? !params.desc : true
+        }))}
+    >{props.children} {sort && params.sort && params.sort === sort ? params.desc ?
+        <i className="fa fa-sort-down"/> :
+        <i className="fa fa-sort-up"/> : ''}
+    </th>;
+}
+
+export default function BootstrapTable({url, bordered, noStrip, defaultParams, add, children, innerRef, body}: any) {
+    var state = useState({sort: 'id', ...defaultParams});
+    const [params, setParams] = state;
+    const [page, lastPage, setPage, data, itemPerPage, setItemPerPage] = useDataTable(url, params, body);
+    const intl = useIntl();
+    const [ api ] = useAuth();
+
+    var ref = useRef(defaultParams);
+    useEffect(function () {
+        if (ref.current !== defaultParams) {
+            ref.current = defaultParams;
+            setParams(defaultParams);
+        }
+    }, [defaultParams, ref, setParams]);
+
+    useEffect(function () {
+        if (innerRef) {
+            innerRef.current = setParams;
+
+            return function () {
+                innerRef.current = null;
+            };
+        }
+    }, [setParams, innerRef]);
+
+    const fetchData = useCallback(async function(extraParams) {
+        if (body) {
+            const data = await api.tokenized.post(url, body, { params: { ...params,  ...(extraParams || {}) } });
+            return data.data;
+        }
+
+        const data = await api.tokenized.get(url, { params: { ...params,  ...(extraParams || {}) } });
+        return data.data;
+    }, [api, url, params, body]);
+
+    return <Card>
+        <DataTableContext.Provider value={state}>
+            <DataContextProvider value={fetchData}>
+                <CardHeader>
+                    <Row>
+                        {add && <Col xs="12" md="2"><Link to={add} className="btn btn-primary font-xl btn-lg d-block"><i className="fa fa-plus"/></Link></Col>}
+                        <Col md="2">
+                            <Input type="select" bsSize="lg" value={itemPerPage.toString()} onChange={a => setItemPerPage(+a.currentTarget.value)}>
+                                <option value="1">1</option>
+                                <option value="20">20</option>
+                                <option value="50">50</option>
+                                <option value="100">100</option>
+                                <option value="150">150</option>
+                                <option value="200">200</option>
+                                <option value="-1">{intl.formatMessage({id: "ALL"})}</option>
+                            </Input>
+                        </Col>
+                        {children[2]}
+                        <Col md="3" className="ms-auto">
+                            <Input
+                                placeholder={intl.formatMessage({id: "SEARCH"})} type="text"
+                                value={params.query || ''}
+                                bsSize="lg"
+                                onChange={e => setParams({...params, query: e.currentTarget.value})}
+                            />
+                        </Col>
+                    </Row>
+                </CardHeader>
+                    {data === null ? <Alert className="text-center mb-0 " color="warning"><i className="fas fa-spinner fa-lg fa-spin"></i></Alert> : !data.length ? <Alert className="text-center" color="danger">
+                        <i className="far fa-times-circle fa-lg"></i> <FormattedMessage id="NO_DATA_IS_AVAILABLE"/>
+                    </Alert> : <Table hover bordered={bordered} striped={!noStrip} responsive size="md" className="mb-0 dataTable">
+                        {children[0]}
+                        <tbody>
+                        {data && data.map(children[1].props.children)}
+                        </tbody>
+                    </Table>}
+                { lastPage > 1 && <CardFooter>
+                    <nav>
+                        <BootstrapPagination
+                            currentPage={page}
+                            pageCount={lastPage}
+                            onPageChange={index => setPage(index)}
+                        />
+                    </nav>
+                </CardFooter> }
+            </DataContextProvider>
+        </DataTableContext.Provider>
+    </Card>;
+}

package/src/Components/BootstrapPagination.tsx

@@ -0,0 +1,35 @@
+
+import React from "react";
+import { PaginatorCore } from 'react-admin-base';
+import { Pagination, PaginationItem, PaginationLink } from "reactstrap";
+
+type BootstrapPaginationProps = {
+    className?: string;
+    currentPage: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;  
+};
+
+export default function BootstrapPagination({ className, currentPage, pageCount, onPageChange }: BootstrapPaginationProps) {
+    if (pageCount <= 1)
+        return null;
+
+    return <Pagination listClassName="mb-0" className={className}>
+        <PaginatorCore
+            activePage={currentPage}
+            pageCount={pageCount}
+            showPages={15}
+            prevPage={index => <PaginationItem onClick={() => onPageChange(index)}><PaginationLink previous tag="button">&laquo;</PaginationLink></PaginationItem>}
+
+            page={index => <PaginationItem key={index} active={currentPage === index}>
+                <PaginationLink tag="button" onClick={() => onPageChange(index)}>{index}</PaginationLink>
+            </PaginationItem>}
+
+            nextPage={index => <PaginationItem
+                onClick={() => onPageChange(index)}><PaginationLink next tag="button">&raquo;</PaginationLink></PaginationItem>}
+
+            dots={index => <PaginationItem
+                onClick={() => onPageChange(index)} active={currentPage === index}><PaginationLink tag="button">{index}</PaginationLink></PaginationItem>}
+        />
+    </Pagination>;
+}

package/src/Components/CRUD.tsx

@@ -0,0 +1,117 @@
+import React, { useCallback, useContext, useRef, useState } from 'react';
+import { ValidatorProvider } from "react-admin-base";
+import { FormattedMessage } from 'react-intl';
+import { Redirect, Route } from 'react-router-dom';
+import { Alert, Button, Form, Modal, ModalFooter, ModalHeader } from "reactstrap";
+import LoadingButton from '../Components/LoadingButton';
+import BootstrapDataTable, { Actions } from './BootstrapDataTable';
+
+type ModalEntityEditorParams = {
+    entity: any;
+    title?: string;
+    size?: string;
+    url?: string;
+    onReload?: any;
+    disabled?: Boolean;
+    children: React.ReactNode;
+}
+
+export function ModalEntityEditor({ entity, title, size, url, onReload, disabled, children } : ModalEntityEditorParams) {
+    const [ , , save, loading ] = entity;
+
+    const [ open, setOpen ] = useState(true);
+    const [ saved, setSaved ] = useState(false);
+    const [ error, setError ] = useState<any>(false);
+
+    const onSubmit = useCallback(async function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+
+        if (saved) {
+            setSaved(false);
+        }
+
+        if (error) {
+            setError(null);
+        }
+
+        try {
+            let data = await save();
+            if (onReload) {
+                await onReload(data);
+            }
+
+            if (url) {
+                setSaved(true);
+            }
+        } catch(e) {
+            console.error(e);
+            setError((e.response && e.response.data && e.response.data.message) || (error.data && error.data.message) || e.data || e.message || e);
+        }
+        finally
+        {
+
+        }
+    }, [save, saved, error, onReload, url]);
+
+    return <>
+        { (saved || !open) && url && <Redirect to={url} />}
+        <Modal isOpen size={size} toggle={() => url ? setOpen(false) : onReload(null)} fade={false}>
+            { title && <ModalHeader toggle={() => url ? setOpen(false) : onReload(null)}>
+                <b>{ title }</b>
+            </ModalHeader> }
+            <ValidatorProvider>
+                <Form onSubmit={onSubmit} disabled={!!loading || disabled}>
+                    <fieldset disabled={!!loading || !!disabled}>
+                        { children }
+                    </fieldset>
+                    <ModalFooter>
+                        { error && <Alert color="danger" toggle={() => setError(null)} style={{ display: 'block', width: '100%' }}>{ error }</Alert>}
+                        <LoadingButton block loading={loading} type="submit" color="primary">
+                            <i className="fas fa-save" />{' '}<FormattedMessage id="ENTITY.SAVE" />
+                        </LoadingButton>
+                        <Button block outline color="danger" onClick={(e) => { e.preventDefault(); (url ? setOpen(false) : onReload(null)); }}>
+                            <i className="fas fa-times-circle" />{' '}<FormattedMessage id="ENTITY.CANCEL" />
+                        </Button>
+                    </ModalFooter>
+                </Form>
+            </ValidatorProvider>
+        </Modal>
+    </>;
+}
+
+const UrlContext = React.createContext(null as any);
+
+type CrudActionProps = {
+  id: any;
+  edit?: Boolean;
+  del: string;
+  children?: React.ReactNode;
+};
+
+export function CRUDActions({ id, edit, del, children }: CrudActionProps) {
+    const url = useContext(UrlContext);
+
+    return <Actions edit={edit && (url + "/" + id + "/edit")} del={del}>
+        { children }
+    </Actions>;
+}
+
+export default function CRUD(props) {
+    const ref = useRef(null as any);
+    const { id, url, apiUrl, Component, defaultParams, noAdd } = props;
+
+    var reload = useCallback(async function() {
+        if (ref.current) {
+            ref.current({});
+        }
+    }, [ref]);
+
+    return <UrlContext.Provider value={url}>
+        { !noAdd && <Route path={url+"/create"} render={props => <Component url={url} onReload={reload} {...(defaultParams || {})} />} /> }
+        <Route path={url+"/:id/edit"} render={props => <Component url={url} onReload={reload} id={props.match.params.id} {...(defaultParams || {})} />} />
+        { id && <Route path={url+"/edit"} render={props => <Component url={url} onReload={reload} id={id} {...(defaultParams || {})} />} />}
+        <BootstrapDataTable innerRef={ref} add={!noAdd && (url+"/create")} {...props} url={apiUrl || url} />
+    </UrlContext.Provider>;
+}

package/src/Components/CheckBox.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { FormGroup, Input, Label } from "reactstrap";
+
+export default function CheckBox(props: any) {
+	return <FormGroup check>
+		<Input type={props.type || "checkbox"} {...props} label={undefined} />
+		<Label check for={props.id}>{props.children || props.label}</Label>
+	</FormGroup>;
+}

package/src/Components/EntityEditor.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback, useState } from 'react';
+import { ValidatorProvider } from "react-admin-base";
+import { FormattedMessage } from "react-intl";
+import { Alert, Form } from 'reactstrap';
+import LoadingButton from "../Components/LoadingButton";
+import { ValidationErrors } from './Validator';
+
+type EntityEditorParams = {
+    entity: any;
+    onSave?: any;
+    saveButtonClassName?: string;
+    saveButtonText?: string;
+    disabled?: Boolean;
+    children: React.ReactNode;
+};
+
+export default function EntityEditor({ entity, disabled, children, onSave, saveButtonClassName, saveButtonText }: EntityEditorParams) {
+  const [ _1, _2, save, loading ] = entity;
+
+  const [ saved, setSaved ] = useState(false);
+  const [ error, setError ] = useState<any>(false);
+
+  const onSubmit = useCallback(async function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (saved) {
+      setSaved(false);
+    }
+
+    if (error) {
+      setError(null);
+    }
+
+    try {
+      await save();
+      onSave && onSave();
+      setSaved(true);
+    } catch(e) {
+      console.error(e);
+      setError((e.response && e.response.data && e.response.data.message) || (error.data && error.data.message) || e.data || e.message || e);
+    }
+    finally
+    {
+
+    }
+  }, [save, saved, error]);
+
+  const savedAlert = saved && <Alert color="success" toggle={() => setSaved(false)}><i className="fas fa-check-circle me-2" /><FormattedMessage id="ENTITY.SAVED" /></Alert>;
+
+  return <ValidatorProvider>
+    <Form onSubmit={onSubmit} disabled={!!loading || !!disabled}>
+      { loading && <Alert color="warning" toggle={() => setSaved(false)}>
+        <i className="fa fa-spin fa-spinner" />{' '}
+        <FormattedMessage id="PLEASE_WAIT"/>
+      </Alert>}
+      { savedAlert }
+      { error && <Alert color="danger" toggle={() => setError(null)}>{ error }</Alert>}
+      <fieldset disabled={!!loading || !!disabled}>
+        { children }
+      </fieldset>
+      <ValidationErrors />
+      { savedAlert }
+      <LoadingButton className={saveButtonClassName || "col-md-12"} loading={loading} type="submit" color="primary">{ saveButtonText || <FormattedMessage id="ENTITY.SAVE" /> } <i className="fas fa-save fa-lg"></i></LoadingButton>
+    </Form>
+  </ValidatorProvider>;
+}

package/src/Components/ErrorBoundary.tsx

@@ -0,0 +1,29 @@
+
+import { Alert } from 'reactstrap';
+import React from 'react';
+
+function ErrorHandler({ error }) {
+  return <Alert color="danger">
+    <i className="fas fa-exclamation-circle me-1" />
+    { error && ((error.response && error.response.data && error.response.data.message) || error.message) }
+  </Alert>;
+}
+
+export default class ErrorBoundary extends React.Component {
+  state = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error
+    };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ErrorHandler error={this.state.error} />;
+    }
+
+    return this.props.children;
+  }
+}

package/src/Components/ExcelExportButton.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {useExporter} from 'react-admin-base';
+import {Button, Col} from "reactstrap";
+
+export default function ExcelExportButton({name, header, params, map, extra}) {
+    const [ handleExport, loading ] = useExporter(header, params, map, extra);
+
+    return <Col><Button className="w-100 d-block" type="button" size="lg" color="success" outline disabled={!!loading} onClick={() => handleExport(name)}>
+        {loading ? <i className="fas fa-spin fa-spinner"/> : <i className="fas fa-file-excel"/>}
+    </Button></Col>
+}

package/src/Components/ExternalLoginButton.tsx

@@ -0,0 +1,14 @@
+
+import React from 'react';
+import { useApp, useAuth, useLogin } from 'react-admin-base';
+import { FormattedMessage } from 'react-intl';
+
+export default function ExternalLoginButton({ id, icon, name, url }) {
+  const { endpoint } = useApp();
+  const [{ client_id }] = useAuth();
+  const { login } = useLogin();
+
+  return <a className={"btn btn-primary d-block w-100 btn-social-"+id} href={endpoint + url + '?client_id=' + client_id + '&callback_url=' + encodeURIComponent(window.location.origin + login)}>
+      <i className={"fab fa-" + (icon || id) + " me-2"} /> <FormattedMessage id="SIGN_IN_USING" values={{ provider: <b>{name}</b> }} />
+  </a>;
+}

package/src/Components/FilePickerCore.tsx

@@ -0,0 +1,87 @@
+
+import React, { useCallback } from 'react';
+import prettysize from 'prettysize';
+import {Button} from "reactstrap";
+import { useApp, useFilePicker, usePreviewComponent } from "react-admin-base";
+import {FormattedMessage} from "react-intl";
+
+var photo_ext = ["png", "jpg", "jpeg", "svg"];
+
+function is_photo(name) {
+  return photo_ext.indexOf(name.split('.')[1]) !== -1;
+}
+
+function is_absolute(url) {
+    if (url.indexOf("blob:") === 0)
+        return false;
+
+    var pat = /^https?:\/\//i;
+    return !pat.test(url);
+}
+
+export function Relative({ children }) {
+    const app = useApp();
+
+    if (!children)
+        return null;
+
+    const { src, href } = children.props;
+
+    return React.cloneElement(children, {
+        src: src && (is_absolute(src) ? app.endpoint.replace(/\/$/, "") + src : src),
+        href: href && (is_absolute(href) ? app.endpoint.replace(/\/$/, "") + href : href)
+    });
+}
+
+export function Preview({ value }) {
+    var name = value.$name;
+    var src = value.$blob_url || value.$src;
+
+    if (is_photo(name)) {
+        return <div className="mt-2">
+            <Relative>
+                <img src={src} style={{ maxHeight: '150px', maxWidth: '100%' }} alt={name} />
+            </Relative>
+        </div>;
+    }
+    
+    return null;
+}
+
+export default function FilePickerCore({ disabled, className, accepts, value, onNotify, children, transform } : { disabled?: any, className?: any, accepts?: any, value?:any, onNotify?:any, children?:any, transform?:any }) {
+    const [ uc, cancel, pick ] = useFilePicker(value, onNotify);
+    const CustomPreview = usePreviewComponent() || Preview;
+
+    const chooseFile = useCallback(function(e) {
+        e.preventDefault();
+        pick(accepts, transform);
+    }, [pick, accepts, transform]);
+
+    if(uc.$state === 1) { // dosya sec
+        return <div className={className}>
+            <Button color="primary" size="sm" onClick={chooseFile} disabled={disabled}><i className="fa fa-upload" /> <FormattedMessage id="CHOOSE_FILE" /></Button>
+            { children && children(null) }
+        </div>;
+    } else if(uc.$state === 2) { // yukleniyor
+        return <div className={className}>
+            <Button color="danger" outline size="sm" onClick={cancel}><i className="fa fa-times-circle" /></Button>
+            {' '}
+            <Button disabled size="sm" outline color="dark">
+                <i className="fa fa-spinner fa-spin" />
+                <span style={{ width: '35px', display: 'inline-block' }}>{ Math.round(uc.$pr * 1000) / 10 }%</span>
+                { uc.name }
+            </Button>
+            { children && children(uc) }
+        </div>;
+    } else if(uc.$state === 3) { // yuklendi
+        return <div className={className}>
+            { !disabled && <Button color="danger" outline size="sm" onClick={cancel}><i className="fa fa-trash" /></Button> }
+            &nbsp;<Relative><a href={uc.$src} target="_blank" className="btn btn-sm btn-outline-primary"><i className="fa fa-download" /> { uc.name }</a></Relative>
+            <span>&nbsp;({ prettysize(uc.$size) })</span>
+            { <CustomPreview value={uc} /> }
+            { children && children(uc) }
+        </div>;
+    }
+
+    return null;
+}