History

AlexeySafronov febf172875 Merge branch 'master' into hotfix/v1.1.1 # Conflicts: # lerna.json # packages/asc-web-common/package.json # packages/asc-web-components/avatar-editor/index.js # packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js # packages/asc-web-components/main-button/index.js # packages/asc-web-components/package.json # packages/browserslist-config-asc/package.json # packages/debug-info/package.json # products/ASC.CRM/Client/package.json # products/ASC.Calendar/Client/package.json # products/ASC.Files/Client/package.json # products/ASC.Files/Client/src/HOCs/withFileActions.js # products/ASC.Files/Client/src/components/dialogs/DeleteDialog/index.js # products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js # products/ASC.Files/Server/DocStore # products/ASC.Mail/Client/package.json # products/ASC.People/Client/package.json # products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js # products/ASC.Projects/Client/package.json # web/ASC.Web.Client/package.json # web/ASC.Web.Editor/package.json # web/ASC.Web.Editor/src/Editor.jsx # web/ASC.Web.Login/package.json		2021-12-28 13:35:02 +03:00
..
index.js	Merge branch 'master' into hotfix/v1.1.1	2021-12-28 13:35:02 +03:00
modal-dialog.stories.js	Web: Components: added stories (ModalDialog, MainButton, Loader, Link, LinkWithDropDown, Label, IconButton),fix HelpButton, Heading stories	2021-03-08 23:18:45 +03:00
modal-dialog.test.js	Web: Components: changed component hierarchy	2021-02-24 17:42:09 +03:00
README.md	Web: Files: fixed styles after Cherry picking.	2021-11-19 16:58:31 +03:00
styled-modal-dialog.js	Web: Components: fixed CloseButton styles	2021-11-29 11:58:54 +03:00

README.md

ModalDialog

ModalDialog is used for displaying modal dialogs

Usage

import ModalDialog from "@appserver/components/modal-dialog";

<ModalDialog visible={false} scale={false} displayType="auto" zIndex={310}>
  <ModalDialog.Header>"Change password"</ModalDialog.Header>
  <ModalDialog.Body>
    <div>
      Send the password change instruction to the{" "}
      <a href="mailto:asc@story.book">asc@story.book</a> email address
    </div>
  </ModalDialog.Body>
  <ModalDialog.Footer>
    <Button
      label="Send"
      size="big"
      primary={true}
      onClick={() => alert("It's works!")}
    />
  </ModalDialog.Footer>
</ModalDialog>

Properties

Props	Type	Required	Values	Default	Description
`visible`	`bool`	-	-	-	Display dialog or not
`displayType`	`oneOf`	-	`auto`, `modal`, `aside`	`auto`	Display type
`scale`	`bool`	-	-	-	Indicates the side panel has scale
`onClose`	`func`	-	-	-	Will be triggered when a close button is clicked
`zIndex`	`number`	-	-	`310`	CSS z-index
`modalBodyPadding`	`string`	-	-	`16px 0`	CSS padding props for modal body section
`asideBodyPadding`	`string`	-	-	`16px 0`	CSS padding props for aside body section