linear-react-components-ui 1.1.20-beta.33 → 1.1.20-beta.35

package/lib/inputs/number/format_number.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.numberToPtBR = exports.numberToEnUS = exports.formatOnlyNumbers = void 0;
+const numberToPtBR = value => {
+  if (value !== undefined && typeof value === 'number') {
+    return value.toLocaleString('pt-BR');
+  }
+  return value;
+};
+exports.numberToPtBR = numberToPtBR;
+const numberToEnUS = value => {
+  let formattedNumber;
+  if (value) {
+    formattedNumber = value.replaceAll('.', '').replaceAll(',', '.');
+    return Number(formattedNumber);
+  }
+  return value;
+};
+exports.numberToEnUS = numberToEnUS;
+const formatOnlyNumbers = value => {
+  const teste = value.replace(/[._\-/()\s+]/g, '');
+  return teste;
+};
+exports.formatOnlyNumbers = formatOnlyNumbers;

package/lib/inputs/number/index.d.ts

@@ -0,0 +1,19 @@
+export { default as CurrencyField } from './Currency.js';
+export { default as DecimalField } from './Decimal.js';
+import { INumberFieldProps } from './types.js';
+import '../../@types/PermissionAttr.js';
+import '../base/types.js';
+import 'react';
+import '../../@types/Align.js';
+import '../../@types/Period.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+import '../types.js';
+import '../../@types/DataCombo.js';
+import '../../drawer/types.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const NumberField: (props: INumberFieldProps) => JSX.Element;
+
+export { NumberField as default };

package/lib/inputs/number/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CurrencyField", {
+  enumerable: true,
+  get: function () {
+    return _Currency.default;
+  }
+});
+Object.defineProperty(exports, "DecimalField", {
+  enumerable: true,
+  get: function () {
+    return _Decimal.default;
+  }
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Currency = _interopRequireDefault(require("./Currency"));
+var _Decimal = _interopRequireDefault(require("./Decimal"));
+require("../../assets/styles/numbers.scss");
+var _InputTextBase = _interopRequireDefault(require("../base/InputTextBase"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const NumberField = props => {
+  const {
+    textAlign = 'left',
+    value = '',
+    themePopover = 'light',
+    popoverAlign = 'left',
+    removeZeroLeft = true,
+    min,
+    max
+  } = props;
+  const [numberValue, setNumberValue] = (0, _react.useState)();
+  const onChange = event => {
+    const inputValue = event.target.value;
+    const numericValue = inputValue.replace(/\D/g, '');
+    if (min && parseInt(numericValue, 10) < min || max && parseInt(numericValue, 10) > max) {
+      return;
+    }
+    if (removeZeroLeft && numericValue.charAt(0) === '0' && numericValue.length > 1) {
+      setNumberValue(numericValue.substring(1));
+    } else {
+      setNumberValue(numericValue);
+    }
+    if (props.onChange) props.onChange(event);
+  };
+  (0, _react.useEffect)(() => {
+    var _value$toString;
+    setNumberValue((_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : '');
+  }, [value]);
+  return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
+    value: numberValue,
+    textAlign: textAlign,
+    themePopover: themePopover,
+    popoverAlign: popoverAlign,
+    onChange: onChange,
+    type: "number"
+  }));
+};
+var _default = exports.default = NumberField;

package/lib/inputs/number/types.d.ts

@@ -0,0 +1,39 @@
+import { PermissionAttr } from '../../@types/PermissionAttr.js';
+import { CustomInputEvent } from '../base/types.js';
+import { IMaskHOCProps } from '../types.js';
+import { TextAlign } from '../../@types/Align.js';
+import 'react';
+import '../../@types/Period.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+import '../../@types/DataCombo.js';
+import '../../drawer/types.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+interface INumberFieldProps extends IMaskHOCProps {
+    value?: string;
+    permissionAttr?: PermissionAttr;
+    disabled?: boolean;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
+    onChange?: (e?: CustomInputEvent) => void;
+    removeZeroLeft?: boolean;
+    textAlign?: TextAlign;
+}
+interface IBaseNumberProps extends IMaskHOCProps {
+    returnFormattedValueOnBlur?: boolean;
+    returnFormattedValueOnKeyDown?: boolean;
+}
+interface ICurrencyProps extends IMaskHOCProps {
+    currencySymbol?: string;
+    displayCurrencySymbol?: boolean;
+    hint?: string | string[];
+    hintPosition?: 'below' | 'onLabelRight';
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
+}
+
+export { IBaseNumberProps, ICurrencyProps, INumberFieldProps };

package/lib/inputs/number/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/inputs/period/Dialog.d.ts

@@ -0,0 +1,14 @@
+import { IDialogProps } from './types.js';
+import 'moment';
+import 'react';
+import '../../@types/ColorStyles.js';
+import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+
+declare const Dialog: ({ onOpenChange, children, dialogSize }: IDialogProps) => JSX.Element;
+
+export { Dialog as default };

package/lib/inputs/period/Dialog.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _base = _interopRequireDefault(require("../../dialog/base"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Dialog = _ref => {
+  let {
+    onOpenChange,
+    children,
+    dialogSize
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_base.default, {
+    width: dialogSize.width,
+    height: dialogSize.height,
+    onOpenChange: onOpenChange,
+    closeOnOutsideClick: true,
+    closeOnEsc: true,
+    wrapperClassName: ""
+  }, children);
+};
+var _default = exports.default = Dialog;

package/lib/inputs/period/Dropdown.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { IPeriodDropdownProps } from './types.js';
+import 'moment';
+import '../../@types/ColorStyles.js';
+import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+
+declare const Dropdown: (props: IPeriodDropdownProps) => React.ReactPortal;
+
+export { Dropdown as default };

package/lib/inputs/period/Dropdown.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _helper = _interopRequireDefault(require("./helper"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const body = document.getElementsByTagName('body')[0];
+const Dropdown = props => {
+  const elementRef = (0, _react.useRef)(document.createElement('div'));
+  (0, _react.useEffect)(() => {
+    elementRef.current.className = 'datepicker-component';
+    elementRef.current.setAttribute('style', (0, _helper.default)(props));
+    body.appendChild(elementRef.current);
+    props.dropdownRef(elementRef.current);
+    return () => {
+      body.removeChild(elementRef.current);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    elementRef.current.setAttribute('style', (0, _helper.default)(props));
+  }, [props]);
+  return /*#__PURE__*/_reactDom.default.createPortal(props.children, elementRef.current);
+};
+var _default = exports.default = Dropdown;

package/lib/inputs/period/PeriodList.d.ts

@@ -0,0 +1,14 @@
+import { IPeriodListProps } from './types.js';
+import 'moment';
+import 'react';
+import '../../@types/ColorStyles.js';
+import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+
+declare const PeriodList: ({ selected, handleOnSelect }: IPeriodListProps) => JSX.Element;
+
+export { PeriodList as default };

package/lib/inputs/period/PeriodList.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _helper = require("./helper");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const periodOptions = [{
+  id: 'today',
+  label: 'Hoje'
+}, {
+  id: 'week',
+  label: 'Semana Atual'
+}, {
+  id: 'lastweek',
+  label: 'Última Semana'
+}, {
+  id: 'last15',
+  label: 'Últimos 15 dias'
+}, {
+  id: 'month',
+  label: 'Mês atual'
+}, {
+  id: 'lastmonth',
+  label: 'Último Mês'
+}, {
+  id: 'custom',
+  label: 'Customizar'
+}];
+const PeriodList = _ref => {
+  let {
+    selected,
+    handleOnSelect
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "dropdown-period"
+  }, periodOptions.map(item => {
+    const itemSelected = selected === item.id;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      role: "button",
+      tabIndex: -1,
+      onKeyDown: () => {},
+      key: "item-".concat(item.id),
+      className: (0, _helper.getDropdownItemCssClass)(itemSelected),
+      onClick: () => {
+        const dates = item.id !== 'custom' ? (0, _helper.CalcDatesByPeriod)(item.id) : null;
+        handleOnSelect(item.id, dates);
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      role: "button",
+      className: "menubutton",
+      tabIndex: -1,
+      onKeyPress: () => {}
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "label"
+    }, item.label)));
+  }));
+};
+var _default = exports.default = PeriodList;

package/lib/inputs/period/helper.d.ts

@@ -0,0 +1,22 @@
+import { Moment } from 'moment';
+import { DateTypes } from './types.js';
+import 'react';
+import '../../@types/ColorStyles.js';
+import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+
+declare const getCalendarDropdownStyle: ({ topPosition, leftPosition, width }: {
+    topPosition: number | string;
+    leftPosition: number | string;
+    width: number | string;
+}) => string;
+
+declare const getDropdownItemCssClass: (selected?: boolean, disabled?: boolean, striped?: boolean) => string;
+declare const CalcDatesByPeriod: (dateType: DateTypes) => Moment[];
+declare const isDateValid: (date: Moment) => boolean;
+
+export { CalcDatesByPeriod, getCalendarDropdownStyle as default, getDropdownItemCssClass, isDateValid };

package/lib/inputs/period/helper.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDateValid = exports.getDropdownItemCssClass = exports.default = exports.CalcDatesByPeriod = void 0;
+var _moment = _interopRequireDefault(require("moment"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getCalendarDropdownStyle = _ref => {
+  let {
+    topPosition,
+    leftPosition,
+    width
+  } = _ref;
+  return "top: ".concat(topPosition, "px;\n  left: ").concat(leftPosition, "px;\n  width:").concat(width, "px");
+};
+var _default = exports.default = getCalendarDropdownStyle;
+const getDropdownItemCssClass = function () {
+  let selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  let disabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  let striped = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  let className = 'item';
+  className += selected && !disabled ? ' -selected ' : '';
+  className += disabled ? ' -disabled' : '';
+  className += !selected && !disabled && striped ? ' -striped ' : '';
+  return className;
+};
+exports.getDropdownItemCssClass = getDropdownItemCssClass;
+const CalcDatesByPeriod = dateType => {
+  const currentDate = (0, _moment.default)();
+  const dateTypes = {
+    today: () => [currentDate, currentDate],
+    week: () => {
+      const weekStart = currentDate.clone().startOf('week');
+      const weekEnd = currentDate.clone().endOf('week');
+      return [weekStart, weekEnd];
+    },
+    lastweek: () => {
+      const lastWeek = currentDate.subtract(1, 'weeks');
+      const weekStart = lastWeek.clone().startOf('week');
+      const weekEnd = lastWeek.clone().endOf('week');
+      return [weekStart, weekEnd];
+    },
+    last15: () => {
+      const last15Day = (0, _moment.default)(currentDate);
+      return [last15Day.subtract(15, 'days'), currentDate];
+    },
+    month: () => {
+      const monthStart = currentDate.clone().startOf('month');
+      const monthEnd = currentDate.clone().endOf('month');
+      return [monthStart, monthEnd];
+    },
+    lastmonth: () => {
+      const lastMonth = currentDate.subtract(1, 'months');
+      const monthStart = lastMonth.clone().startOf('month');
+      const monthEnd = lastMonth.clone().endOf('month');
+      return [monthStart, monthEnd];
+    }
+  };
+  return dateTypes[dateType]();
+};
+exports.CalcDatesByPeriod = CalcDatesByPeriod;
+const isDateValid = date => date && (0, _moment.default)(date).isValid();
+exports.isDateValid = isDateValid;

package/lib/inputs/period/index.d.ts

@@ -0,0 +1,14 @@
+import { IPeriodPickerProps } from './types.js';
+import 'moment';
+import 'react';
+import '../../@types/ColorStyles.js';
+import '../../@types/Period.js';
+import '../../@types/PermissionAttr.js';
+import '../base/types.js';
+import '../../@types/Align.js';
+import '../../internals/types.js';
+import '../../@types/Position.js';
+
+declare const PeriodPicker: (props: IPeriodPickerProps) => JSX.Element | null;
+
+export { PeriodPicker as default };