Skip to content

Commit

Permalink
init
Browse files Browse the repository at this point in the history
  • Loading branch information
@eden-lane
eden-lane committed Oct 9, 2020
0 parents commit 09a65dc
Show file tree
Hide file tree
Showing 46 changed files with 20,365 additions and 0 deletions.
15 changes: 15 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 120
tab_width = 2
trim_trailing_whitespace = true

[{*.ats,*.ts}]
indent_size = 2
tab_width = 2
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.idea
lib
node_modules
49 changes: 49 additions & 0 deletions .gitlab-ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
image: node:latest

variables:
REGISTRY: registry.redmadrobot.com:5005
NPM_REGISTRY: https://nexus.redmadrobot.com/repository/npm-group/

stages:
- test
- publish
- notify

cache:
paths:
- .npm/

before_script:
- npm config set registry https://nexus.redmadrobot.com/repository/npm-group/
- npm config set _auth "${CI_NPM_AUTH}"
- npm ci --cache .npm --prefer-offline

test_lint:
stage: test
script:
- npm t -- --coverage
coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
tags:
- frontend-docker

publish:
stage: publish
script:
- npm i
- npm run build
- npm publish
tags:
- frontend-docker
only:
- tags

notify:
stage: notify
script:
- npx notify
tags:
- frontend-docker
only:
- tags
dependencies:
- publish
20 changes: 20 additions & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
module.exports = {
stories: ['../stories/**/*.stories.tsx'],
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
webpackFinal: async config => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('ts-loader'),
},
{
loader: require.resolve('react-docgen-typescript-loader'),
},
]
});
config.resolve.extensions.push('.ts', '.tsx');

return config;
}
};
18 changes: 18 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
## v0.5.1 - 3 Oct 2020
- Added autoScroll option
- Added throttling to repositioning menu
- Fixed autohiding

## v0.4.4 - 24 Sep 2020
- Added menu autoscroll

## v0.3.1 - 17 Sep 2020
- Changed of the menu width to auto

## v0.2.1 - 3 Jul 2020
### Bugfixes
- Fixed: onSelect was called with no item in some cases

## v0.2.0 - 1 Jul 2020
### Features
- Auto adjusting dropdown orientation (top/bottom) depending on it's position;
76 changes: 76 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
# useDropdown
**useDropdown** is a hook that helps you build a custom
select element that suits needs. It also takes away the pain
of positioning of a dropdown element and repositioning it
on scroll.

## Usage
```typescript jsx
const {
isOpen,
highlightedIndex,
inputValue,
getInputWrapperProps,
getInputProps,
getMenuProps,
getItemProps,
} = useDropdown<T>({
items,
onSelect,
reducer,
autoScroll
})
```

### Arguments
`useDropdown` accepts following arguments:

* **items** - `Array<T>`
Menu elements of your dropdown. It is expected that they will
be the same type you passed to `useDropdown` generic

* **onSelect** - `(item: T) => void`
Function which is called each time you click on element or
select it with Enter key

* **reducer**
Using this function you can change how `useDropdown` reacts
to certain events; For example, you can prevent dropdown
from closing after user selects an option

* **autoScroll** - `boolean`
If `true` dropdown will detect scroll of outer containers and will reposition menu accordingly.

### State and methods
`useDropdown` returns it's state and provides methods that
you should use to build your dropdown:

* **isOpen** - `boolean`
Current state of dropdown. Use it to decide whether you should
show menu or not

* **highlightedIndex** - `number`
Shows the index of an element that is currently highlighted by
cursor or with arrow keys. Use it to apply styles.

* **inputValue** - `string`
Current value of input.

* **getInputWrapperProps** - `(): WrapperProps` - _required_
Apply these props to block that represents your dropdown element.
This block will be used to calculate the width of dropdown along
with it's position on the screen.
> Note: this method will be renamed in future versions
* **getInputProps** - `(): InputProps` - _optional_
You can use it on your input. This method will help `useDropdown`
to track input's value and it also allows menu to be opened each time
input recieves focus.

* **getMenuProps** - `(): MenuProps` - _required_
Returns props for block element that wraps your menu items. It is
necessary for correct positioning of you dropdown.

* **getItemProps** - `(item: T, index: number) => ItemProps` - _required_
Method for getting props for every item in your items list. Pass
item and it's index to this method.
16 changes: 16 additions & 0 deletions build.tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"compilerOptions": {
"target": "es5",
"declaration": true,
"module": "CommonJS",
"esModuleInterop": true,
"jsx": "react",
"lib": ["dom", "es2015", "es2016"],
"sourceMap": true,
"moduleResolution": "node",
"outDir": "lib/",
"rootDir": "./src"
},
"include": ["./src/**/*"],
"exclude": ["node_modules"]
}
136 changes: 136 additions & 0 deletions coverage/clover.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<?xml version="1.0" encoding="UTF-8"?>
<coverage generated="1593250149599" clover="3.2.0">
<project timestamp="1593250149599" name="All files">
<metrics statements="109" coveredstatements="97" conditionals="27" coveredconditionals="22" methods="24" coveredmethods="21" elements="160" coveredelements="140" complexity="0" loc="109" ncloc="109" packages="2" files="5" classes="5"/>
<package name="src">
<metrics statements="105" coveredstatements="93" conditionals="27" coveredconditionals="22" methods="21" coveredmethods="18"/>
<file name="index.ts" path="/Users/eden_lane/Projects/work/use-dropdown/src/index.ts">
<metrics statements="3" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
<line num="1" count="0" type="stmt"/>
<line num="2" count="0" type="stmt"/>
<line num="4" count="0" type="stmt"/>
</file>
<file name="reducer.ts" path="/Users/eden_lane/Projects/work/use-dropdown/src/reducer.ts">
<metrics statements="20" coveredstatements="20" conditionals="13" coveredconditionals="12" methods="1" coveredmethods="1"/>
<line num="1" count="1" type="stmt"/>
<line num="4" count="1" type="stmt"/>
<line num="5" count="44" type="stmt"/>
<line num="6" count="44" type="stmt"/>
<line num="8" count="44" type="stmt"/>
<line num="10" count="2" type="stmt"/>
<line num="13" count="2" type="stmt"/>
<line num="15" count="3" type="stmt"/>
<line num="18" count="3" type="stmt"/>
<line num="20" count="12" type="stmt"/>
<line num="23" count="12" type="stmt"/>
<line num="25" count="18" type="stmt"/>
<line num="28" count="18" type="stmt"/>
<line num="30" count="1" type="stmt"/>
<line num="33" count="1" type="stmt"/>
<line num="35" count="5" type="stmt"/>
<line num="40" count="5" type="stmt"/>
<line num="42" count="3" type="stmt"/>
<line num="47" count="3" type="stmt"/>
<line num="50" count="44" type="stmt"/>
</file>
<file name="stateChangeType.ts" path="/Users/eden_lane/Projects/work/use-dropdown/src/stateChangeType.ts">
<metrics statements="10" coveredstatements="10" conditionals="2" coveredconditionals="2" methods="1" coveredmethods="1"/>
<line num="1" count="1" type="cond" truecount="2" falsecount="0"/>
<line num="2" count="1" type="stmt"/>
<line num="3" count="1" type="stmt"/>
<line num="4" count="1" type="stmt"/>
<line num="5" count="1" type="stmt"/>
<line num="6" count="1" type="stmt"/>
<line num="7" count="1" type="stmt"/>
<line num="8" count="1" type="stmt"/>
<line num="9" count="1" type="stmt"/>
<line num="10" count="1" type="stmt"/>
</file>
<file name="useDropdown.ts" path="/Users/eden_lane/Projects/work/use-dropdown/src/useDropdown.ts">
<metrics statements="72" coveredstatements="63" conditionals="12" coveredconditionals="8" methods="19" coveredmethods="16"/>
<line num="2" count="1" type="stmt"/>
<line num="3" count="1" type="stmt"/>
<line num="4" count="1" type="stmt"/>
<line num="7" count="1" type="stmt"/>
<line num="22" count="1" type="stmt"/>
<line num="28" count="1" type="stmt"/>
<line num="32" count="78" type="stmt"/>
<line num="33" count="39" type="stmt"/>
<line num="34" count="39" type="stmt"/>
<line num="35" count="39" type="stmt"/>
<line num="36" count="39" type="stmt"/>
<line num="37" count="39" type="stmt"/>
<line num="42" count="117" type="stmt"/>
<line num="44" count="39" type="stmt"/>
<line num="45" count="1" type="stmt"/>
<line num="46" count="1" type="stmt"/>
<line num="49" count="39" type="stmt"/>
<line num="50" count="3" type="stmt"/>
<line num="53" count="39" type="stmt"/>
<line num="54" count="1" type="stmt"/>
<line num="57" count="39" type="stmt"/>
<line num="58" count="2" type="stmt"/>
<line num="61" count="39" type="stmt"/>
<line num="62" count="1" type="stmt"/>
<line num="63" count="1" type="stmt"/>
<line num="64" count="1" type="stmt"/>
<line num="65" count="1" type="stmt"/>
<line num="71" count="39" type="stmt"/>
<line num="72" count="6" type="stmt"/>
<line num="78" count="39" type="stmt"/>
<line num="79" count="9" type="stmt"/>
<line num="85" count="39" type="stmt"/>
<line num="86" count="1" type="stmt"/>
<line num="92" count="39" type="stmt"/>
<line num="93" count="7" type="cond" truecount="1" falsecount="1"/>
<line num="94" count="0" type="stmt"/>
<line num="95" count="0" type="stmt"/>
<line num="97" count="0" type="stmt"/>
<line num="104" count="39" type="stmt"/>
<line num="105" count="0" type="stmt"/>
<line num="106" count="0" type="cond" truecount="0" falsecount="2"/>
<line num="107" count="0" type="stmt"/>
<line num="108" count="0" type="stmt"/>
<line num="109" count="0" type="stmt"/>
<line num="114" count="39" type="stmt"/>
<line num="115" count="10" type="stmt"/>
<line num="117" count="5" type="stmt"/>
<line num="118" count="5" type="stmt"/>
<line num="120" count="3" type="stmt"/>
<line num="121" count="3" type="stmt"/>
<line num="123" count="1" type="stmt"/>
<line num="124" count="1" type="stmt"/>
<line num="126" count="1" type="cond" truecount="1" falsecount="1"/>
<line num="127" count="1" type="stmt"/>
<line num="128" count="1" type="stmt"/>
<line num="130" count="1" type="stmt"/>
<line num="134" count="39" type="stmt"/>
<line num="135" count="35" type="cond" truecount="2" falsecount="0"/>
<line num="136" count="13" type="stmt"/>
<line num="137" count="13" type="stmt"/>
<line num="140" count="35" type="stmt"/>
<line num="141" count="35" type="stmt"/>
<line num="142" count="35" type="stmt"/>
<line num="146" count="39" type="stmt"/>
<line num="147" count="0" type="stmt"/>
<line num="152" count="39" type="stmt"/>
<line num="153" count="8" type="stmt"/>
<line num="161" count="39" type="stmt"/>
<line num="162" count="8" type="stmt"/>
<line num="169" count="39" type="stmt"/>
<line num="170" count="7" type="stmt"/>
<line num="180" count="39" type="stmt"/>
</file>
</package>
<package name="src.utils">
<metrics statements="4" coveredstatements="4" conditionals="0" coveredconditionals="0" methods="3" coveredmethods="3"/>
<file name="mergeReducers.ts" path="/Users/eden_lane/Projects/work/use-dropdown/src/utils/mergeReducers.ts">
<metrics statements="4" coveredstatements="4" conditionals="0" coveredconditionals="0" methods="3" coveredmethods="3"/>
<line num="1" count="156" type="stmt"/>
<line num="2" count="39" type="stmt"/>
<line num="3" count="44" type="stmt"/>
<line num="5" count="63" type="stmt"/>
</file>
</package>
</project>
</coverage>
Loading

0 comments on commit 09a65dc

Please sign in to comment.