Skip to content

Commit 7a9e417

Browse files
atomicpagesatomicpages
committed
0.3.2
* Fixing moveAllReducer shuttling disabled items in certain cases * Tweaking working example under basic usage * Adding unit tests for moveAllReducer * Cleaning some things up
1 parent 7c4bd25 commit 7a9e417

13 files changed

Lines changed: 464 additions & 849 deletions

File tree

‎README.md‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,14 @@ Other implementations are great but they generally force you to massage your dat
4747

4848
```bash
4949
npm i react-accessible-shuttle
50+
51+
# add peer dependencies
52+
npm i react react-dom
5053
```
5154

52-
### Consuming
55+
### Basic Usage
5356

54-
react-accessible-shuttle is a controlled component, but is flexible and adapts to your needs. Using it easy. Since you have _complete_ control over the rendering process, feel free to customize the layout to your liking!
57+
`react-accessible-shuttle` is a controlled component, but is flexible and adapts to your needs. Since you have _complete_ control over the rendering process, you can render anything you want no matter how simple or complex your state data is. Here's an example using an array of strings:
5558

5659
```jsx
5760
import React from 'react';
@@ -101,30 +104,35 @@ function App() {
101104
ReactDOM.render(<App />, document.getElementById('app'));
102105
```
103106

107+
`react-accessible-shuttle` is powered by React hooks which allows the nitty-gritty internal details of the component to be handled for you, but while giving you the flexibility to control _everything_ if you need it.
108+
104109
### CDN
105110

106111
You can also use react-accessible-shuttle via CDN -- it even works with legacy browsers like IE 11 -- without transpiling.
107112

108113
```html
109114
<!DOCTYPE html>
110-
<body>
115+
<html lang="en">
111116
<head>
112117
<meta charset="utf-8" />
113118
<meta name="viewport" content="width=device-width" />
114119
<!-- Shuttle Dependency -->
115120
<link
116121
rel="stylesheet"
117-
href="https://unpkg.com/browse/react-accessible-shuttle/css/shuttle.css"
122+
href="https://unpkg.com/react-accessible-shuttle/css/shuttle.css"
118123
/>
119124
<title>React Accessible Shuttle</title>
120125
</head>
121126
<body>
122127
<div id="root"></div>
123-
<!-- Peer dependencies -->
128+
129+
<!-- Peer Dependencies -->
124130
<script src="https://unpkg.com/react/umd/react.development.js"></script>
125131
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
132+
126133
<!-- Shuttle Dependency -->
127-
<script src="https://unpkg.com/browse/react-accessible-shuttle/dist-browser/index.js"></script>
134+
<script src="https://unpkg.com/react-accessible-shuttle/dist-browser/index.js"></script>
135+
128136
<!-- Usage -->
129137
<script>
130138
function App() {
@@ -142,27 +150,25 @@ You can also use react-accessible-shuttle via CDN -- it even works with legacy b
142150
const props = {
143151
key: index,
144152
value: item,
145-
selected: state.selected.source.has(index),
146153
};
147154
148-
Object.assign(props, getItemProps);
155+
Object.assign(props, getItemProps(index));
149156
150157
return React.createElement(ReactShuttle.Item, props, item);
151158
});
152159
}),
153160
React.createElement(ReactShuttle.Controls, null, null),
154-
React.createElement(ReactShuttle.Container, null, function(
161+
React.createElement(ReactShuttle.Container, null, function (
155162
state,
156163
getItemProps
157164
) {
158-
return state.target.map(function(item, index) {
165+
return state.target.map(function (item, index) {
159166
const props = {
160167
key: index,
161168
value: item,
162-
selected: state.selected.target.has(index),
163169
};
164170
165-
Object.assign(props, getItemProps);
171+
Object.assign(props, getItemProps(index));
166172
167173
return React.createElement(ReactShuttle.Item, props, item);
168174
});
@@ -173,14 +179,14 @@ You can also use react-accessible-shuttle via CDN -- it even works with legacy b
173179
ReactDOM.render(App, document.getElementById('root'));
174180
</script>
175181
</body>
176-
</body>
182+
</html>
177183
```
178184

179185
If you're new to hooks, the example might seem verbose; however, we can easily abstract react-accessible-shuttle to take in a model and render on your behalf.
180186

181187
### Without Hooks
182188

183-
> **Note:** React 16.8 is a peer dependency of react-accessible-shuttle which means we can use hooks! However, if, for some reason, you find yourself stubbing 16.8 APIs so you can use newer stuff without upgrading, then you could possibly make things work :astonished:
189+
> **Note:** React 16.9 is a peer dependency of react-accessible-shuttle which means we can use hooks! However, if, for some reason, you find yourself stubbing 16.9 APIs so you can use newer stuff without upgrading, then you could possibly make things work :astonished:
184190
185191
Not on the hooks train yet? No worries. `react-accessible-shuttle` depends in React 16.8.0+ so if you have that, then you can use without hooks (i.e. in a `class` component) with a some extra effort :smiley: (although we should really use hooks because they make our lives much easier).
186192

@@ -304,8 +310,8 @@ function App() {
304310
source: ['a', 'b', 'c'],
305311
target: ['d', 'e', 'f'],
306312
},
307-
undefined,
308-
undefined,
313+
null,
314+
null,
309315
{
310316
selectFirstItem: (state: any, action: { [key: string]: any } = {}) => {
311317
if (action.type === 'SELECT_FIRST_ITEM') {

‎jest.config.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ module.exports = {
55
coverageReporters: ['text', 'html', 'text-summary', 'lcov'],
66
collectCoverageFrom: ['src/**/*.{ts,tsx}'],
77
modulePathIgnorePatterns: ['pkg/', 'resources/'],
8+
testPathIgnorePatterns: ['<rootDir>/src/index.ts'],
89
globals: {
910
'ts-jest': {
10-
tsConfig: '<rootDir>/tsconfig.test.json'
11-
}
11+
tsConfig: '<rootDir>/tsconfig.test.json',
12+
},
1213
},
1314
};

0 commit comments

Comments
 (0)