react-admin-base-bootstrap 0.5.3 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/assets/main.css +34 -0
  2. package/lib/esm/Components/ApiSelect.js +1 -1
  3. package/lib/esm/Components/BootstrapDataTable.js +6 -6
  4. package/lib/esm/Components/BootstrapPagination.js +4 -4
  5. package/lib/esm/Components/CRUD.js +12 -9
  6. package/lib/esm/Components/EntityEditor.js +1 -1
  7. package/package.json +3 -3
  8. package/src/Components/ApiSelect.tsx +2 -0
  9. package/src/Components/BootstrapDataTable.tsx +4 -5
  10. package/src/Components/BootstrapPagination.tsx +4 -4
  11. package/src/Components/CRUD.tsx +14 -8
  12. package/src/Components/EntityEditor.tsx +1 -1
  13. package/src/Components/MenuState.tsx +1 -0
package/assets/main.css CHANGED
@@ -61,3 +61,37 @@
61
61
  .tingle-modal-box__footer {
62
62
  text-align: center;
63
63
  }
64
+
65
+ .back-btn-shown {
66
+ position: fixed;
67
+ bottom: 10px;
68
+ right: 10px;
69
+ width: 30px;
70
+ height: 30px;
71
+ background-color: black;
72
+ border: 1px solid white;
73
+ box-shadow: 0 10px 30px rgba(82, 85, 90, 0.2);
74
+ color: white;
75
+ text-align: center;
76
+ cursor: pointer;
77
+ line-height: 25px;
78
+ font-size: 20px;
79
+ }
80
+
81
+ .back-btn-shown span {
82
+ display: none;
83
+ }
84
+
85
+ .back-btn-shown:hover span {
86
+ position: absolute;
87
+ top: 0;
88
+ right: 35px;
89
+ width: 74px;
90
+ margin-left: -37px;
91
+ display: block;
92
+ background-color: black;
93
+ color: white;
94
+ font-size: 12px;
95
+ border: 1px solid black;
96
+ box-shadow: 0 10px 40px rgba(82, 85, 90, 0.2);
97
+ }
package/lib/esm/Components/ApiSelect.js CHANGED
@@ -78,5 +78,5 @@ export default function ApiSelect(props) {
78
78
  setIsMenuOpen(false);
79
79
  }, [setIsMenuOpen]);
80
80
  const Component = onCreateOption ? CreatableSelect : Select;
81
- return jsx(Component, Object.assign({}, 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) => row[nameKey || 'name']), getOptionValue: getOptionValue || ((row) => row[idKey || 'id']), isDisabled: !!disabled || creating, isClearable: true, isSearchable: true, placeholder: placeholder || intl.formatMessage({ id: 'SELECT' }), options: !options ? [] : ((filter && options.filter(filter)) || options), isMenuOpen: isMenuOpen, onMenuOpen: onMenuOpen, onMenuClose: onMenuClose }));
81
+ return jsx(Component, Object.assign({}, props, { className: 'react-select-container', classNamePrefix: "react-select", 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) => row[nameKey || 'name']), getOptionValue: getOptionValue || ((row) => row[idKey || 'id']), isDisabled: !!disabled || creating, isClearable: true, isSearchable: true, placeholder: placeholder || intl.formatMessage({ id: 'SELECT' }), options: !options ? [] : ((filter && options.filter(filter)) || options), isMenuOpen: isMenuOpen, onMenuOpen: onMenuOpen, onMenuClose: onMenuClose }));
82
82
  }
package/lib/esm/Components/BootstrapDataTable.js CHANGED
@@ -114,10 +114,10 @@ export default function BootstrapTable({ url, bordered, noStrip, defaultParams,
114
114
  React.createElement(CardHeader, null,
115
115
  React.createElement(Row, null,
116
116
  add && React.createElement(Col, { xs: "12", md: "2" },
117
- React.createElement(Link, { to: add, className: "btn btn-primary font-xl btn-lg d-block" },
117
+ React.createElement(Link, { to: add, className: "btn btn-primary font-xl d-block" },
118
118
  React.createElement("i", { className: "fa fa-plus" }))),
119
119
  React.createElement(Col, { md: "2" },
120
- React.createElement(Input, { type: "select", bsSize: "lg", value: itemPerPage.toString(), onChange: a => setItemPerPage(+a.currentTarget.value) },
120
+ React.createElement(Input, { type: "select", value: itemPerPage.toString(), onChange: a => setItemPerPage(+a.currentTarget.value) },
121
121
  React.createElement("option", { value: "1" }, "1"),
122
122
  React.createElement("option", { value: "20" }, "20"),
123
123
  React.createElement("option", { value: "50" }, "50"),
@@ -127,10 +127,10 @@ export default function BootstrapTable({ url, bordered, noStrip, defaultParams,
127
127
  React.createElement("option", { value: "-1" }, intl.formatMessage({ id: "ALL" })))),
128
128
  children[2],
129
129
  React.createElement(Col, { md: "3", className: "ms-auto" },
130
- React.createElement(Input, { placeholder: intl.formatMessage({ id: "SEARCH" }), type: "text", value: params.query || '', bsSize: "lg", onChange: e => setParams(Object.assign(Object.assign({}, params), { query: e.currentTarget.value })) })))),
131
- data === null ? React.createElement(Alert, { className: "text-center mb-0 ", color: "warning" },
132
- React.createElement("i", { className: "fas fa-spinner fa-lg fa-spin" })) : !data.length ? React.createElement(Alert, { className: "text-center", color: "danger" },
133
- React.createElement("i", { className: "far fa-times-circle fa-lg" }),
130
+ React.createElement(Input, { placeholder: intl.formatMessage({ id: "SEARCH" }), type: "text", value: params.query || '', onChange: e => setParams(Object.assign(Object.assign({}, params), { query: e.currentTarget.value })) })))),
131
+ data === null ? React.createElement(Alert, { className: "text-center mb-0 mx-3 ", color: "warning" },
132
+ React.createElement("i", { className: "fas fa-spinner fa-spin" })) : !data.length ? React.createElement(Alert, { className: "text-center mx-3", color: "danger" },
133
+ React.createElement("i", { className: "far fa-times-circle" }),
134
134
  " ",
135
135
  React.createElement(FormattedMessage, { id: "NO_DATA_IS_AVAILABLE" })) : React.createElement(Table, { hover: true, bordered: bordered, striped: !noStrip, responsive: true, size: "md", className: "mb-0 dataTable" },
136
136
  children[0],
package/lib/esm/Components/BootstrapPagination.js CHANGED
@@ -6,8 +6,8 @@ export default function BootstrapPagination({ className, currentPage, pageCount,
6
6
  return null;
7
7
  return React.createElement(Pagination, { listClassName: "mb-0", className: className },
8
8
  React.createElement(PaginatorCore, { activePage: currentPage, pageCount: pageCount, showPages: 15, prevPage: index => React.createElement(PaginationItem, { onClick: () => onPageChange(index) },
9
- React.createElement(PaginationLink, { previous: true, tag: "button" }, "\u00AB")), page: index => React.createElement(PaginationItem, { key: index, active: currentPage === index },
10
- React.createElement(PaginationLink, { tag: "button", onClick: () => onPageChange(index) }, index)), nextPage: index => React.createElement(PaginationItem, { onClick: () => onPageChange(index) },
11
- React.createElement(PaginationLink, { next: true, tag: "button" }, "\u00BB")), dots: index => React.createElement(PaginationItem, { onClick: () => onPageChange(index), active: currentPage === index },
12
- React.createElement(PaginationLink, { tag: "button" }, index)) }));
9
+ React.createElement(PaginationLink, { previous: true, tag: "button", type: "button" }, "\u00AB")), page: index => React.createElement(PaginationItem, { key: index, active: currentPage === index },
10
+ React.createElement(PaginationLink, { tag: "button", type: "button", onClick: () => onPageChange(index) }, index)), nextPage: index => React.createElement(PaginationItem, { onClick: () => onPageChange(index) },
11
+ React.createElement(PaginationLink, { next: true, tag: "button", type: "button" }, "\u00BB")), dots: index => React.createElement(PaginationItem, { onClick: () => onPageChange(index), active: currentPage === index },
12
+ React.createElement(PaginationLink, { tag: "button", type: "button" }, index)) }));
13
13
  }
package/lib/esm/Components/CRUD.js CHANGED
@@ -11,7 +11,7 @@ import React, { useCallback, useContext, useRef, useState } from 'react';
11
11
  import { ValidatorProvider } from "react-admin-base";
12
12
  import { FormattedMessage } from 'react-intl';
13
13
  import { Redirect, Route } from 'react-router-dom';
14
- import { Alert, Button, Form, Modal, ModalFooter, ModalHeader } from "reactstrap";
14
+ import { Alert, Button, Col, Form, Modal, ModalFooter, ModalHeader, Row } from "reactstrap";
15
15
  import LoadingButton from '../Components/LoadingButton';
16
16
  import BootstrapDataTable, { Actions } from './BootstrapDataTable';
17
17
  export function ModalEntityEditor({ entity, title, size, url, onReload, disabled, children }) {
@@ -56,14 +56,17 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
56
56
  React.createElement("fieldset", { disabled: !!loading || !!disabled }, children),
57
57
  React.createElement(ModalFooter, null,
58
58
  error && React.createElement(Alert, { color: "danger", toggle: () => setError(null), style: { display: 'block', width: '100%' } }, error),
59
- React.createElement(LoadingButton, { block: true, loading: loading, type: "submit", color: "primary" },
60
- React.createElement("i", { className: "fas fa-save" }),
61
- ' ',
62
- React.createElement(FormattedMessage, { id: "ENTITY.SAVE" })),
63
- React.createElement(Button, { block: true, outline: true, color: "danger", onClick: (e) => { e.preventDefault(); (url ? setOpen(false) : onReload(null)); } },
64
- React.createElement("i", { className: "fas fa-times-circle" }),
65
- ' ',
66
- React.createElement(FormattedMessage, { id: "ENTITY.CANCEL" })))))));
59
+ React.createElement(Row, { className: "w-100" },
60
+ React.createElement(Col, null,
61
+ React.createElement(LoadingButton, { block: true, loading: loading, type: "submit", color: "primary" },
62
+ React.createElement("i", { className: "fas fa-save" }),
63
+ ' ',
64
+ React.createElement(FormattedMessage, { id: "ENTITY.SAVE" }))),
65
+ React.createElement(Col, null,
66
+ React.createElement(Button, { block: true, outline: true, color: "danger", onClick: (e) => { e.preventDefault(); (url ? setOpen(false) : onReload(null)); } },
67
+ React.createElement("i", { className: "fas fa-times-circle" }),
68
+ ' ',
69
+ React.createElement(FormattedMessage, { id: "ENTITY.CANCEL" })))))))));
67
70
  }
68
71
  const UrlContext = React.createContext(null);
69
72
  export function CRUDActions({ id, edit, del, children }) {
package/lib/esm/Components/EntityEditor.js CHANGED
@@ -54,7 +54,7 @@ export default function EntityEditor({ entity, disabled, children, onSave, saveB
54
54
  React.createElement("fieldset", { disabled: !!loading || !!disabled }, children),
55
55
  React.createElement(ValidationErrors, null),
56
56
  savedAlert,
57
- React.createElement(LoadingButton, { className: saveButtonClassName || "col-md-12", loading: loading, type: "submit", color: "primary" },
57
+ React.createElement(LoadingButton, { className: saveButtonClassName || "col-md-12 mt-3", loading: loading, type: "submit", color: "primary" },
58
58
  saveButtonText || React.createElement(FormattedMessage, { id: "ENTITY.SAVE" }),
59
59
  " ",
60
60
  React.createElement("i", { className: "fas fa-save fa-lg" }))));
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "react-admin-base-bootstrap",
3
- "version": "0.5.3",
3
+ "version": "0.6.0",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
7
7
  "build": "tsc",
8
- "watch": "nodemon --exec npm run build"
8
+ "watch": "nodemon -e js,jsx,ts,tsx --exec npm run build"
9
9
  },
10
10
  "main": "lib/esm/index.js",
11
11
  "jsnext:main": "lib/esm/index.js",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@emotion/react": "^11.5.0",
35
- "@fortawesome/fontawesome-free": "^5.15.4",
35
+ "@fortawesome/fontawesome-free": "^6.1.1",
36
36
  "bootstrap": "^5.1.3",
37
37
  "file-dialog": "^0.0.8",
38
38
  "modal-cropper": "^1.2.3",
package/src/Components/ApiSelect.tsx CHANGED
@@ -102,6 +102,8 @@ export default function ApiSelect(props) {
102
102
 
103
103
  return <Component
104
104
  {...props}
105
+ className='react-select-container'
106
+ classNamePrefix="react-select"
105
107
  onCreateOption={(onCreateOption && handleCreateOption) || null}
106
108
  getNewOptionData={onCreateOption ? getNewOptionData ? getNewOptionData : (inputValue) =>( { [nameKey || 'name']: inputValue, __isNew__: true }) : null}
107
109
  inputValue={search}
package/src/Components/BootstrapDataTable.tsx CHANGED
@@ -114,9 +114,9 @@ export default function BootstrapTable({url, bordered, noStrip, defaultParams, a
114
114
  <DataContextProvider value={fetchData}>
115
115
  <CardHeader>
116
116
  <Row>
117
- {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>}
117
+ {add && <Col xs="12" md="2"><Link to={add} className="btn btn-primary font-xl d-block"><i className="fa fa-plus"/></Link></Col>}
118
118
  <Col md="2">
119
- <Input type="select" bsSize="lg" value={itemPerPage.toString()} onChange={a => setItemPerPage(+a.currentTarget.value)}>
119
+ <Input type="select" value={itemPerPage.toString()} onChange={a => setItemPerPage(+a.currentTarget.value)}>
120
120
  <option value="1">1</option>
121
121
  <option value="20">20</option>
122
122
  <option value="50">50</option>
@@ -131,14 +131,13 @@ export default function BootstrapTable({url, bordered, noStrip, defaultParams, a
131
131
  <Input
132
132
  placeholder={intl.formatMessage({id: "SEARCH"})} type="text"
133
133
  value={params.query || ''}
134
- bsSize="lg"
135
134
  onChange={e => setParams({...params, query: e.currentTarget.value})}
136
135
  />
137
136
  </Col>
138
137
  </Row>
139
138
  </CardHeader>
140
- {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">
141
- <i className="far fa-times-circle fa-lg"></i> <FormattedMessage id="NO_DATA_IS_AVAILABLE"/>
139
+ {data === null ? <Alert className="text-center mb-0 mx-3 " color="warning"><i className="fas fa-spinner fa-spin"></i></Alert> : !data.length ? <Alert className="text-center mx-3" color="danger">
140
+ <i className="far fa-times-circle"></i> <FormattedMessage id="NO_DATA_IS_AVAILABLE"/>
142
141
  </Alert> : <Table hover bordered={bordered} striped={!noStrip} responsive size="md" className="mb-0 dataTable">
143
142
  {children[0]}
144
143
  <tbody>
package/src/Components/BootstrapPagination.tsx CHANGED
@@ -19,17 +19,17 @@ export default function BootstrapPagination({ className, currentPage, pageCount,
19
19
  activePage={currentPage}
20
20
  pageCount={pageCount}
21
21
  showPages={15}
22
- prevPage={index => <PaginationItem onClick={() => onPageChange(index)}><PaginationLink previous tag="button">&laquo;</PaginationLink></PaginationItem>}
22
+ prevPage={index => <PaginationItem onClick={() => onPageChange(index)}><PaginationLink previous tag="button" type="button">&laquo;</PaginationLink></PaginationItem>}
23
23
 
24
24
  page={index => <PaginationItem key={index} active={currentPage === index}>
25
- <PaginationLink tag="button" onClick={() => onPageChange(index)}>{index}</PaginationLink>
25
+ <PaginationLink tag="button" type="button" onClick={() => onPageChange(index)}>{index}</PaginationLink>
26
26
  </PaginationItem>}
27
27
 
28
28
  nextPage={index => <PaginationItem
29
- onClick={() => onPageChange(index)}><PaginationLink next tag="button">&raquo;</PaginationLink></PaginationItem>}
29
+ onClick={() => onPageChange(index)}><PaginationLink next tag="button" type="button">&raquo;</PaginationLink></PaginationItem>}
30
30
 
31
31
  dots={index => <PaginationItem
32
- onClick={() => onPageChange(index)} active={currentPage === index}><PaginationLink tag="button">{index}</PaginationLink></PaginationItem>}
32
+ onClick={() => onPageChange(index)} active={currentPage === index}><PaginationLink tag="button" type="button">{index}</PaginationLink></PaginationItem>}
33
33
  />
34
34
  </Pagination>;
35
35
  }
package/src/Components/CRUD.tsx CHANGED
@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useRef, useState } from 'react';
2
2
  import { ValidatorProvider } from "react-admin-base";
3
3
  import { FormattedMessage } from 'react-intl';
4
4
  import { Redirect, Route } from 'react-router-dom';
5
- import { Alert, Button, Form, Modal, ModalFooter, ModalHeader } from "reactstrap";
5
+ import { Alert, Button, Col, Form, Modal, ModalFooter, ModalHeader, Row } from "reactstrap";
6
6
  import LoadingButton from '../Components/LoadingButton';
7
7
  import BootstrapDataTable, { Actions } from './BootstrapDataTable';
8
8
 
@@ -67,13 +67,19 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
67
67
  { children }
68
68
  </fieldset>
69
69
  <ModalFooter>
70
- { error && <Alert color="danger" toggle={() => setError(null)} style={{ display: 'block', width: '100%' }}>{ error }</Alert>}
71
- <LoadingButton block loading={loading} type="submit" color="primary">
72
- <i className="fas fa-save" />{' '}<FormattedMessage id="ENTITY.SAVE" />
73
- </LoadingButton>
74
- <Button block outline color="danger" onClick={(e) => { e.preventDefault(); (url ? setOpen(false) : onReload(null)); }}>
75
- <i className="fas fa-times-circle" />{' '}<FormattedMessage id="ENTITY.CANCEL" />
76
- </Button>
70
+ { error && <Alert color="danger" toggle={() => setError(null)} style={{ display: 'block', width: '100%' }}>{ error }</Alert>}
71
+ <Row className="w-100">
72
+ <Col>
73
+ <LoadingButton block loading={loading} type="submit" color="primary">
74
+ <i className="fas fa-save" />{' '}<FormattedMessage id="ENTITY.SAVE" />
75
+ </LoadingButton>
76
+ </Col>
77
+ <Col>
78
+ <Button block outline color="danger" onClick={(e) => { e.preventDefault(); (url ? setOpen(false) : onReload(null)); }}>
79
+ <i className="fas fa-times-circle" />{' '}<FormattedMessage id="ENTITY.CANCEL" />
80
+ </Button>
81
+ </Col>
82
+ </Row>
77
83
  </ModalFooter>
78
84
  </Form>
79
85
  </ValidatorProvider>
package/src/Components/EntityEditor.tsx CHANGED
@@ -61,7 +61,7 @@ export default function EntityEditor({ entity, disabled, children, onSave, saveB
61
61
  </fieldset>
62
62
  <ValidationErrors />
63
63
  { savedAlert }
64
- <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>
64
+ <LoadingButton className={saveButtonClassName || "col-md-12 mt-3"} loading={loading} type="submit" color="primary">{ saveButtonText || <FormattedMessage id="ENTITY.SAVE" /> } <i className="fas fa-save fa-lg"></i></LoadingButton>
65
65
  </Form>
66
66
  </ValidatorProvider>;
67
67
  }
package/src/Components/MenuState.tsx CHANGED
@@ -8,6 +8,7 @@ export function useIsMobile() {
8
8
 
9
9
  export function useMenuState() {
10
10
  const isMobile = useIsMobile();
11
+
11
12
  const state = useReducer(a => !a, !isMobile);
12
13
  const [ isOpen, toggleOpen ] = state;
13
14