cozy-ui 74.6.1 → 75.0.0

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+# [75.0.0](https://github.com/cozy/cozy-ui/compare/v74.7.0...v75.0.0) (2022-09-16)
+
+
+### Bug Fixes
+
+* **DropdownText:** Icon and text was misaligned for `body1` variant ([53cd532](https://github.com/cozy/cozy-ui/commit/53cd532))
+
+
+### Features
+
+* **DropdownButton:** Add ripple effect and some props ([cecf1f0](https://github.com/cozy/cozy-ui/commit/cecf1f0))
+
+
+### BREAKING CHANGES
+
+* **DropdownButton:** Horizontal alignment could be different. You have to use `className="u-mh-half"` if you want the old behavior.
+
+# [74.7.0](https://github.com/cozy/cozy-ui/compare/v74.6.1...v74.7.0) (2022-09-16)
+
+
+### Features
+
+* **Viewer:** Add "edit" option ([f40c926](https://github.com/cozy/cozy-ui/commit/f40c926))
+* **Viewer:** Add ActionMenuDesktop component ([e5db778](https://github.com/cozy/cozy-ui/commit/e5db778))
+* **Viewer:** Add ActionMenuMobile component ([87dac4d](https://github.com/cozy/cozy-ui/commit/87dac4d))
+* **Viewer:** Add ActionMenuProvider component ([7938117](https://github.com/cozy/cozy-ui/commit/7938117))
+* **Viewer:** Add buildEditAttributePath helper ([677bff7](https://github.com/cozy/cozy-ui/commit/677bff7))
+* **Viewer:** Add editPathByModelProps prop to ViewerContainer ([c615600](https://github.com/cozy/cozy-ui/commit/c615600))
+* **Viewer:** Add name & fileId props to ActionMenuWrapper ([fbcf1bc](https://github.com/cozy/cozy-ui/commit/fbcf1bc))
+* **Viewer:** Add optionFile & file props to ActionMenuWrapper ([a5f0b2d](https://github.com/cozy/cozy-ui/commit/a5f0b2d))
+* **Viewer:** Remove filename attribute in Viewer information ([8f76f46](https://github.com/cozy/cozy-ui/commit/8f76f46))
+* **Viewer:** Use actionMenuContext in ActionMenuWrapper ([89518aa](https://github.com/cozy/cozy-ui/commit/89518aa))
+
 ## [74.6.1](https://github.com/cozy/cozy-ui/compare/v74.6.0...v74.6.1) (2022-09-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "74.6.1",
+  "version": "75.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/DropdownButton/Readme.md

@@ -1,29 +1,77 @@
-This component can be used as a trigger to open menus, for example an ActionMenu component.
+This component can be used as a trigger to open menus, for example an ActionMenu component. It uses `DropdownText` so you can use all its props.
 
 ```jsx
-import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
-import Typography from "cozy-ui/transpiled/react/Typography";
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
 
-<div>
-  <div>
+const variants = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'subtitle1',
+  'subtitle2',
+  'body1',
+  'body2',
+  'caption'
+]
+
+;
+
+<>
+  <Grid container>
+    <Grid item xs={6}>
+      Default
+      {variants.map((variant, index) => (
+        <div key={index} className='u-mb-1'>
+          <DropdownButton textVariant={variant}>
+            {variant}
+          </DropdownButton>
+        </div>
+      ))}
+    </Grid>
+    <Grid item xs={6}>
+      Disabled
+      {variants.map((variant, index) => (
+        <div key={index} className='u-mb-1'>
+          <DropdownButton textVariant={variant} disabled>
+            {variant}
+          </DropdownButton>
+        </div>
+      ))}
+    </Grid>
+  </Grid>
+  <div style={{ border: '1px dashed var(--borderMainColor)', marginBottom: '1rem' }}>
     <DropdownButton>
-      <Typography variant="h3" component="h1">Cozy</Typography>
+      This is a long text without ellipsis without restrictive container
     </DropdownButton>
   </div>
-  <div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}>
     <DropdownButton>
-      <Typography variant="h4">Cozy</Typography>
+      This is a long text without ellipsis inside a restrictive container
     </DropdownButton>
   </div>
-  <div>
-    <DropdownButton>
-      <Typography variant="h5">Cozy</Typography>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}>
+    <DropdownButton noWrap>
+      This is a long text with ellipsis inside a container
     </DropdownButton>
   </div>
-  <div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '100%', marginBottom: '1rem' }}>
     <DropdownButton>
-      <Typography variant="body1">Cozy</Typography>
+      Text with<br />breaking spaces<br />inside content
+    </DropdownButton>
+  </div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '100%', marginBottom: '1rem' }}>
+    <DropdownButton fullWidth spaceBetween>
+      Space between text and icon (fullWidth needed)
+    </DropdownButton>
+  </div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '100%' }}>
+    <DropdownButton fullWidth>
+      Full width but no space between text and icon
     </DropdownButton>
   </div>
-</div>
+</>
 ```

package/react/DropdownButton/index.jsx

@@ -1,26 +1,85 @@
-import React from 'react'
-import cx from 'classnames'
-import styles from './styles.styl'
-import Icon from '../Icon'
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import Button from '@material-ui/core/Button'
 
-import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
+import { makeStyles } from '../styles'
+import DropdownText from '../DropdownText'
 
-const DropdownButton = React.forwardRef(
-  ({ children, className, ...props }, ref) => (
-    <button
-      role="button"
-      className={cx(styles['c-DropdownButton'], className)}
-      ref={ref}
-      {...props}
-    >
-      {children}
-      <Icon
-        icon={BottomIcon}
-        size="12"
-        className={styles['c-DropdownButton-Icon']}
-      />
-    </button>
-  )
+const useStyles = makeStyles({
+  root: {
+    height: 'auto',
+    width: ({ fullWidth, noWrap }) =>
+      fullWidth || noWrap ? `calc(100% + 16px)` : 'auto',
+    margin: '-8px',
+    padding: '8px'
+  },
+  text: {
+    textTransform: 'none',
+    textAlign: 'left'
+  }
+})
+
+const DropdownButton = forwardRef(
+  (
+    {
+      spaceBetween,
+      textVariant,
+      disabled,
+      fullWidth,
+      noWrap,
+      children,
+      className,
+      dropdownTextProps,
+      ...props
+    },
+    ref
+  ) => {
+    const { root, text } = useStyles({ fullWidth, noWrap })
+
+    return (
+      <Button
+        ref={ref}
+        classes={{ root, text }}
+        disabled={disabled}
+        className={className}
+        {...props}
+      >
+        <DropdownText
+          variant={textVariant}
+          spaceBetween={spaceBetween}
+          disabled={disabled}
+          noWrap={noWrap}
+          {...dropdownTextProps}
+        >
+          {children}
+        </DropdownText>
+      </Button>
+    )
+  }
 )
 
+DropdownButton.defaultProps = {
+  spaceBetween: false,
+  textVariant: 'body1',
+  disabled: false,
+  fullWidth: false,
+  noWrap: false
+}
+
+DropdownButton.propTypes = {
+  /** Weither there is a space between the label and the icon */
+  spaceBetween: PropTypes.bool,
+  /** Like variant from Typography component */
+  textVariant: PropTypes.string,
+  /** Whether the component is disabled */
+  disabled: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  /** Whether using ellipsis on text */
+  noWrap: PropTypes.bool,
+  /** Props assigned to the DropdownText inner component */
+  dropdownTextProps: PropTypes.object,
+  className: PropTypes.string,
+  children: PropTypes.node
+}
+
 export default DropdownButton

package/react/DropdownText/Readme.md

@@ -43,17 +43,30 @@ const variants = [
       ))}
     </Grid>
   </Grid>
-  <DropdownText style={{ border: '1px solid var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}  color="error">
-    This is a long text without ellipsis
-  </DropdownText>
-  <DropdownText noWrap style={{ border: '1px solid var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}>
-    This is a long text with ellipsis
-  </DropdownText>
-  <DropdownText spaceBetween style={{ border: '1px solid var(--borderMainColor)', width: '100%', marginBottom: '1rem' }}>
-    Space between text and icon
-  </DropdownText>
-  <DropdownText style={{ border: '1px solid var(--borderMainColor)' }}>
-    Text with<br />breaking spaces<br />inside content
-  </DropdownText>
+  <div style={{ border: '1px dashed var(--borderMainColor)', marginBottom: '1rem' }}>
+    <DropdownText>
+      This is a long text without ellipsis without restrictive container
+    </DropdownText>
+  </div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}>
+    <DropdownText>
+      This is a long text without ellipsis inside a restrictive container
+    </DropdownText>
+  </div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}>
+    <DropdownText noWrap>
+      This is a long text with ellipsis inside a container
+    </DropdownText>
+  </div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '100%', marginBottom: '1rem' }}>
+    <DropdownText>
+      Text with<br />breaking spaces<br />inside content
+    </DropdownText>
+  </div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '100%' }}>
+    <DropdownText spaceBetween>
+      Space between text and icon
+    </DropdownText>
+  </div>
 </>
 ```

package/react/DropdownText/index.jsx

@@ -21,6 +21,7 @@ const useStyles = makeStyles(theme => ({
   endIcon: {
     display: 'flex',
     marginLeft: '5px',
+    marginTop: ({ variant }) => (variant === 'body1' ? '3px' : undefined),
     color: ({ disabled }) =>
       theme.palette.text[disabled ? 'disabled' : 'primary']
   }
@@ -56,7 +57,7 @@ const DropdownText = forwardRef(
     },
     ref
   ) => {
-    const styles = useStyles({ spaceBetween, disabled, color })
+    const styles = useStyles({ spaceBetween, disabled, color, variant })
 
     return (
       <div ref={ref} className={styles.container} {...props}>

package/react/Viewer/Panel/ActionMenuDesktop.jsx

@@ -0,0 +1,68 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import styles from './styles.styl'
+
+import Icon from '../../Icon'
+import Copy from '../../Icons/Copy'
+import Edit from '../../Icons/Rename'
+import ActionMenu, { ActionMenuItem } from '../../ActionMenu'
+import Typography from '../../Typography'
+import { useI18n } from '../../I18n'
+import AppLinker from '../../AppLinker'
+
+const ActionMenuDesktop = forwardRef(
+  ({ onClose, isEditable, actions, appLink, appSlug }, ref) => {
+    const { handleCopy, handleEdit } = actions
+    const { t } = useI18n()
+
+    return (
+      <ActionMenu
+        className={styles['ActionMenuDesktop-ActionMenu']}
+        onClose={onClose}
+        anchorElRef={ref}
+      >
+        {isEditable && (
+          <AppLinker app={{ slug: appSlug }} href={appLink}>
+            {({ onClick, href }) => {
+              return (
+                <a
+                  href={href}
+                  className={
+                    !appLink &&
+                    styles['ActionMenuDesktop-ActionMenu-link-disabled']
+                  }
+                  onClick={() => handleEdit(onClick)}
+                >
+                  <ActionMenuItem left={<Icon icon={Edit} />}>
+                    <Typography>
+                      {t(`Viewer.panel.qualification.actions.edit`)}
+                    </Typography>
+                  </ActionMenuItem>
+                </a>
+              )
+            }}
+          </AppLinker>
+        )}
+        <ActionMenuItem onClick={handleCopy} left={<Icon icon={Copy} />}>
+          <Typography>
+            {t(`Viewer.panel.qualification.actions.copy`)}
+          </Typography>
+        </ActionMenuItem>
+      </ActionMenu>
+    )
+  }
+)
+ActionMenuDesktop.displayName = 'ActionMenuDesktop'
+
+ActionMenuDesktop.propTypes = {
+  onClose: PropTypes.func,
+  isEditable: PropTypes.bool,
+  actions: PropTypes.shape({
+    handleCopy: PropTypes.func,
+    handleEdit: PropTypes.func
+  }),
+  appLink: PropTypes.string,
+  appSlug: PropTypes.string
+}
+
+export default ActionMenuDesktop

package/react/Viewer/Panel/ActionMenuMobile.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import List from '../../MuiCozyTheme/List'
+import ListItem from '../../MuiCozyTheme/ListItem'
+import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
+import ListItemText from '../../ListItemText'
+import Icon from '../../Icon'
+import Copy from '../../Icons/Copy'
+import Edit from '../../Icons/Rename'
+import BottomSheet, { BottomSheetItem } from '../../BottomSheet'
+import { useI18n } from '../../I18n'
+import AppLinker from '../../AppLinker'
+
+const ActionMenuMobile = ({
+  onClose,
+  isEditable,
+  actions,
+  appLink,
+  appSlug
+}) => {
+  const { t } = useI18n()
+  const { handleCopy, handleEdit } = actions
+
+  return (
+    <BottomSheet backdrop onClose={onClose}>
+      <BottomSheetItem disableGutters>
+        <List>
+          {isEditable && (
+            <AppLinker app={{ slug: appSlug }} href={appLink}>
+              {({ onClick, href }) => {
+                return (
+                  <ListItem
+                    button
+                    component="a"
+                    href={href}
+                    onClick={() => handleEdit(onClick)}
+                    disabled={!appLink}
+                  >
+                    <ListItemIcon>
+                      <Icon icon={Edit} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={t(`Viewer.panel.qualification.actions.edit`)}
+                    />
+                  </ListItem>
+                )
+              }}
+            </AppLinker>
+          )}
+          <ListItem button onClick={handleCopy}>
+            <ListItemIcon>
+              <Icon icon={Copy} />
+            </ListItemIcon>
+            <ListItemText
+              primary={t(`Viewer.panel.qualification.actions.copyClipboard`)}
+            />
+          </ListItem>
+        </List>
+      </BottomSheetItem>
+    </BottomSheet>
+  )
+}
+
+ActionMenuMobile.propTypes = {
+  onClose: PropTypes.func,
+  isEditable: PropTypes.bool,
+  actions: PropTypes.shape({
+    handleCopy: PropTypes.func,
+    handleEdit: PropTypes.func
+  }),
+  appLink: PropTypes.string
+}
+
+export default ActionMenuMobile

package/react/Viewer/Panel/ActionMenuProvider.jsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext } from 'react'
+
+/**
+ * @typedef {object} useActionMenuContextReturn
+ * @property {string} information
+ * @property {string} page
+ */
+
+const ActionMenuContext = createContext()
+
+const ActionMenuProvider = ({ children, editPathByModelProps = {} }) => {
+  return (
+    <ActionMenuContext.Provider value={editPathByModelProps}>
+      {children}
+    </ActionMenuContext.Provider>
+  )
+}
+
+/**
+ * @returns {useActionMenuContextReturn}
+ */
+const useActionMenuContext = () => {
+  const actionMenuContext = useContext(ActionMenuContext)
+  if (!actionMenuContext) {
+    throw new Error(
+      'ActionMenuContext must be used within a ActionMenuProvider'
+    )
+  }
+
+  return actionMenuContext
+}
+
+export default useActionMenuContext
+
+export { ActionMenuProvider }

package/react/Viewer/Panel/ActionMenuWrapper.jsx

@@ -1,23 +1,45 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
-import List from '../../MuiCozyTheme/List'
-import ListItem from '../../MuiCozyTheme/ListItem'
-import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
-import ListItemText from '../../ListItemText'
-import Icon from '../../Icon'
-import Copy from '../../Icons/Copy'
-import BottomSheet, { BottomSheetItem } from '../../BottomSheet'
-import ActionMenu, { ActionMenuItem } from '../../ActionMenu'
-import Typography from '../../Typography'
+import { useAppLinkWithStoreFallback, useClient } from 'cozy-client'
+
 import useBreakpoints from '../../hooks/useBreakpoints'
 import { useI18n } from '../../I18n'
 import useViewerSnackbar from '../snackbar/ViewerSnackbarProvider'
+import { buildEditAttributePath, getCurrentModel } from '../helpers'
+import useActionMenuContext from './ActionMenuProvider'
+import ActionMenuMobile from './ActionMenuMobile'
+import ActionMenuDesktop from './ActionMenuDesktop'
+
+const mespapiersAppSlug = 'mespapiers'
+
+const checkEditableAttribute = name => {
+  const isNotEditableAttributes = ['datetime', 'qualification', 'contact']
+  return !isNotEditableAttributes.includes(name)
+}
 
-const ActionMenuWrapper = forwardRef(({ onClose, value }, ref) => {
+const ActionMenuWrapper = forwardRef(({ onClose, optionFile }, ref) => {
+  const { name, value } = optionFile
+  const editPathByModelProps = useActionMenuContext()
   const { isMobile } = useBreakpoints()
   const { t } = useI18n()
   const { showViewerSnackbar } = useViewerSnackbar()
+  const client = useClient()
+
+  const isEditableAttribute = checkEditableAttribute(name)
+  const currentModel = getCurrentModel(name)
+  const editPath = buildEditAttributePath(
+    editPathByModelProps,
+    currentModel,
+    optionFile.name
+  )
+
+  const { fetchStatus, url } = useAppLinkWithStoreFallback(
+    mespapiersAppSlug,
+    client,
+    editPath
+  )
+  const isAppLinkLoaded = fetchStatus === 'loaded'
 
   const handleCopy = () => {
     if (navigator?.clipboard) {
@@ -32,38 +54,44 @@ const ActionMenuWrapper = forwardRef(({ onClose, value }, ref) => {
     onClose()
   }
 
+  const handleEdit = cb => {
+    if (isAppLinkLoaded) {
+      onClose()
+      cb && cb()
+    }
+  }
+
   if (isMobile) {
     return (
-      <BottomSheet backdrop onClose={onClose}>
-        <BottomSheetItem disableGutters>
-          <List>
-            <ListItem button onClick={handleCopy}>
-              <ListItemIcon>
-                <Icon icon={Copy} />
-              </ListItemIcon>
-              <ListItemText
-                primary={t(`Viewer.panel.qualification.actions.copyClipboard`)}
-              />
-            </ListItem>
-          </List>
-        </BottomSheetItem>
-      </BottomSheet>
+      <ActionMenuMobile
+        onClose={onClose}
+        isEditable={editPath && isEditableAttribute}
+        actions={{ handleCopy, handleEdit }}
+        appLink={url}
+        appSlug={mespapiersAppSlug}
+      />
     )
   }
 
   return (
-    <ActionMenu onClose={onClose} anchorElRef={ref}>
-      <ActionMenuItem onClick={handleCopy} left={<Icon icon={Copy} />}>
-        <Typography>{t(`Viewer.panel.qualification.actions.copy`)}</Typography>
-      </ActionMenuItem>
-    </ActionMenu>
+    <ActionMenuDesktop
+      ref={ref}
+      onClose={onClose}
+      isEditable={editPath && isEditableAttribute}
+      actions={{ handleCopy, handleEdit }}
+      appLink={url}
+      appSlug={mespapiersAppSlug}
+    />
   )
 })
 ActionMenuWrapper.displayName = 'ActionMenuWrapper'
 
 ActionMenuWrapper.propTypes = {
   onClose: PropTypes.func,
-  value: PropTypes.string
+  optionFile: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string
+  })
 }
 
 export default ActionMenuWrapper

package/react/Viewer/Panel/Qualification.jsx

@@ -19,19 +19,19 @@ const Qualification = ({ file = {} }) => {
   const { metadata = {} } = file
   const actionBtnRef = useRef([])
   const [optionFile, setOptionFile] = useState({
-    isOpen: false,
     id: '',
+    name: '',
     value: ''
   })
 
   const hideActionsMenu = () => {
-    setOptionFile({ isOpen: false, id: '', value: '' })
+    setOptionFile({ id: '', name: '', value: '' })
   }
 
-  const toggleActionsMenu = (id, value) => {
+  const toggleActionsMenu = (id, name, value) => {
     setOptionFile(prev => {
-      if (prev.isOpen) return { isOpen: false, id: '', value: '' }
-      return { isOpen: true, id, value }
+      if (prev.value) return { id: '', name: '', value: '' }
+      return { id, name, value }
     })
   }
 
@@ -56,7 +56,7 @@ const Qualification = ({ file = {} }) => {
               key={idx}
               ref={actionBtnRef.current[idx]}
               metadataComputed={meta}
-              toggleActionsMenu={val => toggleActionsMenu(idx, val)}
+              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
             />
           )
         }
@@ -67,13 +67,13 @@ const Qualification = ({ file = {} }) => {
               key={idx}
               ref={actionBtnRef.current[idx]}
               metadataComputed={meta}
-              toggleActionsMenu={val => toggleActionsMenu(idx, val)}
+              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
             />
           )
         }
 
         if (knowOtherMetadataNames.includes(name)) {
-          if (name === 'owner') {
+          if (name === 'contact') {
             return <QualificationListItemContact key={idx} file={file} />
           }
 
@@ -81,18 +81,18 @@ const Qualification = ({ file = {} }) => {
             <QualificationListItemOther
               key={idx}
               ref={actionBtnRef.current[idx]}
-              filename={file.name}
               metadataComputed={meta}
-              toggleActionsMenu={val => toggleActionsMenu(idx, val)}
+              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
             />
           )
         }
       })}
 
-      {optionFile.isOpen && (
+      {optionFile.value && (
         <ActionMenuWrapper
           onClose={hideActionsMenu}
-          value={optionFile.value}
+          file={file}
+          optionFile={optionFile}
           ref={actionBtnRef.current[optionFile.id]}
         />
       )}