@symply.io/basic-components 1.7.11 → 1.7.12-alpha.1
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.
- package/BasicModal/index.js +2 -2
- package/BasicModal/types.d.ts +2 -0
- package/README.md +21 -19
- package/package.json +1 -1
package/BasicModal/index.js
CHANGED
|
@@ -76,7 +76,7 @@ var Transition = forwardRef(function Transition(props, ref) {
|
|
|
76
76
|
});
|
|
77
77
|
function BasicModal(props, ref) {
|
|
78
78
|
var _this = this;
|
|
79
|
-
var desc = props.desc, title = props.title, loading = props.loading, buttons = props.buttons, _a = props.open, open = _a === void 0 ? false : _a, _b = props.noForm, noForm = _b === void 0 ? false : _b, children = props.children, disabled = props.disabled, _c = props.maxWidth, maxWidth = _c === void 0 ? "sm" : _c, _d = props.color, color = _d === void 0 ? "primary" : _d, _e = props.submitText, submitText = _e === void 0 ? "Save" : _e, _f = props.cancelText, cancelText = _f === void 0 ? "Cancel" : _f, _g = props.hideBottomButtons, hideBottomButtons = _g === void 0 ? false : _g, _h = props.showTopRightCloseButton, showTopRightCloseButton = _h === void 0 ? false : _h, onClose = props.onClose, onSubmit = props.onSubmit, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["desc", "title", "loading", "buttons", "open", "noForm", "children", "disabled", "maxWidth", "color", "submitText", "cancelText", "hideBottomButtons", "showTopRightCloseButton", "onClose", "onSubmit", "primaryColor", "secondaryColor"]);
|
|
79
|
+
var desc = props.desc, title = props.title, loading = props.loading, buttons = props.buttons, _a = props.open, open = _a === void 0 ? false : _a, _b = props.noForm, noForm = _b === void 0 ? false : _b, children = props.children, disabled = props.disabled, _c = props.maxWidth, maxWidth = _c === void 0 ? "sm" : _c, _d = props.color, color = _d === void 0 ? "primary" : _d, submitButtonColor = props.submitButtonColor, cancelButtonColor = props.cancelButtonColor, _e = props.submitText, submitText = _e === void 0 ? "Save" : _e, _f = props.cancelText, cancelText = _f === void 0 ? "Cancel" : _f, _g = props.hideBottomButtons, hideBottomButtons = _g === void 0 ? false : _g, _h = props.showTopRightCloseButton, showTopRightCloseButton = _h === void 0 ? false : _h, onClose = props.onClose, onSubmit = props.onSubmit, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["desc", "title", "loading", "buttons", "open", "noForm", "children", "disabled", "maxWidth", "color", "submitButtonColor", "cancelButtonColor", "submitText", "cancelText", "hideBottomButtons", "showTopRightCloseButton", "onClose", "onSubmit", "primaryColor", "secondaryColor"]);
|
|
80
80
|
if (!noForm && !buttons && !onSubmit) {
|
|
81
81
|
throw new Error("Error from @symply.io/basic-components/BasicModal: `onSubmit` is required when there are no custom buttons and `noForm` is false.");
|
|
82
82
|
}
|
|
@@ -121,7 +121,7 @@ function BasicModal(props, ref) {
|
|
|
121
121
|
? undefined
|
|
122
122
|
: function (ev) {
|
|
123
123
|
ev.preventDefault();
|
|
124
|
-
} }, { children: [desc && _jsx(DialogContentText, { children: desc }), Boolean(children) && cloneElement(children)] })) })), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md:
|
|
124
|
+
} }, { children: [desc && _jsx(DialogContentText, { children: desc }), Boolean(children) && cloneElement(children)] })) })), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: "auto" }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: cancelButtonColor || color, disabled: loading, fullWidth: fullScreen }, { children: cancelText })) })), _jsx(Grid, __assign({ item: true, xs: 12, md: "auto" }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : onFormSubmit, variant: "contained", color: submitButtonColor || color, disabled: loading || disabled, fullWidth: fullScreen }, { children: submitText })) }))] })) })) })))] })) })));
|
|
125
125
|
}
|
|
126
126
|
var BasicModalWithRefForward = forwardRef(BasicModal);
|
|
127
127
|
BasicModalWithRefForward.displayName = "BasicModal";
|
package/BasicModal/types.d.ts
CHANGED
|
@@ -10,6 +10,8 @@ export interface BasicModalProps extends DialogProps {
|
|
|
10
10
|
buttons?: ReactNode;
|
|
11
11
|
submitText?: string;
|
|
12
12
|
cancelText?: string;
|
|
13
|
+
submitButtonColor?: ButtonProps["color"];
|
|
14
|
+
cancelButtonColor?: ButtonProps["color"];
|
|
13
15
|
hideBottomButtons?: boolean;
|
|
14
16
|
noForm?: boolean;
|
|
15
17
|
onClose: () => unknown | Promise<unknown>;
|
package/README.md
CHANGED
|
@@ -190,25 +190,27 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
|
|
|
190
190
|
|
|
191
191
|
<h5>Props</h5>
|
|
192
192
|
|
|
193
|
-
| Name | Type | Default
|
|
194
|
-
| ----------------------- | ------------------------------------------------------------ |
|
|
195
|
-
|
|
|
196
|
-
|
|
|
197
|
-
|
|
|
198
|
-
|
|
|
199
|
-
|
|
|
200
|
-
|
|
|
201
|
-
|
|
|
202
|
-
|
|
|
203
|
-
|
|
|
204
|
-
|
|
|
205
|
-
|
|
|
206
|
-
|
|
|
207
|
-
|
|
|
208
|
-
|
|
|
209
|
-
|
|
|
210
|
-
|
|
|
211
|
-
|
|
|
193
|
+
| Name | Type | Default | Required | Description |
|
|
194
|
+
| ----------------------- | ------------------------------------------------------------ | ------------------- | -------- | ------------------------------------------------------------ |
|
|
195
|
+
| cancelButtonColor | 'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' \| undefined | same as the `color` | false | The color of the cancel button. |
|
|
196
|
+
| cancelText | string | 'Cancel' | false | The text of the cancel button. |
|
|
197
|
+
| children | node | | true | The content of the component. |
|
|
198
|
+
| color | 'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' \| undefined | 'primary' | false | The main color of the component. |
|
|
199
|
+
| desc | string | | false | Some descriptions you want to add, similar to a subtitle. |
|
|
200
|
+
| disabled | bool | false | false | If `true`, the submit button would be disabled. |
|
|
201
|
+
| hideBottomButtons | bool | false | false | If `true`, hide all action buttons at the bottom of the modal. |
|
|
202
|
+
| loading | bool | false | false | If `true`, the submit and cancel buttons would be disabled. |
|
|
203
|
+
| maxWidth | 'xs' \|'sm' \|'md' \|'lg' \|'xl' | 'sm' | false | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`. |
|
|
204
|
+
| noForm | bool | false | False | If `true`, put the content and action buttons out of a form element. |
|
|
205
|
+
| onClose | func | | true | Callback fired when the cancel button requests to be clicked.<br />**Signature:**<br/>`function() => void` |
|
|
206
|
+
| onSubmit | func | | true | Callback fired when the submit button requests to be clicked.<br />**Signature:**<br/>`function() => void` |
|
|
207
|
+
| open | bool | false | true | If `true`, the component is shown. |
|
|
208
|
+
| ref | ref | | false | You can get the form "onSubmit" function from the ref. |
|
|
209
|
+
| scroll | 'body' \| 'paper' | 'paper' | false | Determine the container for scrolling the dialog. |
|
|
210
|
+
| submitButtonColor | 'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' \| undefined | same as the `color` | false | The color of the submit button. |
|
|
211
|
+
| submitText | string | ‘Save’ | false | The text of the submit button. |
|
|
212
|
+
| showTopRightCloseButton | bool | false | false | If `true`, show a close icon button at the top right of the modal. |
|
|
213
|
+
| title | string | | true | The title of the component, to show at the top left. |
|
|
212
214
|
|
|
213
215
|
|
|
214
216
|
|