@startlibs/components 1.0.4 → 1.1.0

package/src/Dialog.jsx

@@ -0,0 +1,413 @@
+import React from 'react';
+import _ from 'lodash/fp'
+import styled, {css} from 'styled-components'
+import {darken} from 'polished'
+
+import {callIfFunction, customTheme, getColor, media} from '@startlibs/utils'
+import {StartlibsConsumer, useEnsureRef} from '@startlibs/core'
+
+import {Button} from './Button'
+import {Icon} from './Icon'
+import {LoadingDiv} from './LoadingDiv'
+import {fixDoubledLastMarginBottom} from './SplitColumnsContainer'
+import {DialogContainer} from './containers/DialogContainer'
+import {willUseIsSticky} from './willUseIsSticky'
+
+export const DialogIcon = styled(Icon)`
+  font-size: 60px;
+  width: 8rem;
+  text-align: center;
+  color: #d2d2d2;
+  right: 0;
+  top: 1rem;
+  position: absolute;
+  ${media.desktop`
+    top: 0
+  `}
+`
+
+const CloseIcon = styled(Icon).attrs(_.assign({icon: 'x'}))`
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    font-size: 24px;
+    line-height: 32px;
+    cursor: pointer;
+    border-radius: 50%;
+    text-align: center;
+    color: rgba(0,0,0,0.3);
+    transition: 0.2s linear;
+    z-index: 1000;
+    top: 1rem;
+    right: 1rem;
+    &:hover {
+      background-color: rgba(0,0,0,0.075);
+    }
+  `
+
+const DialogIllustration = styled.img`
+    max-width: 16rem;
+    position: absolute;
+    right: 1rem;
+    bottom: 0;
+    ${media.mobile`
+      display: none;
+    `}
+`
+
+const DialogContent = styled((props) =>
+  <div {...props}>
+    {fixDoubledLastMarginBottom(props.children)}
+    {props.icon && <DialogIcon icon={props.icon}/>}
+    {props.illustration && <DialogIllustration src={props.illustration}/>}
+  </div>
+)`
+    outline:none;
+    width: 100%;
+    position: relative;
+    min-height: 5rem;
+    ${props => props.icon && css`
+      padding-right: 8rem;
+      min-height: 6rem;
+    `}
+    ${props => props.illustration && css`
+      padding-right: 15rem;
+      ${media.mobile`
+        padding-right: 1.5rem;
+      `}
+    `}
+    p {
+      font-size: 14px;
+    }
+    `
+
+const DialogTitle = styled.h2`
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    ${props => props.fixTitleMargin && `
+      padding-bottom: 0;
+    `}
+    ${media.mobile`
+      font-size: 19px;
+    `}
+`
+
+const DialogFooter = styled.div`
+    display: block;
+    padding-top: 1rem;
+    margin-top: 1rem;
+    align-items: stretch;
+    text-align: right;
+    ${props => props.sticky && css`
+      position: sticky;
+      background: white;
+      width: inherit;
+      z-index: 50;
+      ${media.desktop`
+        bottom: -3rem;
+        margin-left: -2rem;
+        margin-right: -2rem;
+        margin-bottom: -1.5rem;
+        margin-top: 0.5rem;
+        padding: 1.5rem 2rem;
+        border-radius: 0 0 1rem 1rem;
+      `}
+      ${media.mobile`
+        bottom: -0.5rem;
+        padding: 0.75rem 1.75rem;
+        margin-bottom: -1rem;
+        margin-left: -1.75rem;
+        margin-right: -1.75rem;
+      `}
+      ${props => props.isSticky && `
+        box-shadow: 0 0px 2px 0 rgba(0,0,0,0.1), 0 0px 5px 1px rgba(0,0,0,0.15);
+        border-radius: 0;
+      `}
+    `}
+    ${media.max(370)`
+      ${Button} {
+        min-width: unset;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+      }
+    `}
+    // Footer's plain (non-colored) buttons use the "light" look; colored variants keep their color.
+    // ponytail: for a plain footer button that shows a loading spinner, pass \`light\` explicitly so the spinner renders dark instead of white-on-light.
+    ${Button}:not(.styled-button-colored) {
+      background: ${props => darken(0.03, getColor('bluishGray')(props))};
+      color: ${getColor('gray90')};
+      &:hover {
+        background: ${props => darken(0.06, getColor('bluishGray')(props))};
+      }
+      &:active {
+        background: ${props => darken(0.09, getColor('bluishGray')(props))};
+      }
+    }
+  `
+
+const FooterAuxiliaryContainer = styled.div`
+    flex-grow: 1;
+    align-self: center;
+    display: inline-block;
+    padding-right: 1rem;
+    float: left;
+`
+
+// THIS IS NEEDED FOR LOADING ANIMATION ON DialogWithImageHeader
+
+export const DialogContentWrapper = styled(LoadingDiv)`
+  padding: 2rem;
+  margin: -2rem;
+  ${media.mobile`
+    padding: 1.75rem;
+    margin: -1.75rem;
+  `}
+`
+const DialogAlwaysVisibleDiv = styled.div`
+  padding: 2rem 2rem 0;
+  margin: -2rem;
+  ${media.mobile`
+    padding: 1.75rem 1.75rem 0;
+    margin: -1.75rem;
+  `}
+`
+// END
+
+const Dialog = styled(React.forwardRef(({className, skipWrap, wrapChildren, stickyFooter, fixTitleMargin, skipCloseIcon, isLoading, footer, Content, children, title, illustration, icon, auxiliarActions, container = true, onClose, ...props}, outerRef) => {
+  const ref = useEnsureRef(outerRef)
+  const [WithIsSticky] = willUseIsSticky()
+
+  const handleClose = React.useCallback(async () => {
+    if (onClose) await onClose().catch(console.error)
+    if (props.closeDialog) props.closeDialog()
+  }, [onClose, props.closeDialog])
+
+  const alwaysVisible = (confirmCloseDialog) => <>
+    {
+      props.closeDialog && !skipCloseIcon &&
+      <CloseIcon className="JS-dialog-close" onClick={confirmCloseDialog}/>
+    }
+    {
+      title &&
+      <DialogTitle fixTitleMargin>{callIfFunction(title)}</DialogTitle>
+    }
+  </>
+
+  const content = <>
+    {
+      Content &&
+      <DialogContent icon={icon} illustration={illustration}>{callIfFunction(Content)}</DialogContent>
+    }
+    {
+      !Content && children &&
+      <DialogContent icon={icon} illustration={illustration}>{wrapChildren ? wrapChildren(children) : callIfFunction(children)}</DialogContent>
+    }
+    {
+      Content && children && (wrapChildren ? wrapChildren(children) : callIfFunction(children))
+    }
+    {
+      footer &&
+      <WithIsSticky bottom>{(sentinel, isSticky) => <>
+        <DialogFooter isSticky={isSticky} sticky={stickyFooter}>
+          {auxiliarActions && <FooterAuxiliaryContainer>{callIfFunction(auxiliarActions)}</FooterAuxiliaryContainer>}
+          {callIfFunction(footer)}
+        </DialogFooter>
+        {sentinel()}
+      </>
+      }</WithIsSticky>
+    }
+  </>
+
+  const dialog = (confirmCloseDialog) => <div
+    className={className + " JS-has-wc JS-dialog"}
+    ref={ref}
+  >
+    {skipWrap
+      ? <>
+        {alwaysVisible(confirmCloseDialog)}
+        {content}
+      </>
+      : <>
+        <DialogAlwaysVisibleDiv>
+          {alwaysVisible(confirmCloseDialog)}
+        </DialogAlwaysVisibleDiv>
+        <DialogContentWrapper isLoading={isLoading}>
+          {content}
+        </DialogContentWrapper>
+      </>
+    }
+  </div>
+
+  return container
+    ? <DialogContainer {...props} DialogErrorContent={DialogErrorContent}
+                          ref={ref}
+                          title={title}
+                          closeDialog={handleClose}
+  >{({confirmCloseDialog}) => dialog(confirmCloseDialog)}</DialogContainer>
+    : dialog(handleClose)
+}))`
+  @supports (position:sticky) {
+    will-change: transform, opacity;
+    &.JS-wc-off {
+      will-change: auto;
+    }
+  }
+  
+  border-radius: 24px;
+  padding: 2rem;
+  background-color: white;
+  width: 100%;
+  max-width: 45rem;
+  /* Override opcional via prop. Fica ANTES do media.mobile de propósito: no mobile
+     o max-width:100% de lá continua ganhando. Inerte sem a prop → zero efeito em
+     quem já ajusta a largura por css="max-width:...". */
+  ${props => props.$maxWidth && css`max-width: ${props.$maxWidth};`}
+  margin: auto;
+  position: relative;
+  align-self: baseline;
+  display: block; 
+  overflow: clip;
+  > h3:first-child {
+    margin-top: 0.5rem;
+  }
+  p {
+    line-height: 140%;
+  }
+  ${media.mobile`
+    padding: 1.75rem;
+    max-width: 100%;
+    ${props => props.fullscreenOnMobile && `
+      border-radius: 0;
+      min-height: 100%;
+    `};
+  `}
+  ${props => props.closeDialog && css`
+    ${DialogTitle} {
+      padding-right: 2rem;
+    }
+  `}
+  ${customTheme('Dialog')}
+`
+
+
+export {
+  FooterAuxiliaryContainer,
+  DialogTitle,
+  DialogFooter,
+  DialogContent,
+  CloseIcon,
+  Dialog
+}
+
+export const ConfirmDialog = (props) => <Dialog {...props} placement="Confirm-Dialog">{props.children}</Dialog>
+
+export const DefaultConfirmDialog = (props) => (
+  <StartlibsConsumer>{({confirmDialogLabels}) => {
+    const handleCancel = async () => {
+        if (props.onCancel) props.onCancel()
+        if (props.onClose) await props.onClose().catch(console.error)
+      }
+
+      return (
+        <ConfirmDialog
+          title={confirmDialogLabels.title}
+          closeDialog={handleCancel}
+          onClose={props.onClose}
+          onConfirm={props.onConfirm}
+          footer={<>
+            <Button onClick={handleCancel}>{confirmDialogLabels.cancel}</Button>
+            <Button
+              hover="success" isLoading={props.isLoading}
+              onClick={props.onSaveInstead}
+            >{confirmDialogLabels.confirm}</Button>
+            <Button autoFocus alert onClick={props.onConfirm}>{confirmDialogLabels.discard}</Button>
+          </>}
+        >
+          <p>{confirmDialogLabels.content}</p>
+        </ConfirmDialog>
+    )}}
+    </StartlibsConsumer>)
+
+// Estado de erro genérico da dialog: badge circular centralizado (mesma linguagem
+// dos error pages da app) no lugar do ícone cinza flutuando no canto. Cores em rgba
+// (não getColor) pra não depender dos tokens de tema da app que consome a lib.
+const DialogErrorLayout = styled.div`
+  text-align: center;
+  /* max-width (não <br/>) força a quebra do título em ~2 linhas como o error page,
+     mas deixa telas estreitas quebrarem sozinhas. Ajuste fino se o corte não bater. */
+  ${DialogTitle} {
+    max-width: 18rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  ${DialogContent} {
+    min-height: 0;   /* mata o vão vazio que sobrava acima do botão */
+    p {
+      max-width: 20rem;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+  ${DialogFooter} {
+    text-align: center;
+    margin-top: 0;
+    padding-top: 0.5rem;
+  }
+`
+
+const DialogErrorBadge = styled.div`
+  width: 72px;
+  height: 72px;
+  margin: 0 auto 1.5rem;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${Icon} {
+    font-size: 40px;
+    color: rgba(0, 0, 0, 0.4);
+  }
+`
+
+export const DialogErrorContent = ({ closeDialog, onClose, title }) => {
+  const handleClose = React.useCallback(async () => {
+    if (onClose) await onClose().catch(console.error)
+    if (closeDialog) closeDialog()
+  }, [onClose, closeDialog])
+
+  return (
+    <StartlibsConsumer>
+      {({ ErrorDialog: { title, content, close } }) => (
+        <Dialog as="div" $maxWidth="30rem">
+          {closeDialog && <CloseIcon onClick={handleClose} />}
+          <DialogErrorLayout>
+            <DialogErrorBadge><Icon icon="warning"/></DialogErrorBadge>
+            {title && <DialogTitle fixTitleMargin>{title}</DialogTitle>}
+            <DialogContent>{content}</DialogContent>
+            <DialogFooter>
+              <Button highlight rounded onClick={handleClose}>{close}</Button>
+            </DialogFooter>
+          </DialogErrorLayout>
+        </Dialog>
+      )}
+    </StartlibsConsumer>
+  )
+}
+
+export const DialogError = ({ closeDialog, onClose }) => {
+  const handleClose = React.useCallback(async () => {
+    if (onClose) await onClose().catch(console.error)
+    if (closeDialog) closeDialog()
+  }, [onClose, closeDialog])
+
+  return (
+    <StartlibsConsumer>
+      {({ ErrorDialog: { title } }) => (
+        <Dialog closeDialog={handleClose} title={title}>
+          <DialogErrorContent closeDialog={handleClose} onClose={onClose} />
+        </Dialog>
+      )}
+    </StartlibsConsumer>
+  )
+}