@geneui/components 2.11.1

package/Pagination.js

@@ -0,0 +1,258 @@
+import React__default, { useState, useCallback } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import { a as conflictPropsLog, k as keyboardHandler } from './index-ac59cb10.js';
+import Button from './Button.js';
+import Divider from './Divider.js';
+import TextInput from './ValidatableTextInput.js';
+import Tooltip from './Tooltip.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import './Icon.js';
+import './useMount-6fef51a5.js';
+import './configs-91c86664.js';
+import './ExtendedInput.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './index-5cea9a7d.js';
+import './useKeyDown-38102ae7.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .pagination-holder{align-items:center;display:flex}[data-gene-ui-version=\"2.11.0\"] .pagination-holder .icon{cursor:pointer}[data-gene-ui-version=\"2.11.0\"] .pagination-holder .defaultCursor{cursor:default}[data-gene-ui-version=\"2.11.0\"] .pagination-holder .input-element{text-align:center}";
+styleInject(css_248z);
+
+const drawCount = 5;
+const offset = 2;
+const enterCode = 13;
+const diff = drawCount - offset;
+const numberRegExp = /^[1-9][0-9]*$/;
+function Pagination(props) {
+  const {
+    count: propCount,
+    selected,
+    onChange,
+    errorText,
+    defaultSelected,
+    supportedKeyCodes,
+    autoFocus,
+    nextIconTooltipText,
+    previousIconTooltipText
+  } = props;
+  selected && defaultSelected && conflictPropsLog('Pagination', ['selected', 'defaultSelected']);
+  const [page, setPage] = useState(selected || defaultSelected || 1);
+  const [isValid, setIsValid] = useState(true);
+  const [inputValue, setInputValue] = useState('');
+  const current = selected || page;
+  const count = propCount === 0 ? current : propCount;
+  const isLeftIconDisabled = current === 1;
+  const isRightIconDisabled = current === count;
+  const canShowDots = count > drawCount;
+  const areLeftDotsVisible = canShowDots && current > diff;
+  const areRightDotsVisible = canShowDots && current + diff <= count;
+  const setSelected = useCallback(nextSelected => {
+    if (nextSelected) {
+      !selected && setPage(nextSelected);
+      onChange && onChange(nextSelected);
+    }
+  }, [selected, onChange]);
+
+  // button handlers
+  const onClick = useCallback(e => {
+    setSelected(Number(e.currentTarget.dataset.key));
+    setInputValue('');
+    setIsValid(true);
+  }, [setSelected]);
+  const validate = useCallback(value => {
+    const allowedDigitsCount = String(count).length;
+    const checkingValue = value.length > allowedDigitsCount ? value.substring(0, allowedDigitsCount) : value;
+    const number = Number(checkingValue);
+    if (isNaN(number)) return true;
+    return !number || number <= count && number >= 1;
+  }, [count]);
+
+  // input handlers
+  const onInputChange = useCallback(e => {
+    setIsValid(validate(e.target.value));
+    const {
+      value = ''
+    } = e.target;
+    if (!value || numberRegExp.test(value) && value.length <= String(count).length) {
+      setInputValue(value);
+    }
+  }, [count, validate]);
+  const onBlur = useCallback(e => {
+    if (isValid) {
+      setSelected(Number(e.target.value));
+      setInputValue('');
+    }
+  }, [isValid, setSelected]);
+  const onInputKeyPress = useCallback(e => {
+    if (isValid && keyboardHandler(e, supportedKeyCodes)) {
+      setSelected(Number(e.target.value));
+      setInputValue('');
+    }
+  }, [isValid, setSelected, supportedKeyCodes]);
+
+  // icon handlers
+  const onLeftClick = useCallback(e => {
+    if (current > 1) {
+      setSelected(current - 1);
+      setInputValue('');
+      setIsValid(true);
+    }
+  }, [current, setSelected]);
+  const onRightClick = useCallback(e => {
+    if (current < count) {
+      setSelected(current + 1);
+      setInputValue('');
+      setIsValid(true);
+    }
+  }, [count, current, setSelected]);
+  const leftButtons = [1];
+  const rightButtons = count > 1 ? [count] : [];
+  let centerButtons = [];
+  if (count > offset) {
+    if (count - offset > diff) {
+      const customPage = current < diff ? diff : current + diff > count ? count - offset : current;
+      centerButtons = [customPage - 1, customPage, customPage + 1];
+    } else {
+      for (let i = offset; i < count; i++) {
+        centerButtons.push(i);
+      }
+    }
+  }
+  const dotedButton = () => /*#__PURE__*/React__default.createElement(Button, {
+    flexibility: "content-size",
+    color: "default",
+    appearance: "minimal",
+    className: "pointer-events-none"
+  }, "...");
+  const Input = /*#__PURE__*/React__default.createElement(Tooltip, {
+    alwaysShow: !isValid,
+    title: isValid ? '' : errorText,
+    padding: 25
+  }, /*#__PURE__*/React__default.createElement(TextInput, {
+    min: 1,
+    forceAllowValidation: true,
+    autoFocus: autoFocus,
+    max: count,
+    type: "text",
+    onBlur: onBlur,
+    value: inputValue,
+    colorBorderOnError: true,
+    showErrorIcon: false,
+    showNumberIcon: false,
+    onChange: onInputChange,
+    flexibility: "content-size",
+    placeholder: "1-".concat(count),
+    isValid: isValid,
+    onKeyPress: onInputKeyPress,
+    showClickableTooltipOnError: false,
+    className: classnames('number-input')
+  }));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "pagination-holder"
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: previousIconTooltipText
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    flexibility: "content-size",
+    color: "default",
+    appearance: "minimal",
+    icon: "bc-icon-arrow-left-nav",
+    onClick: onLeftClick,
+    disabled: isLeftIconDisabled
+  })), /*#__PURE__*/React__default.createElement(Divider, {
+    type: "vertical"
+  }), leftButtons.map(number => /*#__PURE__*/React__default.createElement(Button, {
+    key: number,
+    flexibility: "content-size",
+    color: "default",
+    appearance: "minimal",
+    onClick: number !== current ? onClick : undefined,
+    "data-key": number,
+    className: classnames(number === current && 'defaultCursor'),
+    active: number === current
+  }, number)), areLeftDotsVisible ? areRightDotsVisible ? dotedButton() : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dotedButton(), Input, dotedButton()) : null, centerButtons.map(number => /*#__PURE__*/React__default.createElement(Button, {
+    key: number,
+    flexibility: "content-size",
+    color: "default",
+    appearance: "minimal",
+    onClick: number !== current ? onClick : undefined,
+    "data-key": number,
+    className: classnames(number === current && 'defaultCursor'),
+    active: number === current
+  }, number)), areRightDotsVisible && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dotedButton(), Input, dotedButton()), rightButtons.map(number => /*#__PURE__*/React__default.createElement(Button, {
+    key: number,
+    flexibility: "content-size",
+    color: "default",
+    appearance: "minimal",
+    onClick: number !== current ? onClick : undefined,
+    "data-key": number,
+    className: classnames(number === current && 'defaultCursor'),
+    active: number === current
+  }, number)), /*#__PURE__*/React__default.createElement(Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: nextIconTooltipText
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    flexibility: "content-size",
+    color: "default",
+    appearance: "minimal",
+    icon: "bc-icon-arrow-right-nav",
+    onClick: onRightClick,
+    disabled: isRightIconDisabled
+  })));
+}
+Pagination.propTypes = {
+  /**
+   * Fires event when user changes the page
+   * (page: Number) => void
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Initially selected page
+   */
+  selected: propTypesExports.number,
+  /**
+   * Custom text if element will indicate error
+   */
+  errorText: propTypesExports.string,
+  /**
+   * Turn on/off pagination's autofocus
+   */
+  autoFocus: propTypesExports.bool,
+  /**
+   * Initially selected page
+   */
+  defaultSelected: propTypesExports.number,
+  /**
+   * Total pages count
+   */
+  count: propTypesExports.number.isRequired,
+  /**
+   * Text for next icon tooltip.
+   */
+  nextIconTooltipText: propTypesExports.string,
+  /**
+   * Text for previous icon tooltip.
+   */
+  previousIconTooltipText: propTypesExports.string,
+  // TODO: bad naming
+  supportedKeyCodes: propTypesExports.arrayOf(propTypesExports.number)
+};
+Pagination.defaultProps = {
+  count: 1,
+  errorText: 'Page does not exist',
+  supportedKeyCodes: [enterCode],
+  nextIconTooltipText: 'Next page',
+  previousIconTooltipText: 'Previous page'
+};
+
+export { Pagination as default };

package/Paper.js

@@ -0,0 +1,97 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .paper{align-content:flex-start;display:flex;width:100%}[data-gene-ui-version=\"2.11.0\"] .paper:not(.bg-transparent){background:var(--background)}[data-gene-ui-version=\"2.11.0\"] .paper.with-shadow{box-shadow:0 .3rem .6rem 0 #0000000d}[data-gene-ui-version=\"2.11.0\"] .paper.top-radius{border-radius:2rem 2rem 0 0}[data-gene-ui-version=\"2.11.0\"] .paper.bottom-radius{border-radius:0 0 2rem 2rem}[data-gene-ui-version=\"2.11.0\"] .paper.full-radius{border-radius:2rem}[data-gene-ui-version=\"2.11.0\"] .paper.with-border{border:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.11.0\"] .pd-row{flex-direction:row}[data-gene-ui-version=\"2.11.0\"] .pd-row-reverse{flex-direction:row-reverse}[data-gene-ui-version=\"2.11.0\"] .pd-column{flex-direction:column}[data-gene-ui-version=\"2.11.0\"] .pd-column-reverse{flex-direction:column-reverse}[data-gene-ui-version=\"2.11.0\"] .pw-nowrap{flex-wrap:nowrap}[data-gene-ui-version=\"2.11.0\"] .pw-wrap{flex-wrap:wrap}[data-gene-ui-version=\"2.11.0\"] .pw-wrap-reverse{flex-wrap:wrap-reverse}[data-gene-ui-version=\"2.11.0\"] .jc-paper-start{justify-content:flex-start}[data-gene-ui-version=\"2.11.0\"] .jc-paper-end{justify-content:flex-end}[data-gene-ui-version=\"2.11.0\"] .jc-center{justify-content:center}[data-gene-ui-version=\"2.11.0\"] .jc-start{justify-content:start}[data-gene-ui-version=\"2.11.0\"] .jc-end{justify-content:end}[data-gene-ui-version=\"2.11.0\"] .jc-left{justify-content:left}[data-gene-ui-version=\"2.11.0\"] .jc-right{justify-content:right}[data-gene-ui-version=\"2.11.0\"] .jc-normal{justify-content:normal}[data-gene-ui-version=\"2.11.0\"] .jc-space-between{justify-content:space-between}[data-gene-ui-version=\"2.11.0\"] .jc-space-around{justify-content:space-around}[data-gene-ui-version=\"2.11.0\"] .jc-space-evenly{justify-content:space-evenly}[data-gene-ui-version=\"2.11.0\"] .jc-stretch{justify-content:stretch}[data-gene-ui-version=\"2.11.0\"] .jc-inherit{justify-content:inherit}[data-gene-ui-version=\"2.11.0\"] .jc-initial{justify-content:normal}[data-gene-ui-version=\"2.11.0\"] .jc-unset{justify-content:unset}[data-gene-ui-version=\"2.11.0\"] .ai-normal{align-items:normal}[data-gene-ui-version=\"2.11.0\"] .ai-stretch{align-items:stretch}[data-gene-ui-version=\"2.11.0\"] .ai-center{align-items:center}[data-gene-ui-version=\"2.11.0\"] .ai-start{align-items:start}[data-gene-ui-version=\"2.11.0\"] .ai-end{align-items:end}[data-gene-ui-version=\"2.11.0\"] .ai-paper-start{align-items:flex-start}[data-gene-ui-version=\"2.11.0\"] .ai-paper-end{align-items:flex-end}[data-gene-ui-version=\"2.11.0\"] .ai-self-start{align-items:self-start}[data-gene-ui-version=\"2.11.0\"] .ai-self-end{align-items:self-end}[data-gene-ui-version=\"2.11.0\"] .ai-baseline{align-items:baseline}[data-gene-ui-version=\"2.11.0\"] .ai-inherit{align-items:inherit}[data-gene-ui-version=\"2.11.0\"] .ai-initial{align-items:normal}[data-gene-ui-version=\"2.11.0\"] .ai-unset{align-items:unset}";
+styleInject(css_248z);
+
+const paperDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
+const paperWraps = ['nowrap', 'wrap', 'wrap-reverse'];
+const justifyContents = ['paper-start', 'paper-end', 'center', 'start', 'end', 'left', 'right', 'normal', 'space-between', 'space-around', 'space-evenly', 'stretch', 'inherit', 'initial', 'unset'];
+const alignItems = ['stretch', 'normal', 'center', 'start', 'end', 'paper-start', 'paper-end', 'self-start', 'self-end', 'baseline', 'inherit', 'initial', 'unset'];
+const cornersRadius = ['none', 'top-radius', 'bottom-radius', 'full-radius'];
+const Paper = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    padding,
+    children,
+    className,
+    paperDirection,
+    paperWrap,
+    justifyContent,
+    alignItems,
+    cornerRadius,
+    shadow,
+    border,
+    isTransparent,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: ref,
+    className: "paper bg-".concat(isTransparent ? 'transparent' : 'color', "\n    ").concat(border ? 'with-border' : '', "\n    ").concat(className, "\n    pd-").concat(paperDirection, "\n    pw-").concat(paperWrap, "\n    jc-").concat(justifyContent, "\n    ai-").concat(alignItems, "\n    ").concat(cornerRadius, "\n    ").concat(shadow ? 'with-shadow' : ''),
+    style: {
+      padding: typeof padding === 'number' ? "".concat(padding / 10, "rem") : padding
+    }
+  }, restProps), children);
+});
+Paper.propTypes = {
+  /**
+   * Paper padding. Any padding value valid in css
+   */
+  padding: propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]),
+  /**
+   * Additional className
+   */
+  className: propTypesExports.string,
+  /**
+   * Wrapping with paper anything passed as child. Any valid React node
+   */
+  children: propTypesExports.node,
+  /**
+   * Paper direction
+   */
+  paperDirection: propTypesExports.oneOf(paperDirections),
+  /**
+   * Paper wrapping
+   */
+  paperWrap: propTypesExports.oneOf(paperWraps),
+  /**
+   * Paper justify content
+   */
+  justifyContent: propTypesExports.oneOf(justifyContents),
+  /**
+   * Paper align items
+   */
+  alignItems: propTypesExports.oneOf(alignItems),
+  /**
+   * Paper corner radius
+   */
+  cornerRadius: propTypesExports.oneOf(cornersRadius),
+  /**
+   * Will add transparency to the Paper when set to "true"
+   */
+  isTransparent: propTypesExports.bool,
+  /**
+   * Will add borders to the Paper when set to "true"
+   */
+  border: propTypesExports.bool,
+  /**
+   * Will add shadow to the Paper when set to "true"
+   */
+  shadow: propTypesExports.bool
+};
+Paper.defaultProps = {
+  padding: 0,
+  className: '',
+  paperDirection: paperDirections[0],
+  paperWrap: paperWraps[0],
+  justifyContent: justifyContents[0],
+  alignItems: alignItems[0],
+  cornerRadius: cornersRadius[0],
+  shadow: false,
+  border: false,
+  isTransparent: false
+};
+
+export { alignItems, cornersRadius, Paper as default, justifyContents, paperDirections, paperWraps };