New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-downscreen

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-downscreen - npm Package Compare versions

Comparing version

0.0.11
to
0.0.12

60

dist-node/index.js

@@ -85,2 +85,3 @@ 'use strict';

inputValue: '',
lastSelectedInputValue: '',
lastKey: null

@@ -91,3 +92,3 @@ };

setState: () => {},
itemsLength: 0,
totalCount: 0,
id: '',

@@ -110,4 +111,4 @@ getMenuItemsRef: () => ({

const getFirstPossibleIndex = (itemsLength, map) => {
for (let i = 0; i < itemsLength; i++) {
const getFirstPossibleIndex = (totalCount, map) => {
for (let i = 0; i < totalCount; i++) {
if (map[i]) {

@@ -121,4 +122,4 @@ return i;

const getLastPossibleIndex = (itemsLength, map) => {
for (let i = itemsLength - 1; i >= 0; i--) {
const getLastPossibleIndex = (totalCount, map) => {
for (let i = totalCount - 1; i >= 0; i--) {
if (map[i]) {

@@ -156,6 +157,6 @@ return i;

initial = initialState,
itemsLength,
totalCount,
id
} = _ref,
props = _objectWithoutProperties(_ref, ["children", "onSelect", "initial", "itemsLength", "id"]);
props = _objectWithoutProperties(_ref, ["children", "onSelect", "initial", "totalCount", "id"]);

@@ -167,6 +168,6 @@ const menuItemsRef = React.useRef({});

setState,
itemsLength,
totalCount,
id,
getMenuItemsRef: () => menuItemsRef
}), [state, itemsLength, id]);
}), [state, totalCount, id]);
useEffectAfterMount(() => {

@@ -178,3 +179,3 @@ if (state.isOpen) {

setState(s => _objectSpread({}, s, {
highlightedIndex: getLastPossibleIndex(itemsLength, menuItemsRef.current)
highlightedIndex: getLastPossibleIndex(totalCount, menuItemsRef.current)
}));

@@ -187,3 +188,3 @@ break;

setState(s => _objectSpread({}, s, {
highlightedIndex: getFirstPossibleIndex(itemsLength, menuItemsRef.current),
highlightedIndex: getFirstPossibleIndex(totalCount, menuItemsRef.current),
lastKey: 'ArrowDown'

@@ -225,4 +226,4 @@ }));

const getNextIndex = (currentIndex, itemsLength, map) => {
for (let i = currentIndex === null ? 0 : currentIndex + 1; i < itemsLength; i++) {
const getNextIndex = (currentIndex, totalCount, map) => {
for (let i = currentIndex === null ? 0 : currentIndex + 1; i < totalCount; i++) {
if (map[i]) {

@@ -233,6 +234,6 @@ return i;

return getFirstPossibleIndex(itemsLength, map);
return getFirstPossibleIndex(totalCount, map);
};
const getPreviousIndex = (currentIndex, itemsLength, map) => {
const getPreviousIndex = (currentIndex, totalCount, map) => {
if (currentIndex !== null) {

@@ -246,3 +247,3 @@ for (let i = currentIndex - 1; i >= 0; i--) {

return getLastPossibleIndex(itemsLength, map);
return getLastPossibleIndex(totalCount, map);
};

@@ -277,3 +278,3 @@

setState,
itemsLength,
totalCount,
id,

@@ -338,3 +339,3 @@ getMenuItemsRef

setState(s => _objectSpread({}, s, {
highlightedIndex: getPreviousIndex(state.highlightedIndex, itemsLength, getMenuItemsRef().current),
highlightedIndex: getPreviousIndex(state.highlightedIndex, totalCount, getMenuItemsRef().current),
lastKey: 'ArrowUp'

@@ -358,3 +359,3 @@ }));

setState(s => _objectSpread({}, s, {
highlightedIndex: getNextIndex(state.highlightedIndex, itemsLength, getMenuItemsRef().current),
highlightedIndex: getNextIndex(state.highlightedIndex, totalCount, getMenuItemsRef().current),
lastKey: 'ArrowDown'

@@ -372,3 +373,3 @@ }));

}
}, [itemsLength, state.highlightedIndex, state.isOpen]);
}, [totalCount, state.highlightedIndex, state.isOpen]);
const onClick = React.useCallback(event => {

@@ -423,3 +424,3 @@ event.preventDefault();

setState,
itemsLength,
totalCount,
id,

@@ -443,3 +444,4 @@ getMenuItemsRef

isOpen: false,
highlightedIndex: null
highlightedIndex: null,
inputValue: s.lastSelectedInputValue
}));

@@ -472,2 +474,3 @@ }, []);

highlightedIndex: null,
inputValue: s.lastSelectedInputValue,
lastKey: 'Escape'

@@ -485,3 +488,3 @@ }));

setState(s => _objectSpread({}, s, {
highlightedIndex: getPreviousIndex(state.highlightedIndex, itemsLength, getMenuItemsRef().current),
highlightedIndex: getPreviousIndex(state.highlightedIndex, totalCount, getMenuItemsRef().current),
lastKey: 'ArrowUp'

@@ -506,3 +509,3 @@ }));

setState(s => _objectSpread({}, s, {
highlightedIndex: getNextIndex(state.highlightedIndex, itemsLength, getMenuItemsRef().current),
highlightedIndex: getNextIndex(state.highlightedIndex, totalCount, getMenuItemsRef().current),
lastKey: 'ArrowDown'

@@ -520,7 +523,8 @@ }));

}
}, [itemsLength, state.highlightedIndex, state.isOpen]);
}, [totalCount, state.highlightedIndex, state.isOpen]);
const inputChildren = React.useMemo(() => children(state.selectedIndex), [state.selectedIndex]);
useEffectAfterMount(() => {
setState(s => _objectSpread({}, s, {
inputValue: typeof inputChildren === 'string' ? inputChildren : s.inputValue
inputValue: typeof inputChildren === 'string' ? inputChildren : s.inputValue,
lastSelectedInputValue: typeof inputChildren === 'string' ? inputChildren : s.lastSelectedInputValue
}));

@@ -597,7 +601,7 @@ }, [inputChildren]);

state,
itemsLength,
totalCount,
id
} = React.useContext(DownscreenContext);
const menuChildren = React.useMemo(() => Array.from({
length: itemsLength
length: totalCount
}, (_, index) => children({

@@ -604,0 +608,0 @@ index,

8

dist-src/Button.js

@@ -16,3 +16,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

setState,
itemsLength,
totalCount,
id,

@@ -77,3 +77,3 @@ getMenuItemsRef

setState(s => ({ ...s,
highlightedIndex: getPreviousIndex(state.highlightedIndex, itemsLength, getMenuItemsRef().current),
highlightedIndex: getPreviousIndex(state.highlightedIndex, totalCount, getMenuItemsRef().current),
lastKey: 'ArrowUp'

@@ -97,3 +97,3 @@ }));

setState(s => ({ ...s,
highlightedIndex: getNextIndex(state.highlightedIndex, itemsLength, getMenuItemsRef().current),
highlightedIndex: getNextIndex(state.highlightedIndex, totalCount, getMenuItemsRef().current),
lastKey: 'ArrowDown'

@@ -111,3 +111,3 @@ }));

}
}, [itemsLength, state.highlightedIndex, state.isOpen]);
}, [totalCount, state.highlightedIndex, state.isOpen]);
const onClick = React.useCallback(event => {

@@ -114,0 +114,0 @@ event.preventDefault();

7

dist-src/docs/QuickExamples.js

@@ -46,3 +46,3 @@ import * as React from 'react';

background: white;
border: 2px solid orange;
border: 1px solid orange;
border-radius: 3px;

@@ -52,2 +52,3 @@ color: orange;

padding: 4px 8px;
width: 222px;

@@ -87,3 +88,3 @@ &:focus {

onSelect: console.log,
itemsLength: items.length,
totalCount: items.length,
id: "quick-button-example"

@@ -104,3 +105,3 @@ }, React.createElement(StyledButton, null, selectedIndex => selectedIndex === null ? '(nothing)' : items[selectedIndex].value), React.createElement(StyledMenu, null, ({

onSelect: console.log,
itemsLength: items.length,
totalCount: items.length,
id: "quick-input-example"

@@ -107,0 +108,0 @@ }, React.createElement(StyledLabel, null, "Select:"), React.createElement(StyledInput, null, selectedIndex => selectedIndex === null ? null : items[selectedIndex].value), React.createElement(StyledMenu, null, ({

10

dist-src/Downscreen.js

@@ -14,3 +14,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

initial = initialState,
itemsLength,
totalCount,
id,

@@ -24,6 +24,6 @@ ...props

setState,
itemsLength,
totalCount,
id,
getMenuItemsRef: () => menuItemsRef
}), [state, itemsLength, id]);
}), [state, totalCount, id]);
useEffectAfterMount(() => {

@@ -35,3 +35,3 @@ if (state.isOpen) {

setState(s => ({ ...s,
highlightedIndex: getLastPossibleIndex(itemsLength, menuItemsRef.current)
highlightedIndex: getLastPossibleIndex(totalCount, menuItemsRef.current)
}));

@@ -44,3 +44,3 @@ break;

setState(s => ({ ...s,
highlightedIndex: getFirstPossibleIndex(itemsLength, menuItemsRef.current),
highlightedIndex: getFirstPossibleIndex(totalCount, menuItemsRef.current),
lastKey: 'ArrowDown'

@@ -47,0 +47,0 @@ }));

3

dist-src/DownscreenContext.js

@@ -7,2 +7,3 @@ import * as React from 'react';

inputValue: '',
lastSelectedInputValue: '',
lastKey: null

@@ -13,3 +14,3 @@ };

setState: () => {},
itemsLength: 0,
totalCount: 0,
id: '',

@@ -16,0 +17,0 @@ getMenuItemsRef: () => ({

4

dist-src/getFirstPossibleIndex.js

@@ -1,3 +0,3 @@

const getFirstPossibleIndex = (itemsLength, map) => {
for (let i = 0; i < itemsLength; i++) {
const getFirstPossibleIndex = (totalCount, map) => {
for (let i = 0; i < totalCount; i++) {
if (map[i]) {

@@ -4,0 +4,0 @@ return i;

4

dist-src/getLastPossibleIndex.js

@@ -1,3 +0,3 @@

const getLastPossibleIndex = (itemsLength, map) => {
for (let i = itemsLength - 1; i >= 0; i--) {
const getLastPossibleIndex = (totalCount, map) => {
for (let i = totalCount - 1; i >= 0; i--) {
if (map[i]) {

@@ -4,0 +4,0 @@ return i;

6

dist-src/getNextIndex.js
import getFirstPossibleIndex from "./getFirstPossibleIndex.js";
const getNextIndex = (currentIndex, itemsLength, map) => {
for (let i = currentIndex === null ? 0 : currentIndex + 1; i < itemsLength; i++) {
const getNextIndex = (currentIndex, totalCount, map) => {
for (let i = currentIndex === null ? 0 : currentIndex + 1; i < totalCount; i++) {
if (map[i]) {

@@ -10,5 +10,5 @@ return i;

return getFirstPossibleIndex(itemsLength, map);
return getFirstPossibleIndex(totalCount, map);
};
export default getNextIndex;

4

dist-src/getPreviousIndex.js
import getLastPossibleIndex from "./getLastPossibleIndex.js";
const getPreviousIndex = (currentIndex, itemsLength, map) => {
const getPreviousIndex = (currentIndex, totalCount, map) => {
if (currentIndex !== null) {

@@ -12,5 +12,5 @@ for (let i = currentIndex - 1; i >= 0; i--) {

return getLastPossibleIndex(itemsLength, map);
return getLastPossibleIndex(totalCount, map);
};
export default getPreviousIndex;

15

dist-src/Input.js

@@ -17,3 +17,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

setState,
itemsLength,
totalCount,
id,

@@ -37,3 +37,4 @@ getMenuItemsRef

isOpen: false,
highlightedIndex: null
highlightedIndex: null,
inputValue: s.lastSelectedInputValue
}));

@@ -66,2 +67,3 @@ }, []);

highlightedIndex: null,
inputValue: s.lastSelectedInputValue,
lastKey: 'Escape'

@@ -79,3 +81,3 @@ }));

setState(s => ({ ...s,
highlightedIndex: getPreviousIndex(state.highlightedIndex, itemsLength, getMenuItemsRef().current),
highlightedIndex: getPreviousIndex(state.highlightedIndex, totalCount, getMenuItemsRef().current),
lastKey: 'ArrowUp'

@@ -100,3 +102,3 @@ }));

setState(s => ({ ...s,
highlightedIndex: getNextIndex(state.highlightedIndex, itemsLength, getMenuItemsRef().current),
highlightedIndex: getNextIndex(state.highlightedIndex, totalCount, getMenuItemsRef().current),
lastKey: 'ArrowDown'

@@ -114,7 +116,8 @@ }));

}
}, [itemsLength, state.highlightedIndex, state.isOpen]);
}, [totalCount, state.highlightedIndex, state.isOpen]);
const inputChildren = React.useMemo(() => children(state.selectedIndex), [state.selectedIndex]);
useEffectAfterMount(() => {
setState(s => ({ ...s,
inputValue: typeof inputChildren === 'string' ? inputChildren : s.inputValue
inputValue: typeof inputChildren === 'string' ? inputChildren : s.inputValue,
lastSelectedInputValue: typeof inputChildren === 'string' ? inputChildren : s.lastSelectedInputValue
}));

@@ -121,0 +124,0 @@ }, [inputChildren]);

4

dist-src/Menu.js

@@ -12,7 +12,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

state,
itemsLength,
totalCount,
id
} = React.useContext(DownscreenContext);
const menuChildren = React.useMemo(() => Array.from({
length: itemsLength
length: totalCount
}, (_, index) => children({

@@ -19,0 +19,0 @@ index,

1

dist-types/docs/QuickExamples.d.ts

@@ -1,3 +0,2 @@

/// <reference types="react" />
export declare const QuickButtonExample: () => JSX.Element;
export declare const QuickInputExample: () => JSX.Element;

4

dist-types/Downscreen.d.ts

@@ -7,6 +7,6 @@ import * as React from 'react';

initial?: State;
itemsLength: number;
totalCount: number;
id: Required<React.HTMLAttributes<HTMLDivElement>['id']>;
};
declare const Downscreen: ({ children, onSelect, initial, itemsLength, id, ...props }: Props) => JSX.Element;
declare const Downscreen: ({ children, onSelect, initial, totalCount, id, ...props }: Props) => JSX.Element;
export default Downscreen;

4

dist-types/DownscreenContext.d.ts

@@ -7,2 +7,3 @@ import * as React from 'react';

inputValue: string;
lastSelectedInputValue: string;
lastKey: ' ' | 'Enter' | 'Escape' | 'ArrowUp' | 'ArrowDown' | null;

@@ -18,2 +19,3 @@ }

inputValue: string;
lastSelectedInputValue: string;
lastKey: null;

@@ -24,3 +26,3 @@ };

setState: React.Dispatch<React.SetStateAction<State>>;
itemsLength: number;
totalCount: number;
id: string | undefined;

@@ -27,0 +29,0 @@ getMenuItemsRef: () => React.MutableRefObject<MenuItemsRef>;

2

dist-types/getFirstPossibleIndex.d.ts
import { MenuItemsRef } from './DownscreenContext';
declare const getFirstPossibleIndex: (itemsLength: number, map: MenuItemsRef) => number | null;
declare const getFirstPossibleIndex: (totalCount: number, map: MenuItemsRef) => number | null;
export default getFirstPossibleIndex;

2

dist-types/getLastPossibleIndex.d.ts
import { MenuItemsRef } from './DownscreenContext';
declare const getLastPossibleIndex: (itemsLength: number, map: MenuItemsRef) => number | null;
declare const getLastPossibleIndex: (totalCount: number, map: MenuItemsRef) => number | null;
export default getLastPossibleIndex;

2

dist-types/getNextIndex.d.ts
import { MenuItemsRef } from './DownscreenContext';
declare const getNextIndex: (currentIndex: number | null, itemsLength: number, map: MenuItemsRef) => number | null;
declare const getNextIndex: (currentIndex: number | null, totalCount: number, map: MenuItemsRef) => number | null;
export default getNextIndex;

2

dist-types/getPreviousIndex.d.ts
import { MenuItemsRef } from './DownscreenContext';
declare const getPreviousIndex: (currentIndex: number | null, itemsLength: number, map: MenuItemsRef) => number | null;
declare const getPreviousIndex: (currentIndex: number | null, totalCount: number, map: MenuItemsRef) => number | null;
export default getPreviousIndex;

60

dist-web/index.js

@@ -80,2 +80,3 @@ import * as React from 'react';

inputValue: '',
lastSelectedInputValue: '',
lastKey: null

@@ -86,3 +87,3 @@ };

setState: () => {},
itemsLength: 0,
totalCount: 0,
id: '',

@@ -105,4 +106,4 @@ getMenuItemsRef: () => ({

const getFirstPossibleIndex = (itemsLength, map) => {
for (let i = 0; i < itemsLength; i++) {
const getFirstPossibleIndex = (totalCount, map) => {
for (let i = 0; i < totalCount; i++) {
if (map[i]) {

@@ -116,4 +117,4 @@ return i;

const getLastPossibleIndex = (itemsLength, map) => {
for (let i = itemsLength - 1; i >= 0; i--) {
const getLastPossibleIndex = (totalCount, map) => {
for (let i = totalCount - 1; i >= 0; i--) {
if (map[i]) {

@@ -151,6 +152,6 @@ return i;

initial = initialState,
itemsLength,
totalCount,
id
} = _ref,
props = _objectWithoutProperties(_ref, ["children", "onSelect", "initial", "itemsLength", "id"]);
props = _objectWithoutProperties(_ref, ["children", "onSelect", "initial", "totalCount", "id"]);

@@ -162,6 +163,6 @@ const menuItemsRef = useRef({});

setState,
itemsLength,
totalCount,
id,
getMenuItemsRef: () => menuItemsRef
}), [state, itemsLength, id]);
}), [state, totalCount, id]);
useEffectAfterMount(() => {

@@ -173,3 +174,3 @@ if (state.isOpen) {

setState(s => _objectSpread({}, s, {
highlightedIndex: getLastPossibleIndex(itemsLength, menuItemsRef.current)
highlightedIndex: getLastPossibleIndex(totalCount, menuItemsRef.current)
}));

@@ -182,3 +183,3 @@ break;

setState(s => _objectSpread({}, s, {
highlightedIndex: getFirstPossibleIndex(itemsLength, menuItemsRef.current),
highlightedIndex: getFirstPossibleIndex(totalCount, menuItemsRef.current),
lastKey: 'ArrowDown'

@@ -220,4 +221,4 @@ }));

const getNextIndex = (currentIndex, itemsLength, map) => {
for (let i = currentIndex === null ? 0 : currentIndex + 1; i < itemsLength; i++) {
const getNextIndex = (currentIndex, totalCount, map) => {
for (let i = currentIndex === null ? 0 : currentIndex + 1; i < totalCount; i++) {
if (map[i]) {

@@ -228,6 +229,6 @@ return i;

return getFirstPossibleIndex(itemsLength, map);
return getFirstPossibleIndex(totalCount, map);
};
const getPreviousIndex = (currentIndex, itemsLength, map) => {
const getPreviousIndex = (currentIndex, totalCount, map) => {
if (currentIndex !== null) {

@@ -241,3 +242,3 @@ for (let i = currentIndex - 1; i >= 0; i--) {

return getLastPossibleIndex(itemsLength, map);
return getLastPossibleIndex(totalCount, map);
};

@@ -272,3 +273,3 @@

setState,
itemsLength,
totalCount,
id,

@@ -333,3 +334,3 @@ getMenuItemsRef

setState(s => _objectSpread({}, s, {
highlightedIndex: getPreviousIndex(state.highlightedIndex, itemsLength, getMenuItemsRef().current),
highlightedIndex: getPreviousIndex(state.highlightedIndex, totalCount, getMenuItemsRef().current),
lastKey: 'ArrowUp'

@@ -353,3 +354,3 @@ }));

setState(s => _objectSpread({}, s, {
highlightedIndex: getNextIndex(state.highlightedIndex, itemsLength, getMenuItemsRef().current),
highlightedIndex: getNextIndex(state.highlightedIndex, totalCount, getMenuItemsRef().current),
lastKey: 'ArrowDown'

@@ -367,3 +368,3 @@ }));

}
}, [itemsLength, state.highlightedIndex, state.isOpen]);
}, [totalCount, state.highlightedIndex, state.isOpen]);
const onClick = useCallback(event => {

@@ -418,3 +419,3 @@ event.preventDefault();

setState,
itemsLength,
totalCount,
id,

@@ -438,3 +439,4 @@ getMenuItemsRef

isOpen: false,
highlightedIndex: null
highlightedIndex: null,
inputValue: s.lastSelectedInputValue
}));

@@ -467,2 +469,3 @@ }, []);

highlightedIndex: null,
inputValue: s.lastSelectedInputValue,
lastKey: 'Escape'

@@ -480,3 +483,3 @@ }));

setState(s => _objectSpread({}, s, {
highlightedIndex: getPreviousIndex(state.highlightedIndex, itemsLength, getMenuItemsRef().current),
highlightedIndex: getPreviousIndex(state.highlightedIndex, totalCount, getMenuItemsRef().current),
lastKey: 'ArrowUp'

@@ -501,3 +504,3 @@ }));

setState(s => _objectSpread({}, s, {
highlightedIndex: getNextIndex(state.highlightedIndex, itemsLength, getMenuItemsRef().current),
highlightedIndex: getNextIndex(state.highlightedIndex, totalCount, getMenuItemsRef().current),
lastKey: 'ArrowDown'

@@ -515,7 +518,8 @@ }));

}
}, [itemsLength, state.highlightedIndex, state.isOpen]);
}, [totalCount, state.highlightedIndex, state.isOpen]);
const inputChildren = useMemo(() => children(state.selectedIndex), [state.selectedIndex]);
useEffectAfterMount(() => {
setState(s => _objectSpread({}, s, {
inputValue: typeof inputChildren === 'string' ? inputChildren : s.inputValue
inputValue: typeof inputChildren === 'string' ? inputChildren : s.inputValue,
lastSelectedInputValue: typeof inputChildren === 'string' ? inputChildren : s.lastSelectedInputValue
}));

@@ -592,7 +596,7 @@ }, [inputChildren]);

state,
itemsLength,
totalCount,
id
} = useContext(DownscreenContext);
const menuChildren = useMemo(() => Array.from({
length: itemsLength
length: totalCount
}, (_, index) => children({

@@ -599,0 +603,0 @@ index,

8

package.json
{
"name": "react-downscreen",
"description": "React Downscreen ⛹️",
"version": "0.0.11",
"version": "0.0.12",
"license": "MIT",

@@ -33,3 +33,3 @@ "files": [

"@pika/plugin-standard-pkg": "0.4.0",
"@types/react": "16.8.18",
"@types/react": "16.8.19",
"@types/styled-components": "4.1.15",

@@ -40,5 +40,5 @@ "docz": "1.2.0",

"react-dom": "16.8.6",
"styled-components": "4.2.0",
"typescript": "3.4.5"
"styled-components": "4.2.1",
"typescript": "3.5.1"
}
}