@oliasoft-open-source/react-ui-library 2.4.8 → 3.0.0

package/src/components/pagination/pagination.jsx

@@ -1,139 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import {
-  FaAngleLeft,
-  FaAngleDoubleLeft,
-  FaAngleRight,
-  FaAngleDoubleRight,
-} from 'react-icons/fa';
-import { Select } from '../select/select';
-import { Input } from '../input/input';
-import { numberOfPages, validateSelectedPage } from './pagination.viewdata';
-import styles from './pagination.module.less';
-import { Button } from '../button/button';
-import { InputGroup } from '../input-group/input-group';
-import { InputGroupAddon } from '../input-group/input-group-addon/input-group-addon';
-
-export const Pagination = ({ pagination }) => {
-  const {
-    rowCount,
-    selectedPage,
-    small,
-    onSelectPage,
-    rowsPerPage,
-    errorMessageTemplate,
-  } = pagination;
-  const showAll = Number(rowsPerPage?.value) === 0;
-  const numPages = numberOfPages(rowCount, rowsPerPage);
-  const [unvalidatedSelectedPage, setUnvalidatedSelectedPage] = useState(
-    String(selectedPage),
-  );
-  useEffect(() => {
-    setUnvalidatedSelectedPage(String(selectedPage));
-  }, [selectedPage]);
-  const { error } = validateSelectedPage(
-    unvalidatedSelectedPage,
-    numPages,
-    errorMessageTemplate,
-  );
-
-  const setSelectedPage = (value) => {
-    const { valid } = validateSelectedPage(
-      value,
-      numPages,
-      errorMessageTemplate,
-    );
-    setUnvalidatedSelectedPage(value);
-    if (valid && value !== '') {
-      onSelectPage(Number(value));
-    }
-  };
-
-  return (
-    <div className={styles.paginationContainer}>
-      {rowsPerPage && (
-        <div style={{ flexShrink: 0 }}>
-          <Select
-            onChange={(evt) => {
-              rowsPerPage.onChange(evt);
-              setSelectedPage(String(1));
-            }}
-            options={rowsPerPage.options}
-            native={!!rowsPerPage.options}
-            small={small}
-            width="auto"
-            value={rowsPerPage.value}
-          />
-        </div>
-      )}
-      <Button
-        small={small}
-        basic
-        icon={<FaAngleDoubleLeft />}
-        onClick={() => setSelectedPage(String(1))}
-        disabled={showAll || selectedPage === 1}
-      />
-      <Button
-        small={small}
-        basic
-        icon={<FaAngleLeft />}
-        onClick={() => setSelectedPage(String(selectedPage - 1))}
-        disabled={showAll || selectedPage === 1}
-      />
-      <InputGroup small={small} width="auto">
-        <Input
-          right
-          value={unvalidatedSelectedPage}
-          placeholder={String(selectedPage)}
-          onChange={(evt) => setSelectedPage(evt.target.value)}
-          width="50px"
-          disabled={showAll || numPages <= 1}
-          error={error}
-        />
-        <InputGroupAddon>of {numPages}</InputGroupAddon>
-      </InputGroup>
-      <Button
-        small={small}
-        basic
-        icon={<FaAngleRight />}
-        onClick={() => setSelectedPage(String(selectedPage + 1))}
-        disabled={showAll || selectedPage === numPages}
-      />
-      <Button
-        small={small}
-        basic
-        icon={<FaAngleDoubleRight />}
-        onClick={() => setSelectedPage(String(numPages))}
-        disabled={showAll || selectedPage === numPages}
-      />
-    </div>
-  );
-};
-
-export const paginationShape = PropTypes.shape({
-  rowCount: PropTypes.number.isRequired,
-  selectedPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  rowsPerPage: PropTypes.shape({
-    onChange: PropTypes.func.isRequired,
-    options: PropTypes.arrayOf(
-      PropTypes.shape({
-        label: PropTypes.string.isRequired,
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-          .isRequired,
-        selected: PropTypes.bool,
-      }),
-    ).isRequired,
-    value: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string, //deprecated
-      PropTypes.number, //deprecated
-    ]),
-  }),
-  onSelectPage: PropTypes.func,
-  small: PropTypes.bool,
-  errorMessageTemplate: PropTypes.string,
-});
-
-Pagination.propTypes = {
-  pagination: paginationShape.isRequired,
-};

package/src/components/pagination/pagination.module.less

@@ -1,11 +0,0 @@
-.paginationContainer {
-  display: flex;
-  align-items: center;
-}
-
-.pagination {
-  display: flex;
-  padding-left: 0;
-  list-style: none;
-  margin: 0 1rem;
-}

package/src/components/pagination/pagination.stories.jsx

@@ -1,78 +0,0 @@
-import React, { useState } from 'react';
-import { Pagination } from '../../..';
-
-const pagination = {
-  rowCount: 500,
-  selectedPage: 1,
-  onSelectPage: () => {},
-};
-
-export default {
-  title: 'Basic/Pagination',
-  component: Pagination,
-  args: {
-    pagination,
-  },
-};
-
-export const Default = () => {
-  const [selectedPage, setSelectedPage] = useState(1);
-  return (
-    <Pagination
-      pagination={{
-        rowCount: 500,
-        selectedPage,
-        onSelectPage: (evt) => setSelectedPage(evt),
-      }}
-    />
-  );
-};
-
-export const RowsPerPage = () => {
-  const [selectedPage, setSelectedPage] = useState(1);
-  const [rowsPerPage, setRowsPerPage] = useState(20);
-  return (
-    <Pagination
-      pagination={{
-        rowCount: 500,
-        selectedPage,
-        rowsPerPage: {
-          onChange: (evt) => setRowsPerPage(Number(evt.target.value)),
-          options: [
-            { label: '10 / page', value: 10 },
-            { label: '20 / page', value: 20 },
-            { label: '50 / page', value: 50 },
-            { label: 'Show all', value: 0 },
-          ],
-          value: rowsPerPage,
-        },
-        onSelectPage: (evt) => setSelectedPage(evt),
-      }}
-    />
-  );
-};
-
-export const Small = () => {
-  const [selectedPage, setSelectedPage] = useState(1);
-  const [rowsPerPage, setRowsPerPage] = useState(20);
-  return (
-    <Pagination
-      pagination={{
-        small: true,
-        rowCount: 500,
-        selectedPage,
-        rowsPerPage: {
-          onChange: (evt) => setRowsPerPage(Number(evt.target.value)),
-          options: [
-            { label: '10 / page', value: 10 },
-            { label: '20 / page', value: 20 },
-            { label: '50 / page', value: 50 },
-            { label: 'Show all', value: 0 },
-          ],
-          value: rowsPerPage,
-        },
-        onSelectPage: (evt) => setSelectedPage(evt),
-      }}
-    />
-  );
-};

package/src/components/pagination/pagination.test.js

@@ -1,92 +0,0 @@
-import {
-  selectedRowsPerPage,
-  numberOfPages,
-  validateSelectedPage,
-} from './pagination.viewdata';
-
-describe('pagination', () => {
-  test('selected rows per page, by value', () => {
-    const options = [{}, {}, { value: 30, selected: true }, {}];
-    const value = 66;
-    expect(selectedRowsPerPage(options, value)).toBe(66);
-  });
-  test('selected rows per page, by selected option', () => {
-    const options = [{}, {}, { value: 30, selected: true }, {}];
-    expect(selectedRowsPerPage(options)).toBe(30);
-  });
-  test('default selected rows per page', () => {
-    expect(selectedRowsPerPage()).toBe(10);
-  });
-
-  test('number of pages defaults to 10', () => {
-    expect(numberOfPages()).toBe(10);
-  });
-  test('number of pages is 1 if rows per page is 0', () => {
-    expect(numberOfPages(Infinity, { value: 0 })).toBe(1);
-  });
-  test('number of pages works with options', () => {
-    expect(
-      numberOfPages(5, {
-        options: [
-          {},
-          { value: 1 },
-          { value: 2, selected: false },
-          { value: 3, selected: true },
-          {},
-        ],
-      }),
-    ).toBe(2);
-  });
-  test('number of pages otherwise behaves as expected', () => {
-    expect(numberOfPages(5, { value: 1 })).toBe(5);
-    expect(numberOfPages(5, { value: 2 })).toBe(3);
-    expect(numberOfPages(5, { value: 5 })).toBe(1);
-    expect(numberOfPages(5, { value: 7 })).toBe(1);
-  });
-  test('validateSelectedPage', () => {
-    expect(validateSelectedPage('4', 12)).toStrictEqual({
-      valid: true,
-      error: null,
-    });
-    expect(validateSelectedPage('', 12)).toStrictEqual({
-      valid: true,
-      error: null,
-    });
-    expect(validateSelectedPage('1', 1)).toStrictEqual({
-      valid: true,
-      error: null,
-    });
-    expect(validateSelectedPage('13', 12)).toStrictEqual({
-      valid: false,
-      error: 'Selected page must be a positive whole number between 1 and 12',
-    });
-    expect(validateSelectedPage('x', 12)).toStrictEqual({
-      valid: false,
-      error: 'Selected page must be a positive whole number between 1 and 12',
-    });
-    expect(validateSelectedPage('1.', 12)).toStrictEqual({
-      valid: false,
-      error: 'Selected page must be a positive whole number between 1 and 12',
-    });
-    expect(validateSelectedPage('1.0', 12)).toStrictEqual({
-      valid: false,
-      error: 'Selected page must be a positive whole number between 1 and 12',
-    });
-    expect(validateSelectedPage('1.1', 12)).toStrictEqual({
-      valid: false,
-      error: 'Selected page must be a positive whole number between 1 and 12',
-    });
-    expect(validateSelectedPage('1,1', 12)).toStrictEqual({
-      valid: false,
-      error: 'Selected page must be a positive whole number between 1 and 12',
-    });
-    expect(validateSelectedPage('1x', 12)).toStrictEqual({
-      valid: false,
-      error: 'Selected page must be a positive whole number between 1 and 12',
-    });
-    expect(validateSelectedPage('-1', 12)).toStrictEqual({
-      valid: false,
-      error: 'Selected page must be a positive whole number between 1 and 12',
-    });
-  });
-});

package/src/components/pagination/pagination.viewdata.js

@@ -1,66 +0,0 @@
-export const selectedRowsPerPage = (options, value) => {
-  return (
-    value ||
-    (options &&
-      options.reduce((acc, row) => {
-        return row.selected ? row.value : acc;
-      }, 10)) ||
-    10
-  );
-};
-
-/**
- * Calculate number of pages
- * @param {number} numberOfRows
- * @param {object} pageContainer - Object containing page 'options' and rows per page 'value'.
- * @returns {number}
- */
-export const numberOfPages = (numberOfRows, pageContainer) => {
-  // Default
-  if (!pageContainer) {
-    return 10;
-  }
-
-  const { options, value } = pageContainer;
-
-  // Show all
-  if (value === 0) {
-    return 1;
-  }
-
-  return Math.ceil(numberOfRows / selectedRowsPerPage(options, value));
-};
-
-/**
- * Validate the selected page input value
- * @param {string} selectedPage
- * @param {number} numPages
- * @param {string} errorMessageTemplate
- * @returns {Object}
- */
-
-export const validateSelectedPage = (
-  selectedPage,
-  numPages,
-  errorMessageTemplate = 'Selected page must be a positive whole number between 1 and',
-) => {
-  const error = `${errorMessageTemplate} ${numPages}`;
-  const valid = {
-    valid: true,
-    error: null,
-  };
-  if (selectedPage === '') {
-    return valid;
-  }
-  if (
-    !selectedPage.match(/^\d+$/g) ||
-    selectedPage <= 0 ||
-    selectedPage > numPages
-  ) {
-    return {
-      valid: false,
-      error,
-    };
-  }
-  return valid;
-};

package/src/components/pop-confirm/content.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Button } from '../button/button';
-import { Text } from '../text/text';
-import styles from './pop-confirm.module.less';
-
-export const Content = ({
-  title,
-  okText,
-  onClickOk,
-  cancelText,
-  onClickCancel,
-  close,
-}) => (
-  <div className={styles.popConfirm}>
-    {title && (
-      <div className={styles.content}>
-        <Text>{title}</Text>
-      </div>
-    )}
-    <div className={styles.buttons}>
-      <Button colored label={okText} onClick={() => onClickOk(close)} />
-      <Button label={cancelText} onClick={() => onClickCancel(close)} />
-    </div>
-  </div>
-);

package/src/components/pop-confirm/pop-confirm.jsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Popover } from '../popover/popover';
-import { Content } from './content';
-
-export const PopConfirm = ({
-  children,
-  placement,
-  closeOnOutsideClick,
-  fullWidth,
-  title,
-  cancelText,
-  onClickCancel,
-  okText,
-  onClickOk,
-}) => {
-  const content = (
-    <Content
-      title={title}
-      okText={okText}
-      onClickOk={onClickOk}
-      cancelText={cancelText}
-      onClickCancel={onClickCancel}
-    />
-  );
-
-  return (
-    <Popover
-      content={content}
-      placement={placement}
-      closeOnOutsideClick={closeOnOutsideClick}
-      fullWidth={fullWidth}
-    >
-      {children}
-    </Popover>
-  );
-};
-
-PopConfirm.propTypes = {
-  children: PropTypes.any,
-  placement: PropTypes.string, //https://www.react-laag.com/docs/togglelayer/
-  closeOnOutsideClick: PropTypes.bool,
-  fullWidth: PropTypes.bool,
-  title: PropTypes.string,
-  cancelText: PropTypes.string,
-  onClickCancel: PropTypes.func,
-  okText: PropTypes.string,
-  onClickOk: PropTypes.func,
-};
-
-PopConfirm.defaultProps = {
-  children: null,
-  placement: 'top-center',
-  closeOnOutsideClick: true,
-  fullWidth: false,
-  title: '',
-  cancelText: 'Cancel',
-  onClickCancel: (close) => close(),
-  okText: 'Ok',
-  onClickOk: (close) => {},
-};

package/src/components/pop-confirm/pop-confirm.module.less

@@ -1,18 +0,0 @@
-.popConfirm {
-  max-width: 350px;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.content {
-  max-height: 200px;
-  word-wrap: break-word;
-  overflow-y: auto;
-}
-
-.buttons {
-  display: flex;
-  gap: 15px;
-  justify-content: center;
-}

package/src/components/pop-confirm/pop-confirm.stories.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { PopConfirm, Button, toast } from '../../..';
-
-const onOk = (close) => {
-  toast({
-    message: {
-      type: 'Success',
-      content: 'success!',
-      details: 'You successfully booked your cruise to Bahamas.',
-    },
-  });
-  close();
-};
-
-export default {
-  title: 'Basic/PopConfirm',
-  component: PopConfirm,
-  args: {
-    title: 'Do you want a free cruise to Bahamas?',
-    onClickCancel: (close) => close(),
-    onClickOk: onOk,
-    children: <Button label="Click me!" />,
-  },
-  decorators: [
-    (story) => (
-      <div
-        style={{
-          display: 'flex',
-          height: 150,
-          alignItems: 'flex-end',
-          justifyContent: 'center',
-        }}
-      >
-        {story()}
-      </div>
-    ),
-  ],
-  parameters: {
-    docs: {
-      source: {
-        excludeDecorators: true,
-      },
-    },
-  },
-};
-
-const Template = (args) => (
-  <PopConfirm
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    {...args}
-  />
-);
-export const Default = Template.bind({});

package/src/components/popover/popover.jsx

@@ -1,112 +0,0 @@
-import React, { useState, useEffect, useContext } from 'react';
-import PropTypes from 'prop-types';
-import ResizeObserver from 'resize-observer-polyfill';
-import { FaTimes } from 'react-icons/fa';
-import cx from 'classnames';
-import { Arrow, useLayer } from 'react-laag';
-import { Button } from '../button/button';
-import styles from './popover.module.less';
-import { DisabledContext } from '../../helpers/disabled-context';
-
-export const Popover = ({
-  children,
-  content,
-  placement,
-  closeOnOutsideClick,
-  fullWidth,
-  showCloseButton,
-  testId,
-  disabled,
-  overflowContainer,
-}) => {
-  const disabledContext = useContext(DisabledContext);
-
-  const [isOpen, setOpen] = useState(false);
-
-  const close = () => setOpen(false);
-  const toggle = () => {
-    if (!(disabled || disabledContext)) {
-      setOpen(!isOpen);
-    }
-  };
-
-  useEffect(() => {
-    if (!(disabled || disabledContext)) {
-      close();
-    }
-  }, [disabled, disabledContext]);
-
-  const { renderLayer, arrowProps, layerProps, triggerProps } = useLayer({
-    isOpen,
-    placement,
-    auto: true,
-    triggerOffset: 6,
-    onOutsideClick: closeOnOutsideClick ? close : undefined,
-    ResizeObserver,
-    overflowContainer,
-  });
-
-  return (
-    <>
-      <div ref={triggerProps.ref} onClick={toggle} data-testid={testId}>
-        {children}
-      </div>
-      {isOpen &&
-        renderLayer(
-          <div
-            className={
-              fullWidth
-                ? cx(styles.toggleBox, styles.fullWidthStyleFix)
-                : cx(styles.toggleBox)
-            }
-            {...layerProps} // eslint-disable-line react/jsx-props-no-spreading
-          >
-            <div>
-              {React.isValidElement(content)
-                ? React.cloneElement(content, { close })
-                : content}
-              {showCloseButton && (
-                <div className={styles.dismiss}>
-                  <Button
-                    small
-                    round
-                    onClick={() => close()}
-                    icon={<FaTimes />}
-                  />
-                </div>
-              )}
-            </div>
-            <Arrow
-              {...arrowProps} // eslint-disable-line react/jsx-props-no-spreading
-              backgroundColor="var(--color-background-raised)"
-              borderColor="var(--color-border)"
-              borderWidth={1}
-              size={6}
-            />
-          </div>,
-        )}
-    </>
-  );
-};
-
-Popover.propTypes = {
-  content: PropTypes.node,
-  closeOnOutsideClick: PropTypes.bool,
-  placement: PropTypes.string, //https://www.react-laag.com/docs/togglelayer/
-  fullWidth: PropTypes.bool,
-  showCloseButton: PropTypes.bool, //when closeOnOutsideClick is false and no cancel button is suitable
-  testId: PropTypes.string,
-  disabled: PropTypes.bool,
-  overflowContainer: PropTypes.bool,
-};
-
-Popover.defaultProps = {
-  content: null,
-  closeOnOutsideClick: true,
-  placement: 'top-center',
-  fullWidth: false,
-  showCloseButton: false,
-  testId: undefined,
-  disabled: false,
-  overflowContainer: false,
-};

package/src/components/popover/popover.module.less

@@ -1,22 +0,0 @@
-@import '../../style/variables.less';
-
-.toggleBox {
-  background-color: var(--color-background-raised);
-  padding: 14px;
-  border: 1px solid var(--color-border);
-  border-radius: 3px;
-  z-index: @zindex_popover;
-}
-
-.fullWidthStyleFix {
-  max-width: 100%;
-  left: 0 !important;
-  margin: 0 35px;
-}
-
-.dismiss {
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
-}