modal

README.md

Modal Component

A modal helps users perform a specific task related to the parent view without leaving the current context. A sheet is displayed as a kind of card that partially hides the underlying content. As long as the modal is open, the underlying content can not be accessed With a click outside the modal or on the (x) close button, the modal is closed

Features:

• A modal contain title close button and a any content below the title.
• Customizable text and content below the title
• Adjustable height og the modal based on the content inside it.
• On clicking close button or swipping down the modal it get closed.
• Support for improved user experience

How to use Modal Component

1. Add the necessary imports:

   import your.package.name.OCModal

   2. Use the required List Item in your Composable:

          val showBottomSheet = remember { mutableStateOf(true) }
      
      1) Modal Component
      
          OCModal(
              showBottomSheet = showBottomSheet.value,
              content = {
                  Box(
                      Modifier
                          .padding(it)
                          .fillMaxSize(),
                      contentAlignment = Alignment.Center) {
                      OCButton(
                          title = "Show Bottom Sheet",
                          buttonType = Secondary,
                          onClick = {
                              showBottomSheet.value = true
                          }
                      )
              }
              },
              sheetContentBelowTitle = {
                  OCText(
                      text = "Short Text in mutliple line and it take wrap height",
                      style = OCTheme.typography.caption1SemiBold.copy(
                          letterSpacing = OCTheme.dimensions.pointTwoFiveLetterSpacing,
                          textAlign = TextAlign.Start,
                      ),
                  )
              },
              showGrabber = true,
              title = "Title indicates that the following hexadecimal digits",
              onDismiss = {
                  showBottomSheet.value = false
              }
          )
      
      2) Search Modal Component
      
      OCSearchModal(
              showBottomSheet = showBottomSheet.value,
              content = {
                  Box(
                      Modifier
                          .padding(it)
                          .fillMaxSize(),
                      contentAlignment = Alignment.Center,
                  ) {
                      OCButton(
                          title = "Show Bottom Sheet",
                          buttonType = Secondary,
                          onClick = {
                              showBottomSheet.value = true
                          },
                      )
                  }
              },
              sheetContentBelowTitle = {
                  OCText(
                      text = "Fiction-writing specifically has modes such as action, exposition, description, dialogue, summary, and transition. Author Peter Selgin refers to methods, including action, dialogue, thoughts, summary, scenes, and description. Currently, there is no consensus within the writing community regarding the number and composition of fiction-writing modes and their uses. Description is the fiction-writing mode for transmitting a mental image of the particulars of a story. Together with dialogue, narration, exposition, and summarization, description is one of the most widely recognized of the fiction-writing modes. As stated in Writing from A to Z, edited by Kirk Polking, description is more than the amassing of details; it is bringing something to life by carefully choosing and arranging words and phrases to produce the desired effect. The most appropriate and effective techniques for presenting description are a matter of ongoing discussion among writers and writing coaches. Fiction-writing specifically has modes such as action, exposition, description, dialogue, summary, and transition. Author Peter Selgin refers to methods, including action, dialogue, thoughts, summary, scenes, and description. Currently, there is no consensus within the writing community regarding the number and composition of fiction-writing modes and their uses. Description is the fiction-writing mode for transmitting a mental image of the particulars of a story. Together with dialogue, narration, exposition, and summarization, description is one of the most widely recognized of the fiction-writing modes. As stated in Writing from A to Z, edited by Kirk Polking, description is more than the amassing of details; it is bringing something to life by carefully choosing and arranging words and phrases to produce the desired effect. The most appropriate and effective techniques for presenting description are a matter of ongoing discussion among writers and writing coaches.Fiction-writing specifically has modes such as action, exposition, description, dialogue, summary, and transition. Author Peter Selgin refers to methods, including action, dialogue, thoughts, summary, scenes, and description. Currently, there is no consensus within the writing community regarding the number and composition of fiction-writing modes and their uses. Description is the fiction-writing mode for transmitting a mental image of the particulars of a story. Together with dialogue, narration, exposition, and summarization, description is one of the most widely recognized of the fiction-writing modes. As stated in Writing from A to Z, edited by Kirk Polking, description is more than the amassing of details; it is bringing something to life by carefully choosing and arranging words and phrases to produce the desired effect. The most appropriate and effective techniques for presenting description are a matter of ongoing discussion among writers and writing coaches. Fiction-writing specifically has modes such as action, exposition, description, dialogue, summary, and transition. Author Peter Selgin refers to methods, including action, dialogue, thoughts, summary, scenes, and description. Currently, there is no consensus within the writing community regarding the number and composition of fiction-writing modes and their uses. Description is the fiction-writing mode for transmitting a mental image of the particulars of a story. Together with dialogue, narration, exposition, and summarization, description is one of the most widely recognized of the fiction-writing modes. As stated in Writing from A to Z, edited by Kirk Polking, description is more than the amassing of details; it is bringing something to life by carefully choosing and arranging words and phrases to produce the desired effect. The most appropriate and effective techniques for presenting description are a matter of ongoing discussion among writers and writing coaches.",
                      style = OCTheme.typography.caption1SemiBold.copy(
                          letterSpacing = OCTheme.dimensions.pointTwoFiveLetterSpacing,
                          textAlign = TextAlign.Start,
                          color = OCColors.textBodyDefault,
                      ),
                  )
              },
              showGrabber = true,
              title = "Title",
              onBackPressed = {
                  showBottomSheet.value = false
              },
              onNavBarPressed = {}
          )
          

Parameters:

title: String = "": Title text that show on top of the modal which can be empty. showGrabber: Boolean = true: Grabber composable that is shown for a modal which is optional. showBottomSheet:Boolean: Boolean Value that indicate whether to show or hide the bottom sheet. The sheet has two states expanded and hidden state. When expanded the height of the modal wraps with the content in the modal. When hidden state the bottom sheet is no more visible. sheetContentBelowTitle: @Composable BoxScope.() -> Unit = : Dynamic Content to show below the title when the modal pops up. content: @Composable (PaddingValues) -> Unit: Content shown on background of the modal. On clicking any ui on this content the modal sheet pops up. Its optional to keep the background UI here. titleTextStyle:TextStyle = getDefaultTitleTextStyle(): Dynamic styles given to the title text in the modal. onDismiss: () -> Unit: Callback function that is triggered when the bottom sheet dismiss through swipe down or on clicking the close button. onBackPressed: () -> Unit: Callback function that is triggered when the bottom sheet dismiss through swipe down or on clicking the back button. onNavBarPressed: () -> Unit: Callback function that is triggered on clicking the nav bar for search modal.