react-admin-base-bootstrap 0.5.3 → 0.5.4

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 (11) 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 +2 -2
  4. package/lib/esm/Components/CRUD.js +12 -9
  5. package/lib/esm/Components/EntityEditor.js +1 -1
  6. package/package.json +2 -2
  7. package/src/Components/ApiSelect.tsx +2 -0
  8. package/src/Components/BootstrapDataTable.tsx +1 -1
  9. package/src/Components/CRUD.tsx +14 -8
  10. package/src/Components/EntityEditor.tsx +1 -1
  11. 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
@@ -128,8 +128,8 @@ export default function BootstrapTable({ url, bordered, noStrip, defaultParams,
128
128
  children[2],
129
129
  React.createElement(Col, { md: "3", className: "ms-auto" },
130
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" },
131
+ data === null ? React.createElement(Alert, { className: "text-center mb-0 mx-3 ", color: "warning" },
132
+ React.createElement("i", { className: "fas fa-spinner fa-lg fa-spin" })) : !data.length ? React.createElement(Alert, { className: "text-center mx-3", color: "danger" },
133
133
  React.createElement("i", { className: "far fa-times-circle fa-lg" }),
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" },
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.5.4",
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",
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
@@ -137,7 +137,7 @@ export default function BootstrapTable({url, bordered, noStrip, defaultParams, a
137
137
  </Col>
138
138
  </Row>
139
139
  </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">
140
+ {data === null ? <Alert className="text-center mb-0 mx-3 " color="warning"><i className="fas fa-spinner fa-lg fa-spin"></i></Alert> : !data.length ? <Alert className="text-center mx-3" color="danger">
141
141
  <i className="far fa-times-circle fa-lg"></i> <FormattedMessage id="NO_DATA_IS_AVAILABLE"/>
142
142
  </Alert> : <Table hover bordered={bordered} striped={!noStrip} responsive size="md" className="mb-0 dataTable">
143
143
  {children[0]}
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