How to use the @paprika/helpers/lib/hooks/usePrevious function in @paprika/helpers

To help you get started, we’ve selected a few @paprika/helpers examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github acl-services / paprika / packages / DatePicker / src / DatePicker.js View on Github external
hasError,
  } = props;

  const formatDateProp = React.useCallback(
    format => {
      return date && date.isValid() ? moment(date).format(format || humanFormat) : "";
    },
    [date, humanFormat]
  );

  // State
  const [hasParsingError, setHasParsingError] = React.useState(false);
  const [inputtedString, setInputtedString] = React.useState(formatDateProp(dataFormat));
  const [possibleDate, setPossibleDate] = React.useState(null);
  const [shouldShowCalendar, setShouldShowCalendar] = React.useState(false);
  const prevDate = usePrevious(date);

  // Ref
  const calendarRef = React.useRef(null);
  const inputRef = React.useRef(null);

  // Effect
  React.useEffect(() => {
    if ((!date && !prevDate) || (date && prevDate && date.isSame(prevDate, "day"))) return;
    setInputtedString(formatDateProp(dataFormat));
  }, [dataFormat, date, prevDate, formatDateProp, humanFormat]);

  const debouncedPossibleDate = useDebounce(possibleDate, 300);
  const extendedInputProps = extractChildrenProps(children, DateInput);
  const extendedPopoverProps = extractChildrenProps(children, DatePickerPopover);

  function hideCalendar() {
github acl-services / paprika / packages / DataTable / src / components / Navigation / components / Filters / Input.js View on Github external
export default function Input(props) {
  const { initialValue, onChange } = props;
  const [inputtedValue, setInputtedValue] = React.useState(initialValue);
  const debouncedValue = useDebounce(inputtedValue, 300);
  const prevValue = usePrevious(debouncedValue);

  React.useEffect(() => {
    if (prevValue === undefined || prevValue === debouncedValue) return;
    onChange(debouncedValue);
    // Just want to watch the value change
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debouncedValue]);

  React.useEffect(() => {
    setInputtedValue(initialValue);
  }, [initialValue]);

  function handleChange(e) {
    const newInputtedValue = e.target.value;
    setInputtedValue(newInputtedValue);
  }