cozy-viewer 1.1.0

package/dist/proptypes.d.ts

@@ -0,0 +1,7 @@
+export namespace toolbarPropsPropType {
+    const showToolbar: PropTypes.Requireable<boolean>;
+    const showClose: PropTypes.Requireable<boolean>;
+    const toolbarRef: PropTypes.Requireable<object>;
+    const showFilePath: PropTypes.Requireable<boolean>;
+}
+import PropTypes from "prop-types";

package/dist/proptypes.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toolbarPropsPropType = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var toolbarPropsPropType = {
+  /** Whether to show the toolbar or not. Note that the built-in close button is in the toolbar */
+  showToolbar: _propTypes.default.bool,
+
+  /** Whether to show close button in toolbar */
+  showClose: _propTypes.default.bool,
+
+  /** React reference of the toolbar node */
+  toolbarRef: _propTypes.default.object,
+
+  /** Whether to show file path below his name */
+  showFilePath: _propTypes.default.bool
+};
+exports.toolbarPropsPropType = toolbarPropsPropType;

package/dist/providers/ActionMenuProvider.d.ts

@@ -0,0 +1,13 @@
+export default useActionMenuContext;
+export type useActionMenuContextReturn = {
+    information: string;
+    page: string;
+};
+/**
+ * @returns {useActionMenuContextReturn}
+ */
+declare function useActionMenuContext(): useActionMenuContextReturn;
+export function ActionMenuProvider({ children, editPathByModelProps }: {
+    children: any;
+    editPathByModelProps?: {} | undefined;
+}): JSX.Element;

package/dist/providers/ActionMenuProvider.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ActionMenuProvider = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * @typedef {object} useActionMenuContextReturn
+ * @property {string} information
+ * @property {string} page
+ */
+var ActionMenuContext = /*#__PURE__*/(0, _react.createContext)();
+
+var ActionMenuProvider = function ActionMenuProvider(_ref) {
+  var children = _ref.children,
+      _ref$editPathByModelP = _ref.editPathByModelProps,
+      editPathByModelProps = _ref$editPathByModelP === void 0 ? {} : _ref$editPathByModelP;
+  return /*#__PURE__*/_react.default.createElement(ActionMenuContext.Provider, {
+    value: editPathByModelProps
+  }, children);
+};
+/**
+ * @returns {useActionMenuContextReturn}
+ */
+
+
+exports.ActionMenuProvider = ActionMenuProvider;
+
+var useActionMenuContext = function useActionMenuContext() {
+  var actionMenuContext = (0, _react.useContext)(ActionMenuContext);
+
+  if (!actionMenuContext) {
+    throw new Error('ActionMenuContext must be used within a ActionMenuProvider');
+  }
+
+  return actionMenuContext;
+};
+
+var _default = useActionMenuContext;
+exports.default = _default;

package/dist/providers/EncryptedProvider.d.ts

@@ -0,0 +1,8 @@
+export const EncryptedContext: React.Context<any>;
+export function useEncrypted(): any;
+declare var _default: React.MemoExoticComponent<({ url, children }: {
+    url: any;
+    children: any;
+}) => JSX.Element>;
+export default _default;
+import React from "react";

package/dist/providers/EncryptedProvider.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEncrypted = exports.default = exports.EncryptedContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var EncryptedContext = /*#__PURE__*/_react.default.createContext();
+
+exports.EncryptedContext = EncryptedContext;
+
+var useEncrypted = function useEncrypted() {
+  var context = (0, _react.useContext)(EncryptedContext);
+
+  if (!context) {
+    throw new Error('useEncrypted must be used within a EncryptedProvider');
+  }
+
+  return context;
+};
+
+exports.useEncrypted = useEncrypted;
+
+var EncryptedProvider = function EncryptedProvider(_ref) {
+  var url = _ref.url,
+      children = _ref.children;
+  var contextValue = {
+    url: url
+  };
+  return /*#__PURE__*/_react.default.createElement(EncryptedContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
+var _default = /*#__PURE__*/_react.default.memo(EncryptedProvider);
+
+exports.default = _default;

package/dist/queries.d.ts

@@ -0,0 +1,15 @@
+export function buildContactByIdsQuery(ids?: any[]): {
+    definition: () => import("cozy-client").QueryDefinition;
+    options: {
+        as: string;
+        fetchPolicy: Function;
+    };
+};
+export function buildFileByIdQuery(fileId: any): {
+    definition: () => import("cozy-client").QueryDefinition;
+    options: {
+        as: string;
+        fetchPolicy: Function;
+        singleDocData: boolean;
+    };
+};

package/dist/queries.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildFileByIdQuery = exports.buildContactByIdsQuery = void 0;
+
+var _cozyClient = require("cozy-client");
+
+var defaultFetchPolicy = _cozyClient.fetchPolicies.olderThan(30 * 1000);
+
+var buildContactByIdsQuery = function buildContactByIdsQuery() {
+  var ids = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return {
+    definition: function definition() {
+      return (0, _cozyClient.Q)('io.cozy.contacts').getByIds(ids);
+    },
+    options: {
+      as: "io.cozy.contacts/".concat(ids.join('')),
+      fetchPolicy: defaultFetchPolicy
+    }
+  };
+};
+
+exports.buildContactByIdsQuery = buildContactByIdsQuery;
+
+var buildFileByIdQuery = function buildFileByIdQuery(fileId) {
+  return {
+    definition: function definition() {
+      return (0, _cozyClient.Q)('io.cozy.files').getById(fileId);
+    },
+    options: {
+      as: "io.cozy.files/".concat(fileId),
+      fetchPolicy: defaultFetchPolicy,
+      singleDocData: true
+    }
+  };
+};
+
+exports.buildFileByIdQuery = buildFileByIdQuery;

package/dist/stylesheet.css

@@ -0,0 +1,218 @@
+/*  imported from styles.styl  */
+
+.viewer-imageviewer,
+.viewer-noviewer,
+.viewer-audioviewer,
+.viewer-videoviewer,
+.viewer-pdfviewer,
+.viewer-textviewer,
+.viewer-canceled {
+  position: relative;
+  display: flex;
+  width: 60%;
+  max-height: calc(100% - 4rem);
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-top: 4rem;
+}
+.viewer-imageviewer h2,
+.viewer-noviewer h2,
+.viewer-audioviewer h2,
+.viewer-videoviewer h2,
+.viewer-pdfviewer h2,
+.viewer-textviewer h2,
+.viewer-canceled h2 {
+  max-width: 90%;
+}
+@media (max-width: 63.938rem) {
+  .viewer-imageviewer,
+  .viewer-noviewer,
+  .viewer-audioviewer,
+  .viewer-videoviewer,
+  .viewer-pdfviewer,
+  .viewer-textviewer,
+  .viewer-canceled {
+    margin-left: 0;
+    width: 100%;
+    max-height: calc(100% - 6.5rem);
+    margin-top: -0.5rem;
+  }
+}
+.viewer-videoviewer video {
+  width: 100%;
+  max-width: 31.25rem;
+  height: auto;
+}
+.viewer-textviewer .viewer-textviewer-content {
+  white-space: pre-line;
+  width: 100%;
+  max-height: 70%;
+  overflow: auto;
+}
+.viewer-textviewer a {
+  color: var(--azure);
+}
+@media (max-width: 63.938rem) {
+  .viewer-textviewer {
+    width: 90%;
+    margin-left: 5%;
+  }
+}
+.viewer-filename {
+  max-width: 90%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.viewer-pdfviewer-pdf {
+  overflow: auto;
+  width: 100%;
+}
+.viewer-pdfviewer-page > * {
+  margin: auto;
+}
+.viewer-pdfviewer-toolbar {
+  position: absolute;
+  bottom: 2rem;
+  background: var(--charcoalGrey);
+  color: var(--white);
+  border-radius: 0.5rem;
+}
+.viewer-imageviewer {
+  flex: 1 1 100%;
+  width: auto;
+  max-width: 100%;
+}
+.viewer-imageviewer img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  box-shadow: 0 0.375rem 1.5rem 0 rgba(0,0,0,0.5);
+}
+.viewer-pdfMobile {
+  width: 100%;
+  height: calc(100% - 6.5rem - var(--flagship-top-height));
+  margin-top: calc(var(--flagship-top-height, 0rem) + -0.5rem);
+}
+.viewer-pdfMobile--image {
+  width: 100%;
+}
+/*  imported from styles.styl  */
+
+.ActionMenuDesktop-ActionMenu a {
+  padding: 0 !important;
+}
+.ActionMenuDesktop-ActionMenu .ActionMenuDesktop-ActionMenu-link-disabled > div {
+  cursor: default;
+}
+.ActionMenuDesktop-ActionMenu .ActionMenuDesktop-ActionMenu-link-disabled > div:hover {
+  background-color: initial;
+}
+.ActionMenuDesktop-ActionMenu .ActionMenuDesktop-ActionMenu-link-disabled > div > div svg {
+  fill: var(--disabledTextColor);
+}
+.ActionMenuDesktop-ActionMenu .ActionMenuDesktop-ActionMenu-link-disabled > div > div p {
+  color: var(--disabledTextColor);
+}
+/*  imported from styles.styl  */
+
+@media (max-width: 48rem) {
+}
+@media (max-width: 63.938rem) {
+}
+.viewer-nav {
+  position: absolute;
+  top: 4rem;
+  bottom: 0;
+  z-index: var(--zIndex-modal-toolbar);
+  width: 20%;
+  cursor: pointer;
+  background-color: transparent;
+  transition: 0.4s opacity ease-out;
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.viewer-nav--visible:hover {
+  opacity: 1;
+  transition: none;
+}
+.viewer-nav--previous {
+  left: 0;
+}
+.viewer-nav--previous .viewer-nav-arrow {
+  align-self: flex-start;
+  margin-left: 2.5rem;
+  transform: rotate(180deg);
+}
+.viewer-nav--next {
+  right: 0;
+}
+.viewer-nav--next .viewer-nav-arrow {
+  align-self: flex-end;
+  margin-right: 2.5rem;
+}
+@media (max-width: 63.938rem) {
+  .viewer-nav {
+    display: none;
+  }
+}
+.viewer-nav-arrow {
+  opacity: 0.7;
+}
+.viewer-controls {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.viewer-controls._--expanded .viewer-nav {
+  margin-top: 0;
+  width: 40%;
+}
+@media (max-width: 63.938rem) {
+  .viewer-controls--display-content-top {
+    justify-content: flex-start;
+    padding-top: 4.5rem;
+  }
+}
+.viewer-toolbar {
+  position: absolute;
+  top: 0;
+  z-index: var(--zIndex-modal-toolbar);
+  display: flex;
+  flex-shrink: 0;
+  width: calc(100% - 1rem);
+  padding: 0 0.5rem;
+  height: 4rem;
+  transition: 0.4s opacity ease-out;
+  background: linear-gradient(to bottom, var(--charcoalGrey), rgba(50,54,63,0));
+  justify-content: flex-start;
+  align-items: center;
+}
+.viewer-toolbar--hidden {
+  opacity: 0;
+}
+@media (max-width: 63.938rem) {
+  .viewer-toolbar {
+    height: 3rem;
+    width: 100%;
+    padding: var(--flagship-top-height) 1rem 0 0;
+    background: var(--paperBackgroundColor);
+    border-bottom: 1px solid var(--dividerColor);
+  }
+}
+.viewer-footer {
+  position: fixed;
+  bottom: 0;
+  z-index: var(--zIndex-modal-footer);
+  width: 100%;
+  height: 3.5rem;
+  padding-bottom: var(--flagship-bottom-height, env(safe-area-inset-bottom));
+  background: var(--paperBackgroundColor);
+}

package/jest.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  testPathIgnorePatterns: ['node_modules', 'dist'],
+  testEnvironment: 'jest-environment-jsdom-sixteen',
+  testURL: 'http://localhost/',
+  moduleFileExtensions: ['js', 'jsx', 'json', 'styl', 'ts', 'tsx'],
+  moduleDirectories: ['src', 'node_modules'],
+  moduleNameMapper: {
+    '\\.(png|gif|jpe?g|svg)$': '<rootDir>/test/__mocks__/fileMock.js',
+    '\\.styl$': 'identity-obj-proxy',
+    'react-pdf/dist/esm/entry.webpack': 'react-pdf',
+    '^cozy-client$': 'cozy-client/dist/index'
+  },
+  transformIgnorePatterns: ['node_modules/(?!(cozy-ui|cozy-harvest-lib))'],
+  transform: {
+    '^.+\\.(ts|tsx|js|jsx)?$': 'babel-jest'
+  },
+  globals: {
+    __ALLOW_HTTP__: false,
+    cozy: {}
+  },
+  setupFilesAfterEnv: ['<rootDir>/test/jestLib/setup.js', 'jest-canvas-mock'],
+  snapshotSerializers: ['enzyme-to-json/serializer']
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "cozy-viewer",
+  "version": "1.1.0",
+  "description": "Cozy-Viewer provides a component to show files in a viewer.",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "homepage": "https://github.com/cozy/cozy-libs/blob/master/packages/cozy-scanner/README.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cozy/cozy-libs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cozy/cozy-libs/issues"
+  },
+  "scripts": {
+    "build": "rm -rf ./dist && tsc -p tsconfig-build.json && env BABEL_ENV=transpilation babel --extensions .ts,.tsx,.js,.jsx,.md,.styl,.json,.snap ./src -d ./dist --copy-files --no-copy-ignored --verbose",
+    "start": "yarn build --watch",
+    "test": "env NODE_ENV='test' jest",
+    "lint": "cd .. && yarn eslint --ext js,jsx packages/cozy-viewer"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "11.2.7",
+    "@testing-library/react-hooks": "^3.2.1",
+    "babel-preset-cozy-app": "2.1.0",
+    "cozy-client": "48.8.0",
+    "cozy-device-helper": "2.0.0",
+    "cozy-harvest-lib": "^6.7.3",
+    "cozy-intent": "^1.16.1",
+    "cozy-logger": "^1.9.0",
+    "cozy-sharing": "14.1.0",
+    "cozy-ui": "^111.9.0",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.6",
+    "enzyme-to-json": "3.6.2",
+    "identity-obj-proxy": "3.0.0",
+    "jest-canvas-mock": "2.3.1",
+    "prop-types": "15.8.1",
+    "react-dom": "16.12.0",
+    "react-test-renderer": "16.12.0",
+    "stylus": "0.63.0"
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "hammerjs": "^2.0.8",
+    "lodash": "4.17.21",
+    "react-markdown": "^4.0.8",
+    "react-pdf": "^5.7.2"
+  },
+  "peerDependencies": {
+    "cozy-client": ">=48.8.0",
+    "cozy-device-helper": ">=2.0.0",
+    "cozy-harvest-lib": ">=6.7.3",
+    "cozy-intent": ">=1.16.1",
+    "cozy-logger": ">=1.9.0",
+    "cozy-sharing": ">=14.1.0",
+    "cozy-ui": ">=111.9.0",
+    "react": ">=16.12.0",
+    "react-dom": ">=16.12.0"
+  },
+  "gitHead": "dd811f957ba647453ca753bd78bff8fd7661a366"
+}

package/preprocess.js

@@ -0,0 +1,16 @@
+const stylus = require('stylus')
+
+const cozyStylusPlugin = require('cozy-ui/stylus')
+
+const renderStylus = function (css, filename) {
+  try {
+    return stylus(css)
+      .use(cozyStylusPlugin())
+      .set('filename', filename)
+      .render()
+  } catch (e) {
+    console.log(e) // eslint-disable-line no-console
+  }
+}
+
+module.exports = renderStylus

package/src/Footer/BottomSheetContent.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { BottomSheetItem } from 'cozy-ui/transpiled/react/BottomSheet'
+
+import getPanelBlocks, { getPanelBlocksSpecs } from '../Panel/getPanelBlocks'
+
+const BottomSheetContent = ({ file, isPublic }) => {
+  const panelBlocks = getPanelBlocks({
+    panelBlocksSpecs: getPanelBlocksSpecs(isPublic),
+    file
+  })
+
+  return panelBlocks.map((PanelBlock, index) => (
+    <BottomSheetItem
+      key={index}
+      disableGutters
+      disableElevation={index === panelBlocks.length - 1}
+    >
+      <PanelBlock file={file} />
+    </BottomSheetItem>
+  ))
+}
+
+BottomSheetContent.propTypes = {
+  file: PropTypes.object.isRequired,
+  isPublic: PropTypes.bool
+}
+
+export default BottomSheetContent

package/src/Footer/DownloadButton.jsx

@@ -0,0 +1,66 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { useClient } from 'cozy-client'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
+import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+const DownloadButton = ({ file, variant }) => {
+  const client = useClient()
+  const { t } = useI18n()
+
+  const icon = <Icon icon={DownloadIcon} />
+  const label = t('Viewer.download')
+
+  const handleClick = async () => {
+    try {
+      await client.collection('io.cozy.files').download(file)
+    } catch (error) {
+      Alerter.info('Viewer.error.generic')
+    }
+  }
+
+  if (variant === 'iconButton') {
+    return (
+      <IconButton className="u-white" aria-label={label} onClick={handleClick}>
+        {icon}
+      </IconButton>
+    )
+  }
+
+  if (variant === 'buttonIcon') {
+    return (
+      <Button
+        variant="secondary"
+        label={icon}
+        aria-label={label}
+        onClick={handleClick}
+      />
+    )
+  }
+
+  return (
+    <Button
+      fullWidth
+      variant="secondary"
+      startIcon={icon}
+      label={label}
+      onClick={handleClick}
+    />
+  )
+}
+
+DownloadButton.propTypes = {
+  file: PropTypes.object,
+  variant: PropTypes.oneOf(['default', 'iconButton', 'buttonIcon'])
+}
+
+DownloadButton.defaultProptypes = {
+  variant: 'default'
+}
+
+export default DownloadButton

package/src/Footer/FooterActionButtons.jsx

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import { cloneElement } from 'react'
+
+import { mapToAllChildren } from './helpers'
+
+const FooterActionButtons = ({ children, file }) => {
+  if (!children) return null
+
+  return mapToAllChildren(children, child => cloneElement(child, { file }))
+}
+
+FooterActionButtons.displayName = 'FooterActionButtons'
+
+FooterActionButtons.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node)
+  ]),
+  file: PropTypes.object
+}
+
+export default FooterActionButtons

package/src/Footer/FooterActionButtons.spec.jsx

@@ -0,0 +1,30 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import FooterActionButtons from './FooterActionButtons'
+
+describe('FooterActionButtons', () => {
+  it('should not return children', () => {
+    const { container } = render(<FooterActionButtons />)
+
+    expect(container).toMatchInlineSnapshot('<div />')
+  })
+
+  it('should render all childrens', () => {
+    const { getByText } = render(
+      <FooterActionButtons>
+        <div>
+          <p>First child</p>
+          <div>
+            <p>Sub first children</p>
+          </div>
+        </div>
+        <div>Second child</div>
+      </FooterActionButtons>
+    )
+
+    expect(getByText('First child'))
+    expect(getByText('Sub first children'))
+    expect(getByText('Second child'))
+  })
+})