react-admin-base-bootstrap 0.5.0

package/src/Components/GoToTop.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {FormattedMessage} from "react-intl";
+
+export default class GoToTop extends React.Component {
+
+    state = {show: false};
+
+    scrollTop(e) {
+        e.preventDefault();
+
+        window.scrollTo(0, 0);
+    }
+
+    handleScroll(e) {
+        var newShow = window.scrollY > 100;
+        if (newShow !== this.state.show) {
+            this.setState({show: newShow});
+        }
+    }
+
+    componentDidMount() {
+        this.handleScroll = this.handleScroll.bind(this);
+        window.addEventListener('scroll', this.handleScroll);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('scroll', this.handleScroll);
+    }
+
+    render() {
+        if (!this.state.show) {
+            return null;
+        }
+
+        return <div onClick={this.scrollTop} className="back-btn-shown">
+            <span><FormattedMessage id="GO_TOP" /></span>
+            <i className="fa fa-angle-up" title="Go top"/>
+        </div>;
+    }
+}
+

package/src/Components/ImagePicker.tsx

@@ -0,0 +1,26 @@
+
+import React, { useCallback } from 'react';
+import SingleFilePicker from './SingleFilePicker';
+
+type ImagePickerProps = {
+  width: number;
+  height: number;
+  type: string;
+  exact?: boolean;
+};
+
+export default function ImagePicker(props) {
+  const { width, height, type, exact } = props;
+
+  const transform = useCallback(async function(file) {
+    const modalCropper = await import('modal-cropper');
+    const modalCropperFnc = modalCropper.default || modalCropper;
+    return await modalCropperFnc(file, width, height, type, exact);
+  }, [ width, height, type, exact ]);
+
+  return <SingleFilePicker
+    {...props}
+    transform={transform}
+    accepts="image/png, image/jpeg"
+  />;
+}

package/src/Components/LanguageProvider.tsx

@@ -0,0 +1,61 @@
+
+import React, { useContext, useReducer, useMemo, useState } from 'react';
+import { useApp } from 'react-admin-base';
+import { IntlProvider } from 'react-intl';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+import enMessages from '../i18n/en.json';
+import deMessages from '../i18n/de.json';
+import trMessages from '../i18n/tr.json';
+
+const _languages = {
+  'en': enMessages,
+  'de': deMessages,
+  'tr': trMessages
+};
+
+const LanguageContext = React.createContext(null as any);
+
+export function useLanguage() {
+  return useContext(LanguageContext);
+}
+
+export default function LanguageProvider({ defaultLanguage, languages, children }) {
+  const app = useApp();
+
+  const preferredLanguage = (navigator.languages && navigator.languages[0]) ||
+    navigator.language;
+
+  const [ lang, setLang ] = useReducer((oldValue, newValue) => {
+    localStorage.setItem(app.id + "_" + 'language', newValue);
+    return newValue;
+  }, localStorage.getItem(app.id + "_" + 'language') || null);
+
+  const activeLanguageKey = (!!lang && languages[lang] && lang) || (languages[preferredLanguage] && preferredLanguage) || (languages[defaultLanguage] && defaultLanguage);
+  const activeLanguage = languages[activeLanguageKey];
+
+  const messages = useMemo(() => ({ ...(_languages[activeLanguageKey] || _languages.en), ...activeLanguage.messages }), [activeLanguage])
+  const value = useMemo(() => [ activeLanguage, languages, setLang], [ activeLanguage, languages, setLang]);
+
+  return <IntlProvider locale={activeLanguageKey} messages={messages}>
+    <LanguageContext.Provider value={value}>
+      { children }
+    </LanguageContext.Provider>
+  </IntlProvider>;
+}
+
+export function LanguageSwitcher() {
+  const [show, setShow] = useState(false);
+  const [ activeLang, languages, setLanguage ] = useLanguage();
+
+  return <Dropdown isOpen={show} toggle={() => setShow(!show)}>
+      <DropdownToggle className="nav-flag dropdown-toggle show" nav caret>
+          <img width="20" src={ activeLang.icon } alt={activeLang.name} />
+      </DropdownToggle>
+      <DropdownMenu end>
+          { Object.entries(languages).map(([key, value] : any) => <DropdownItem key={key} active={activeLang === value} onClick={() => setLanguage(key)}>
+              <img width="20" src={value.icon} alt={value.name} /> <span className="align-middle">{ value.name }</span>
+          </DropdownItem>) }
+      </DropdownMenu>
+  </Dropdown>;
+}

package/src/Components/LoadingButton.tsx

@@ -0,0 +1,7 @@
+
+import React from 'react';
+import { Button } from 'reactstrap';
+
+export default function LoadingButton(props) {
+  return props.loading ? <Button {...props} loading={undefined} disabled={true}><i className="fas fa-spin fa-circle-notch" /></Button> : <Button {...props} loading={undefined} />;
+}

package/src/Components/MenuState.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useReducer } from 'react';
+import { useMediaQuery } from 'react-responsive';
+import { useHistory } from "react-router-dom";
+
+export function useIsMobile() {
+	return useMediaQuery({ query: '(max-width: 992px)' });
+}
+
+export function useMenuState() {
+	const isMobile = useIsMobile();
+	const state = useReducer(a => !a, !isMobile);
+	const [ isOpen, toggleOpen ] = state;
+
+	const history = useHistory();
+	useEffect(function() {
+		if (isMobile && isOpen) {
+			return history.listen(function() {
+			   toggleOpen();
+			});
+		}
+	}, [isMobile, isOpen, history]);
+
+	return state;
+}

package/src/Components/MultiFilePicker.tsx

@@ -0,0 +1,43 @@
+
+import React, { useMemo } from 'react';
+import { useMultiFilePicker } from "react-admin-base";
+import { FormattedMessage } from "react-intl";
+import { Button } from "reactstrap";
+import FilePickerCore from "./FilePickerCore";
+
+type MultiFilePickerProps = {
+    disabled?: boolean;
+    className?: string;
+    accepts?: string;
+    value: any;
+    onChange: (value: any) => void;
+    children?: (value: any) => React.ReactNode;
+}
+
+export default function MultiFilePicker({ disabled, className, accepts, value, onChange, children }: MultiFilePickerProps) {
+    const uniqueIdList = useMemo(() => [] as any, []);
+    const [ controllers, _onChange, chooseFile ] = useMultiFilePicker(value, onChange);
+
+    function getConstantUniqueIdFor(element) {
+        if (uniqueIdList.indexOf(element) < 0) {
+            uniqueIdList.push(element);
+        }
+        return uniqueIdList.indexOf(element);
+    }
+
+    return <div>
+        <Button color="primary" size="sm" disabled={!!disabled} outline onClick={chooseFile.bind(null, accepts)}>
+            <i className="fa fa-upload" /> <FormattedMessage id="CHOOSE_FILE" />
+        </Button>
+        { children && children(null) }
+
+        { controllers.map((a,i) => <FilePickerCore
+            key={getConstantUniqueIdFor(a)}
+            disabled={!!disabled}
+            className="mt-2"
+            accepts={accepts}
+            value={a}
+            onNotify={_onChange.bind(null, a)}
+        >{children}</FilePickerCore>) }
+    </div>;
+}

package/src/Components/SingleFilePicker.tsx

@@ -0,0 +1,40 @@
+
+import React, { useCallback, useMemo } from 'react';
+import { useUploadController } from "react-admin-base";
+import FilePickerCore from "./FilePickerCore";
+
+type SingleFilePickerProps = {
+    disabled?: boolean;
+    className?: string;
+    accepts?: string;
+    value: any;
+    onChange: (value: any) => void;
+    children?: (value: any) => React.ReactNode;
+    transform?: any;
+}
+
+export default function SingleFilePicker({ disabled, className, accepts, value, onChange, transform, children }: SingleFilePickerProps) {
+    const uploadController = useUploadController();
+    const controller = useMemo(() => uploadController(value), [uploadController, value]);
+
+    const _onChange = useCallback(function() {
+        if (controller.$state === 3) {
+            if (value !== controller) {
+                onChange(controller);
+            }
+        } else {
+            if (!!value) {
+                onChange(null);
+            }
+        }
+    }, [ value, controller, onChange ]);
+ 
+    return <FilePickerCore
+        disabled={!!disabled}
+        className={className}
+        accepts={accepts}
+        value={controller}
+        onNotify={_onChange}
+        transform={transform}
+    >{children}</FilePickerCore>;
+}

package/src/Components/TopProgressBar.tsx

@@ -0,0 +1,13 @@
+import NProgress from 'nprogress';
+import { useEffect } from 'react';
+import { useAuth } from "react-admin-base";
+
+export default function TopProgressBar({ children }) {
+	const [ api ] = useAuth();
+
+	useEffect(function() {
+		return api.set_hook(() => NProgress.start(), () => NProgress.done());
+	}, [api.set_hook]);
+
+	return children;
+}

package/src/Components/Validator.tsx

@@ -0,0 +1,55 @@
+
+import React from 'react';
+import { useValidate, useValidator } from 'react-admin-base';
+import { FormattedMessage } from "react-intl";
+import { Alert, FormFeedback } from "reactstrap";
+
+function ValidatorCore(name: string, value: any, type: any, children: any) {
+    const error = useValidate(name || '', value, type);
+    
+    return <>
+        {(error 
+            && React.cloneElement(children, { invalid: !!error, className: (children.props.className || '') + (!!error ? ' is-invalid' : '') })) || children}
+        {error && <FormFeedback className="d-block">{error}</FormFeedback>}
+    </>;
+}
+
+type ValidatorProps = {
+  name: string;
+  type: any;
+  children: any;
+};
+
+export function Validator({ name, type, children }: ValidatorProps) {
+    return ValidatorCore(name, children.props.value || children.props.checked, type, children);
+}
+
+type ValueValidatorProps = {
+  name: string;
+  type: any;
+  value: any;
+  children: any;
+};
+
+export function ValueValidator({ name, value, type, children }: ValueValidatorProps) {
+    return ValidatorCore(name, value, type, children);
+}
+
+export function ValidationErrors() {
+  const validator = useValidator();
+
+  if (validator.messagesShown) {
+    let errors = Object.values(validator.getErrorMessages()).filter(a => !!a);
+    if (!!errors.length) {
+        return <Alert color="danger" toggle={() => validator.hideMessages()}>
+            <p><i className="fas fa-exclamation-circle" /> <b><FormattedMessage id="VALIDATION.ERROR" /></b></p>
+            <ol className="mb-0">
+            { errors.map(value => <li>{ value as any }</li>) }
+            </ol>
+        </Alert>;
+    }
+  }
+
+  return null;
+}
+

package/src/i18n/de.json

@@ -0,0 +1,34 @@
+{
+  "ENTITY.SAVE": "Speichern",
+  "ENTITY.CANCEL": "Abbrechen",
+  "USERNAME": "Benutzername",
+  "PASSWORD": "Passwort",
+  "FORGOT_PASSWORD": "Ich habe mein Passwort vergessen",
+  "LOGIN": "Einloggen",
+  "LOGIN_HEAD": "Anmeldebereich",
+  "SUBMIT": "Absenden",
+  "SIGN_IN_USING": "Mit anmelden",
+  "RESET_PASSWORD": "Passwort zurücksetzen",
+  "EMAIL": "Email",
+  "AUTH_CODE": "Autorisierungscode",
+  "ENTER_AUTH_CODE":  "Bitte geben Sie den Bestätigungscode ein, an den wir gesendet haben",
+  "CHANGE_EMAIL":  "An eine neue E-Mail-Adresse gesendet.",
+  "PASSWORD_REPEAT": "Passwort (wieder)",
+  "VALIDATION.ERROR": "Entität hat folgende Fehler:",
+  "ENTITY.SAVED": "Änderungen werden gespeichert.",
+  "CHOOSE_FILE": "Datei aussuchen",
+  "OR": "ODER",
+  "NEW_ACCOUNT": "Registrieren Sie ein neues Konto",
+  "GO_TOP": "Oben",
+  "INVALID_PASSWORD": "Ungültiger Benutzername oder Passwort",
+  "ALL": "Alles",
+  "SEARCH": "Suche...",
+  "NO_DATA_IS_AVAILABLE": "Es sind keine Daten verfügbar.",
+  "SELECT": "Auswählen",
+  "BACK": "Zurück",
+  "ACTIONS.DELETE.TITLE": "Bist du sicher?",
+  "ACTIONS.DELETE.TEXT": "Diese Aktion ist nicht umkehrbar!",
+  "ACTIONS.DELETE.CONFIRM": "Ja, löschen!",
+  "PLEASE_WAIT": "Warten Sie mal.",
+  "AUTHORIZATION_CODE": "Zugangscode"
+}

package/src/i18n/en.json

@@ -0,0 +1,35 @@
+{
+  "ENTITY.SAVE": "Save",
+  "ENTITY.CANCEL": "Cancel",
+  "USERNAME": "Username",
+  "PASSWORD": "Password",
+  "FORGOT_PASSWORD": "I forgot my password",
+  "LOGIN": "Login",
+  "LOGIN_HEAD": "Login Area",
+  "SUBMIT": "Submit",
+  "SIGN_IN_USING": "Sign in using {provider}",
+  "RESET_PASSWORD": "Reset Password",
+  "EMAIL": "Email",
+  "AUTH_CODE": "Authorization Code",
+  "ENTER_AUTH_CODE": "Please enter the verification code that we sent to {email}.",
+  "CHANGE_EMAIL": "Not your e-mail? <1>Sent to a new email address</1>.",
+  "PASSWORD_REPEAT": "Password (again)",
+  "VALIDATION.ERROR": "Entity has following errors:",
+  "ENTITY.SAVED": "Changes are saved.",
+  "CHOOSE_FILE": "Choose file",
+  "OR": "OR",
+  "NEW_ACCOUNT": "Register a new account",
+  "GO_TOP": "Go Top",
+  "CREATE_VALUE": "Create \"{text}\"",
+  "INVALID_PASSWORD": "Invalid username or password",
+  "ALL": "All",
+  "SEARCH": "Search...",
+  "NO_DATA_IS_AVAILABLE": "No data is available.",
+  "SELECT": "Please Select",
+  "BACK": "Back",
+  "ACTIONS.DELETE.TITLE": "Are you sure?",
+  "ACTIONS.DELETE.TEXT": "You won't be able to revert this!",
+  "ACTIONS.DELETE.CONFIRM": "Yes, delete it!",
+  "PLEASE_WAIT": "Please wait.",
+  "AUTHORIZATION_CODE": "Authorization Code"
+}

package/src/i18n/tr.json

@@ -0,0 +1,35 @@
+{
+  "ENTITY.SAVE": "Kaydet",
+  "ENTITY.CANCEL": "İptal",
+  "USERNAME": "Kullanıcı Adı",
+  "PASSWORD": "Şifre",
+  "FORGOT_PASSWORD": "Şifremi unuttum",
+  "SUBMIT": "Gönder",
+  "LOGIN": "Giriş",
+  "LOGIN_HEAD": "Oturum Açma Alanı",
+  "SIGN_IN_USING":  "Kullanarak oturum açın",
+  "RESET_PASSWORD": "Şifreyi Sıfırla",
+  "EMAIL": "E-Posta",
+  "AUTH_CODE":  "Yetki Kodu",
+  "ENTER_AUTH_CODE": "Lütfen gönderdiğimiz doğrulama kodunu giriniz.",
+  "CHANGE_EMAIL": "Yeni bir e-posta adresine gönderildi.",
+  "PASSWORD_REPEAT": "Şifre (tekrar)",
+  "VALIDATION.ERROR":  "Aşağıdaki hatalar mevcut:",
+  "ENTITY.SAVED": "Değişiklikler kaydedildi.",
+  "CHOOSE_FILE": "Dosya Seçin",
+  "OR": "Veya",
+  "NEW_ACCOUNT": "Yeni bir hesap açın",
+  "GO_TOP": "Yukarı",
+  "CREATE_VALUE": "Oluştur \"{text}\"",
+  "INVALID_PASSWORD": "Kullanıcı adı veya şifre hatalı",
+  "ALL": "Hepsi",
+  "SEARCH": "Arama...",
+  "NO_DATA_IS_AVAILABLE": "Veri bulunmamaktadır.",
+  "SELECT": "Seçiniz",
+  "BACK": "Geri",
+  "ACTIONS.DELETE.TITLE": "Emin misiniz?",
+  "ACTIONS.DELETE.TEXT": "Bu işlem geri alınamaz!",
+  "ACTIONS.DELETE.CONFIRM": "Evet, sil!",
+  "PLEASE_WAIT": "Lütfen bekleyiniz.",
+  "AUTHORIZATION_CODE": "Yetki Kodu"
+}

package/src/index.ts

@@ -0,0 +1,42 @@
+
+import BootstrapTable, { Actions, ActionsColumn, Column, default as BootstrapDataTable, IdColumn, useDataTableContext } from './Components/BootstrapDataTable';
+import CRUD, { CRUDActions, ModalEntityEditor } from './Components/CRUD';
+import EntityEditor from "./Components/EntityEditor";
+import ExcelExportButton from './Components/ExcelExportButton';
+import ExternalLoginButton from './Components/ExternalLoginButton';
+import GoToTop from "./Components/GoToTop";
+import { ValidationErrors, Validator, ValueValidator } from "./Components/Validator";
+import ApiSelect from "./Components/ApiSelect";
+import { Preview, Relative } from './Components/FilePickerCore';
+import ImagePicker from './Components/ImagePicker';
+import LoadingButton from './Components/LoadingButton';
+import MultiFilePicker from "./Components/MultiFilePicker";
+import SingleFilePicker from "./Components/SingleFilePicker";
+import LanguageProvider, { LanguageSwitcher, useLanguage } from "./Components/LanguageProvider";
+import CheckBox from './Components/CheckBox';
+import ErrorBoundary from './Components/ErrorBoundary';
+import { useMenuState, useIsMobile } from './Components/MenuState';
+import TopProgressBar from './Components/TopProgressBar';
+
+export {
+    useIsMobile, useMenuState,
+    TopProgressBar,
+    CRUD, ModalEntityEditor, CRUDActions,
+    Relative,
+    ApiSelect,
+    Preview,
+    ExcelExportButton,
+    ExternalLoginButton,
+    SingleFilePicker,
+    MultiFilePicker,
+    ImagePicker,
+    BootstrapTable,
+    EntityEditor,
+    GoToTop,
+    Validator, ValueValidator, ValidationErrors,
+    LoadingButton,
+    BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext,
+    LanguageProvider, useLanguage, LanguageSwitcher,
+    ErrorBoundary,
+    CheckBox
+};

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+      "outDir": "lib/esm",
+      "module": "esnext",
+      "target": "es6",
+      "lib": ["dom", "esnext.intl", "es2020"],
+      "jsx": "react",
+      "declaration": true,
+      "moduleResolution": "node",
+      "noUnusedLocals": false,
+      "noUnusedParameters": false,
+      "esModuleInterop": true,
+      "noImplicitReturns": false,
+      "noImplicitThis": true,
+      "noImplicitAny": false,
+      "strictNullChecks": true,
+      "suppressImplicitAnyIndexErrors": true,
+      "allowSyntheticDefaultImports": true,
+      "resolveJsonModule": true,
+      "strict": false
+    },
+    "include": ["src"]
+  }