@pushwoosh/dumb-components 0.0.17 → 0.0.18

package/NumberPicker/AutosizeInput.constants.d.ts

@@ -0,0 +1 @@
+export declare const minimalWidth = 12;

package/NumberPicker/AutosizeInput.constants.js

@@ -0,0 +1 @@
+export const minimalWidth = 12; // pixels

package/NumberPicker/AutosizeInput.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { AutosizeInputProps } from './AutosizeInput.types';
+export declare function AutosizeInput(props: AutosizeInputProps): ReactElement;

package/NumberPicker/AutosizeInput.js

@@ -0,0 +1,37 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { minimalWidth } from './AutosizeInput.constants';
+import { Hidden } from './AutosizeInput.styled';
+import { InputStyled } from './styled';
+export function AutosizeInput(props) {
+  const {
+    value,
+    placeholder,
+    isDisabled,
+    onChange,
+    onKeyUp,
+    onKeyDown,
+    onBlur
+  } = props;
+  const hiddenRef = useRef(null);
+  const [width, setWidth] = useState(minimalWidth);
+  useEffect(() => {
+    const {
+      offsetWidth: hiddenWidth
+    } = hiddenRef.current;
+    setWidth(hiddenWidth + minimalWidth);
+  }, [value]);
+  return React.createElement(React.Fragment, null, React.createElement(InputStyled, {
+    style: {
+      width
+    },
+    value: value,
+    placeholder: placeholder,
+    disabled: isDisabled,
+    onChange: onChange,
+    onKeyUp: onKeyUp,
+    onKeyDown: onKeyDown,
+    onBlur: onBlur
+  }), React.createElement(Hidden, {
+    ref: hiddenRef
+  }, value || placeholder));
+}

package/NumberPicker/AutosizeInput.styled.d.ts

@@ -0,0 +1 @@
+export declare const Hidden: import("styled-components").StyledComponent<"span", any, {}, never>;

package/NumberPicker/AutosizeInput.styled.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const Hidden = styled.span.withConfig({
+  displayName: "Hidden",
+  componentId: "sc-dce14p-0"
+})(["position:absolute;visibility:hidden;"]);

package/NumberPicker/AutosizeInput.types.d.ts

@@ -0,0 +1,10 @@
+import type { ChangeEvent, KeyboardEvent, FocusEvent } from 'react';
+export interface AutosizeInputProps {
+    value: string;
+    placeholder?: string;
+    isDisabled?: boolean;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onKeyUp: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+}

package/NumberPicker/AutosizeInput.types.js

@@ -0,0 +1 @@
+export {};

package/NumberPicker/NumberPicker.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NumberPickerProps } from './types';
+export declare function NumberPicker(props: NumberPickerProps): ReactElement;

package/NumberPicker/NumberPicker.js

@@ -0,0 +1,126 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Vertical, useMount, usePersistentFunction } from '@pushwoosh/kit-helpers';
+import { ChevronIcon } from '@pushwoosh/kit-icons';
+import { AutosizeInput } from './AutosizeInput';
+import { intVal, isStringInteger } from './helpers';
+import { Hint, SingleInputFrame, InputStyled } from './styled';
+export function NumberPicker(props) {
+  const {
+    value,
+    hint,
+    step = 1,
+    placeholder,
+    focusOnMount,
+    minValue,
+    maxValue,
+    autoSize,
+    isDisabled,
+    onChange,
+    onSubmit
+  } = props;
+  const ref = useRef(null);
+  const [autoDiff, setAutoDiff] = useState(0);
+  const [localValue, setLocalValue] = useState('');
+  const onChangeDiff = usePersistentFunction(diff => {
+    const newValue = intVal(value) + diff;
+    const minValueValid = minValue === undefined || newValue >= minValue;
+    const maxValueValid = maxValue === undefined || newValue <= maxValue;
+    if (minValueValid && maxValueValid) {
+      onChange(newValue);
+    }
+  });
+  useEffect(() => {
+    setLocalValue(value !== undefined ? value.toString() : '');
+  }, [value]);
+  useEffect(() => {
+    if (!autoDiff) {
+      return;
+    }
+    const interval = setInterval(() => {
+      onChangeDiff(autoDiff);
+    }, 250);
+    return () => clearInterval(interval);
+  }, [autoDiff, onChangeDiff]);
+  useMount(() => {
+    if (focusOnMount && ref.current) {
+      ref.current.children[0].focus();
+    }
+  });
+  const handleChange = event => {
+    const val = event.target.value;
+    if (val === '' || val === '-') {
+      setLocalValue(val);
+      return;
+    }
+    const parsedValue = intVal(val);
+    if (parsedValue === 0 && val !== '0') {
+      return;
+    }
+    setLocalValue(val);
+    const minValueValid = minValue === undefined || parsedValue >= minValue;
+    const maxValueValid = maxValue === undefined || parsedValue <= maxValue;
+    if (isStringInteger(val) && minValueValid && maxValueValid) {
+      onChange(parsedValue);
+    }
+  };
+  const handleKeyDown = event => {
+    if (onSubmit && event.key === 'Enter' && isStringInteger(localValue)) {
+      onSubmit();
+    }
+    if (event.key === 'ArrowUp') {
+      onChangeDiff(1);
+      setAutoDiff(1);
+    }
+    if (event.key === 'ArrowDown') {
+      onChangeDiff(-1);
+      setAutoDiff(-1);
+    }
+  };
+  const resetAutoDiff = () => setAutoDiff(0);
+  const InputComponent = autoSize ? AutosizeInput : InputStyled;
+  return React.createElement(SingleInputFrame, {
+    ref: ref,
+    "$hasHint": !!hint,
+    "$isDisabled": isDisabled
+  }, React.createElement(InputComponent, {
+    value: localValue,
+    placeholder: placeholder,
+    isDisabled: isDisabled,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onKeyUp: resetAutoDiff,
+    onBlur: event => {
+      if (!event.target.value && value === undefined) {
+        return;
+      }
+      let blurValue = intVal(event.target.value);
+      const minValueValid = minValue === undefined || blurValue >= minValue;
+      const maxValueValid = maxValue === undefined || blurValue <= maxValue;
+      if (!maxValueValid) {
+        blurValue = maxValue;
+      } else if (!minValueValid) {
+        blurValue = minValue;
+      }
+      onChange(blurValue);
+      setLocalValue(`${blurValue}`);
+    }
+  }), hint && React.createElement(Hint, null, hint), React.createElement(Vertical, {
+    "$gap": 1
+  }, React.createElement("div", null, React.createElement(ChevronIcon, {
+    direction: "up",
+    size: "small",
+    "aria-disabled": "true",
+    onClick: () => onChangeDiff(step),
+    onMouseDown: () => setAutoDiff(step),
+    onMouseUp: resetAutoDiff,
+    onMouseLeave: resetAutoDiff
+  })), React.createElement("div", null, React.createElement(ChevronIcon, {
+    size: "small",
+    direction: "down",
+    "aria-disabled": isDisabled,
+    onClick: () => onChangeDiff(-1 * step),
+    onMouseDown: () => setAutoDiff(-1 * step),
+    onMouseUp: resetAutoDiff,
+    onMouseLeave: resetAutoDiff
+  }))));
+}

package/NumberPicker/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const intVal: (value: any) => number;
+export declare const isStringInteger: (value: string) => boolean;

package/NumberPicker/helpers.js

@@ -0,0 +1,5 @@
+export const intVal = value => {
+  const num = parseInt(value, 10);
+  return Number.isNaN(num) ? 0 : num;
+};
+export const isStringInteger = value => /^-?\d+$/.test(value);

package/NumberPicker/index.d.ts

@@ -0,0 +1 @@
+export { NumberPicker } from './NumberPicker';

package/NumberPicker/index.js

@@ -0,0 +1 @@
+export { NumberPicker } from './NumberPicker';

package/NumberPicker/styled.d.ts

@@ -0,0 +1,10 @@
+export declare const InputStyled: import("styled-components").StyledComponent<"input", any, {
+    type: "text";
+}, "type">;
+export declare const Hint: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SingleInputFrame: import("styled-components").StyledComponent<"div", any, {
+    $empty?: boolean;
+    $error?: boolean;
+    $hasHint: boolean;
+    $isDisabled?: boolean;
+}, never>;

package/NumberPicker/styled.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { Color, ShapeRadius, Spacing, UnitSize } from '@pushwoosh/kit-constants';
+export const InputStyled = styled.input.attrs({
+  type: 'text'
+}).withConfig({
+  displayName: "InputStyled",
+  componentId: "sc-6ibrwh-0"
+})(["&:disabled{background-color:", ";}"], Color.FROZEN);
+export const Hint = styled.div.withConfig({
+  displayName: "Hint",
+  componentId: "sc-6ibrwh-1"
+})(["display:flex;align-items:center;font-size:100%;line-height:initial;padding-right:", ";color:", ";pointer-events:none;"], Spacing.S3, Color.PHANTOM);
+export const SingleInputFrame = styled.div.withConfig({
+  displayName: "SingleInputFrame",
+  componentId: "sc-6ibrwh-2"
+})(["display:inline-grid;grid-template-columns:", ";box-sizing:border-box;align-items:center;height:", ";position:relative;padding-left:", ";color:", ";border:1px solid ", ";border-radius:", ";background-color:", ";cursor:pointer;pointer-events:", ";&:focus-within{border-color:", ";}& > input{color:", ";height:34px;border:none;padding:0;outline:none;line-height:140%;}& > div:last-of-type{height:34px;padding-left:1px;background-color:", ";border-radius:0 ", " ", " 0;& > div{display:flex;justify-content:center;align-items:center;color:", ";background-color:", ";cursor:pointer;&:hover > *{transform:scale(1.3);}&:first-of-type{border-top-right-radius:", ";}&:last-of-type{border-bottom-right-radius:", ";}}}"], ({
+  $hasHint
+}) => $hasHint ? '1fr max-content 21px' : '1fr 21px', UnitSize.FIELD_HEIGHT, Spacing.S4, ({
+  $empty
+}) => $empty ? Color.BRIGHT : Color.MAIN, ({
+  $error
+}) => $error ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, ({
+  $isDisabled
+}) => $isDisabled ? Color.FROZEN : Color.CLEAR, ({
+  $isDisabled
+}) => $isDisabled ? 'none' : 'auto', Color.BRIGHT, Color.MAIN, Color.FORM, ShapeRadius.CONTROL, ShapeRadius.CONTROL, Color.MAIN, Color.FROZEN, ShapeRadius.CONTROL, ShapeRadius.CONTROL);

package/NumberPicker/types.d.ts

@@ -0,0 +1,13 @@
+export interface NumberPickerProps {
+    value: number | undefined;
+    hint?: string;
+    step?: number;
+    placeholder?: string;
+    focusOnMount?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    autoSize?: boolean;
+    isDisabled?: boolean;
+    onChange: (value: number) => void;
+    onSubmit?: () => void;
+}

package/NumberPicker/types.js

@@ -0,0 +1 @@
+export {};

package/index.d.ts

@@ -5,3 +5,4 @@ export { EmailTemplatePreview, NoEmailTemplatePreview, } from './EmailTemplatePr
 export { PushPreview } from './PushPreview';
 export { ExportResult } from './ExportResult';
 export { NativeInput, NativeTextarea, NativeSelect, } from './native';
+export { NumberPicker } from './NumberPicker';

package/index.js

@@ -4,4 +4,5 @@ export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
 export { ExportResult } from './ExportResult';
-export { NativeInput, NativeTextarea, NativeSelect } from './native';
+export { NativeInput, NativeTextarea, NativeSelect } from './native';
+export { NumberPicker } from './NumberPicker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -16,7 +16,7 @@
   },
   "pre-commit": "check",
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^1.0.8",
+    "@pushwoosh/frontend-builder-engine": "^1.0.11",
     "@pushwoosh/kit-constants": "^1.6.7",
     "@pushwoosh/kit-dropdown-menu": "^1.6.8",
     "@types/lodash": "^4.17.13",