cozy-ui 130.9.0 → 130.11.0

package/react/Radios/Readme.md

@@ -5,79 +5,80 @@ import Radio from 'cozy-ui/transpiled/react/Radios'
 import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
 import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
 import Variants from 'cozy-ui/docs/components/Variants'
-const Box = ({ children }) => {
-  return <div style={{ height: '3rem', width: '3rem', border: '2px dashed #CCC', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-    { children }
-  </div>
-}
 
 initialState = { radioValue: 'item1' }
 
-const initialVariants = [
-  { checked: false, disabled: false, secondary: false }
-]
+const initialVariantsForScreenshots = [{ checked: false, disabled: false, secondary: false }]
+const initialVariants = [{ before: false }]
 
 const handleChange = event => {
   setState({ radioValue: event.target.value  })
 }
 
-const bboxStyle = { border: '1px solid red' }
-
 ;
 
 <>
-  <RadioGroup
-    aria-label="radio"
-    name="radioName"
-    value={state.radioValue.toString()}
-    onChange={handleChange}
-  >
-    <FormControlLabel
-      value="item1"
-      label="This is a radio button"
-      control={
-        <Radio />
-      }
-    />
-    <FormControlLabel
-      value="item2"
-      label="This is an intent radio button"
-      control={
-        <Radio color="secondary" />
-      }
-    />
-    <FormControlLabel
-      value="item3"
-      label="This is a disabled radio button"
-      control={
-        <Radio disabled />
-      }
-    />
-    <FormControlLabel
-      value="item4"
-      label="This is a checked disabled radio button"
-      control={
-        <Radio checked disabled />
-      }
-    />
-    <FormControlLabel
-      value="item5"
-      label="This is a edge start radio button"
-      control={
-        <Radio edge="start" />
-      }
-    />
-    <FormControlLabel
-      value="item6"
-      label="This is a edge end radio button"
-      control={
-        <Radio edge="end" />
-      }
-    />
-  </RadioGroup>
-
+  <Variants initialVariants={initialVariants} screenshotAllVariants>
+    {variant => (
+      <RadioGroup
+        aria-label="radio"
+        name="radioName"
+        value={state.radioValue.toString()}
+        onChange={handleChange}
+      >
+        <FormControlLabel
+          value="item1"
+          label="This is a radio button"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Radio />
+          }
+        />
+        <FormControlLabel
+          value="item2"
+          label="This is an intent radio button"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Radio color="secondary" />
+          }
+        />
+        <FormControlLabel
+          value="item3"
+          label="This is a disabled radio button"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Radio disabled />
+          }
+        />
+        <FormControlLabel
+          value="item4"
+          label="This is a checked disabled radio button"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Radio checked disabled />
+          }
+        />
+        <FormControlLabel
+          value="item5"
+          label="This is a edge start radio button"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Radio edge="start" />
+          }
+        />
+        <FormControlLabel
+          value="item6"
+          label="This is a edge end radio button"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Radio edge="end" />
+          }
+        />
+      </RadioGroup>
+    )}
+  </Variants>
   {isTesting() && (
-    <Variants initialVariants={initialVariants} screenshotAllVariants>
+    <Variants initialVariants={initialVariantsForScreenshots} screenshotAllVariants>
       {variant => (
         <Radio
           color={variant.secondary ? 'secondary' : 'primary'}
@@ -99,22 +100,13 @@ import Radio from 'cozy-ui/transpiled/react/Radios'
 import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
 import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
 import Variants from 'cozy-ui/docs/components/Variants'
+
 const Box = ({ children }) => {
   return <div style={{ height: '3rem', width: '3rem', border: '2px dashed #CCC', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
     { children }
   </div>
 }
 
-initialState = { radioValue: 'item1' }
-
-const initialVariants = [
-  { checked: false, disabled: false, secondary: false }
-]
-
-const handleChange = event => {
-  setState({ radioValue: event.target.value  })
-}
-
 const bboxStyle = { border: '1px solid red' }
 
 ;

package/react/Switch/Readme.md

@@ -6,14 +6,14 @@ import Switch from 'cozy-ui/transpiled/react/Switch'
 import Typography from "cozy-ui/transpiled/react/Typography"
 import Stack from "cozy-ui/transpiled/react/Stack"
 import Box from 'cozy-ui/transpiled/react/Box'
+import Divider from 'cozy-ui/transpiled/react/Divider'
 import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
 import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+import FormGroup from 'cozy-ui/transpiled/react/FormGroup'
+import Variants from 'cozy-ui/docs/components/Variants'
 
-initialState = {
-  switch0: true,
-  switch1: true,
-  switch2: false
-}
+initialState = { switch0: true, switch1: true, switch2: false }
+const initialVariants = [{ before: false }]
 
 const StateSwitch = ({ id, color }) => {
   const [checked, setChecked] = useState(initialState[`switch${id}`])
@@ -28,47 +28,94 @@ const StateSwitch = ({ id, color }) => {
 
 ;
 
-<Stack spacing='xs'>
-  {['primary', 'secondary', 'default'].map((color, i) => {
-    return (
-      <Box display='flex' alignItems='center' key={i}>
-        <Typography variant='body1' display="inline">{ color }</Typography>
-        <StateSwitch id={i} color={color} />
-      </Box>
-    )
-  })}
-  <FormControlLabel control={<Switch color="primary" />} label="With label" />
-  <FormControlLabel control={<Switch color="primary" checked />} label="With label" />
-  <br />
-  <FormControlLabel control={<Switch color="primary" disabled />} label="Primary, disabled with label" />
-  <FormControlLabel control={<Switch color="primary" checked disabled />} label="Primary, checked - disabled with label" />
-  <br />
-  <FormControlLabel
-    label="Primary, disabled with label"
-    control={
-      <Switch
-        color="primary"
-        icon={CheckIcon}
-        disabled
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Stack spacing='xs'>
+      {['primary', 'secondary', 'default'].map((color, i) => {
+        return (
+          <Box display='flex' alignItems='center' key={i}>
+            <Typography display="inline">{`${color}:`}</Typography>
+            <StateSwitch id={i} color={color} />
+          </Box>
+        )
+      })}
+      <Divider className="u-mv-1" />
+      <Typography variant="h4">With labels</Typography>
+      <FormGroup row>
+        <FormControlLabel
+          control={<Switch color="primary" />}
+          label="With label"
+          labelPlacement={variant.before ? "start" : "end"}
+        />
+        <FormControlLabel
+          control={<Switch color="primary" checked />}
+          label="With label - checked"
+          labelPlacement={variant.before ? "start" : "end"}
+        />
+      </FormGroup>
+      <Typography className="u-mv-1" variant="h5">With disable</Typography>
+      <FormGroup row>
+      <FormControlLabel
+        control={<Switch color="primary" disabled />}
+        label="Primary"
+        labelPlacement={variant.before ? "start" : "end"}
       />
-    }
-  />
-  <FormControlLabel
-    label="Primary, checked - disabled with label"
-    control={
-      <Switch
-        color="primary"
-        icon={CheckIcon}
-        checked
-        disabled
+      <FormControlLabel
+        control={<Switch color="primary" checked disabled />}
+        label="Primary - checked"
+        labelPlacement={variant.before ? "start" : "end"}
       />
-    }
-  />
-  <br />
-  <FormControlLabel control={<Switch color="secondary" disabled />} label="Secondary, checked with label" />
-  <FormControlLabel control={<Switch color="secondary" checked disabled />} label="Secondary, checked - disabled with label" />
-  <br />
-  <FormControlLabel control={<Switch disabled />} label="Default, checked with label" />
-  <FormControlLabel control={<Switch checked disabled />} label="Default, checked - disabled with label" />
-</Stack>
+      </FormGroup>
+      <FormGroup row>
+        <FormControlLabel
+          label="Primary"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Switch
+              color="primary"
+              icon={CheckIcon}
+              disabled
+            />
+          }
+        />
+        <FormControlLabel
+          label="Primary - checked"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Switch
+              color="primary"
+              icon={CheckIcon}
+              checked
+              disabled
+            />
+          }
+        />
+      </FormGroup>
+      <FormGroup row>
+        <FormControlLabel
+          control={<Switch color="secondary" disabled />}
+          label="Secondary"
+          labelPlacement={variant.before ? "start" : "end"}
+        />
+        <FormControlLabel
+          control={<Switch color="secondary" checked disabled />}
+          label="Secondary - checked"
+          labelPlacement={variant.before ? "start" : "end"}
+        />
+      </FormGroup>
+      <FormGroup row>
+        <FormControlLabel
+          control={<Switch disabled />}
+          label="Default"
+          labelPlacement={variant.before ? "start" : "end"}
+        />
+        <FormControlLabel
+          control={<Switch checked disabled />}
+          label="Default - checked"
+          labelPlacement={variant.before ? "start" : "end"}
+        />
+      </FormGroup>
+    </Stack>
+  )}
+</Variants>
 ```

package/react/utils/react.js

@@ -1,4 +1,4 @@
-import { Fragment, Children } from 'react'
+import { Fragment, Children, isValidElement, cloneElement } from 'react'
 
 /**
  * Get the name of the node
@@ -33,3 +33,16 @@ export const getLastChild = props => {
     ? getChildren(lastChild.props)[0]
     : lastChild
 }
+
+/**
+ * Clone a React child and add props on it
+ * @param {React.ReactElement} children
+ * @param {Function} propsCallback - get child props as arg, return new props as object
+ * @returns
+ */
+export const AddPropsToChildren = (children, propsCallback) =>
+  Children.map(children, child =>
+    isValidElement(child)
+      ? cloneElement(child, { ...propsCallback(child.props) })
+      : null
+  )

package/transpiled/react/Checkbox/index.d.ts

@@ -1,8 +1,9 @@
 export default Checkbox;
-declare function Checkbox({ className, label, onChange, children, ...props }: {
+declare function Checkbox({ className, label, labelPlacement, onChange, children, ...props }: {
     [x: string]: any;
     className: any;
     label: any;
+    labelPlacement: any;
     onChange: any;
     children: any;
 }): JSX.Element;
@@ -15,7 +16,8 @@ declare namespace Checkbox {
         const mixed: PropTypes.Requireable<boolean>;
         const disableEffect: PropTypes.Requireable<boolean>;
         const size: PropTypes.Requireable<string>;
-        const label: PropTypes.Requireable<string>;
+        const labelPlacement: PropTypes.Requireable<string>;
+        const label: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     }
     namespace defaultProps {
         const className_1: string;
@@ -30,6 +32,8 @@ declare namespace Checkbox {
         export { disableEffect_1 as disableEffect };
         const size_1: string;
         export { size_1 as size };
+        const labelPlacement_1: string;
+        export { labelPlacement_1 as labelPlacement };
         const label_1: string;
         export { label_1 as label };
     }

package/transpiled/react/Checkbox/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "label", "error", "mixed", "disabled", "size", "disableEffect"],
-    _excluded2 = ["className", "label", "onChange", "children"];
+    _excluded2 = ["className", "label", "labelPlacement", "onChange", "children"];
 import MUICheckbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import cx from 'classnames';
@@ -53,6 +53,7 @@ var DefaultCheckbox = function DefaultCheckbox(_ref) {
 var Checkbox = function Checkbox(_ref2) {
   var className = _ref2.className,
       label = _ref2.label,
+      labelPlacement = _ref2.labelPlacement,
       onChange = _ref2.onChange,
       children = _ref2.children,
       props = _objectWithoutProperties(_ref2, _excluded2);
@@ -67,6 +68,7 @@ var Checkbox = function Checkbox(_ref2) {
         'FormControlLabel-error': props.error
       }, className),
       label: label || children,
+      labelPlacement: labelPlacement,
       control: /*#__PURE__*/React.createElement(DefaultCheckbox, _extends({}, props, {
         label: label
       })),
@@ -89,7 +91,8 @@ Checkbox.propTypes = {
   mixed: PropTypes.bool,
   disableEffect: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium']),
-  label: PropTypes.string
+  labelPlacement: PropTypes.oneOf(['top', 'end', 'bottom', 'start']),
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 Checkbox.defaultProps = {
   className: '',
@@ -98,6 +101,7 @@ Checkbox.defaultProps = {
   mixed: false,
   disableEffect: false,
   size: 'medium',
+  labelPlacement: 'end',
   label: ''
 };
 export default Checkbox;

package/transpiled/react/EditBadge/EditMenu.d.ts

@@ -0,0 +1,11 @@
+export default EditMenu;
+declare function EditMenu({ anchorRef, status, showMenu, setShowMenu, setStatus, setTimestamp, onUpload, onDelete }: {
+    anchorRef: any;
+    status: any;
+    showMenu: any;
+    setShowMenu: any;
+    setStatus: any;
+    setTimestamp: any;
+    onUpload: any;
+    onDelete: any;
+}): JSX.Element;

package/transpiled/react/EditBadge/EditMenu.js

@@ -0,0 +1,93 @@
+import React, { useRef } from 'react';
+import { handleDelete, handleUpload } from "cozy-ui/transpiled/react/EditBadge/helpers";
+import { locales } from "cozy-ui/transpiled/react/EditBadge/locales";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import CameraIcon from "cozy-ui/transpiled/react/Icons/Camera";
+import TrashIcon from "cozy-ui/transpiled/react/Icons/Trash";
+import ListItemIcon from "cozy-ui/transpiled/react/ListItemIcon";
+import ListItemText from "cozy-ui/transpiled/react/ListItemText";
+import Menu from "cozy-ui/transpiled/react/Menu";
+import MenuItem from "cozy-ui/transpiled/react/MenuItem";
+import { useAlert } from "cozy-ui/transpiled/react/providers/Alert";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+
+var EditMenu = function EditMenu(_ref) {
+  var anchorRef = _ref.anchorRef,
+      status = _ref.status,
+      showMenu = _ref.showMenu,
+      setShowMenu = _ref.setShowMenu,
+      setStatus = _ref.setStatus,
+      setTimestamp = _ref.setTimestamp,
+      onUpload = _ref.onUpload,
+      onDelete = _ref.onDelete;
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useAlert = useAlert(),
+      showAlert = _useAlert.showAlert;
+
+  var fileInputRef = useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    className: "u-dn",
+    type: "file",
+    ref: fileInputRef,
+    accept: "image/*",
+    onChange: function onChange(event) {
+      return handleUpload({
+        event: event,
+        t: t,
+        fileInputRef: fileInputRef,
+        status: status,
+        onUpload: onUpload,
+        setStatus: setStatus,
+        setTimestamp: setTimestamp,
+        setShowMenu: setShowMenu,
+        showAlert: showAlert
+      });
+    }
+  }), showMenu && /*#__PURE__*/React.createElement(Menu, {
+    open: true,
+    anchorEl: anchorRef,
+    getContentAnchorEl: null,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    onClose: function onClose() {
+      return setShowMenu(false);
+    }
+  }, /*#__PURE__*/React.createElement(MenuItem, {
+    onClick: function onClick() {
+      setShowMenu(false);
+      fileInputRef.current.click(); // triggers onChange of the input
+    }
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: CameraIcon
+  })), /*#__PURE__*/React.createElement(ListItemText, {
+    primary: t('EditBadge.menu.update')
+  })), /*#__PURE__*/React.createElement(MenuItem, {
+    onClick: function onClick() {
+      return handleDelete({
+        t: t,
+        status: status,
+        onDelete: onDelete,
+        setShowMenu: setShowMenu,
+        setStatus: setStatus,
+        setTimestamp: setTimestamp,
+        showAlert: showAlert
+      });
+    }
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: TrashIcon
+  })), /*#__PURE__*/React.createElement(ListItemText, {
+    primary: t('EditBadge.menu.delete')
+  }))));
+};
+
+export default EditMenu;

package/transpiled/react/EditBadge/StatusWrapper.d.ts

@@ -0,0 +1,9 @@
+export default StatusWrapper;
+declare function StatusWrapper({ src, status, setStatus, timestamp, children }: {
+    src: any;
+    status: any;
+    setStatus: any;
+    timestamp: any;
+    children: any;
+}): JSX.Element | (React.ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];
+import React from "react";

package/transpiled/react/EditBadge/StatusWrapper.js

@@ -0,0 +1,44 @@
+import cx from 'classnames';
+import React from 'react';
+import Spinner from "cozy-ui/transpiled/react/Spinner";
+import { AddPropsToChildren } from "cozy-ui/transpiled/react/utils/react";
+
+var StatusWrapper = function StatusWrapper(_ref) {
+  var src = _ref.src,
+      status = _ref.status,
+      setStatus = _ref.setStatus,
+      timestamp = _ref.timestamp,
+      children = _ref.children;
+
+  if (status === 'LOADING') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, AddPropsToChildren(children, function (childProps) {
+      return {
+        className: cx(childProps.className, 'u-o-50')
+      };
+    }), /*#__PURE__*/React.createElement(Spinner, {
+      className: "u-m-0",
+      middle: true,
+      size: "large"
+    }));
+  }
+
+  if (status === 'PRESENT') {
+    return AddPropsToChildren(children, function () {
+      return {
+        key: timestamp,
+        src: src,
+        onError: function onError() {
+          return setStatus('ABSENT');
+        }
+      };
+    });
+  }
+
+  return AddPropsToChildren(children, function () {
+    return {
+      key: timestamp
+    };
+  });
+};
+
+export default StatusWrapper;

package/transpiled/react/EditBadge/helpers.d.ts

@@ -0,0 +1,20 @@
+export function handleUpload({ event, t, fileInputRef, status, onUpload, setStatus, setTimestamp, setShowMenu, showAlert }: {
+    event: any;
+    t: any;
+    fileInputRef: any;
+    status: any;
+    onUpload: any;
+    setStatus: any;
+    setTimestamp: any;
+    setShowMenu: any;
+    showAlert: any;
+}): Promise<void>;
+export function handleDelete({ t, status, onDelete, setShowMenu, setStatus, setTimestamp, showAlert }: {
+    t: any;
+    status: any;
+    onDelete: any;
+    setShowMenu: any;
+    setStatus: any;
+    setTimestamp: any;
+    showAlert: any;
+}): Promise<void>;