How to use @lskjs/mobx - 5 common examples
To help you get started, we’ve selected a few @lskjs/mobx 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.
lskjs / ux / packages / list / src / stories / listStore.js View on Github 
'Director',
'Manager',
'Stuff',
'Salesman',
'Driver',
'Tester',
'Designer',
]),
rating: +(random(1, 1000, true).toFixed(2)),
})),
};
}
}
Promise.config({ cancellation: true });
const listStore = new ListStore({
api: new Api({
uapp: {
api: apiquery,
},
}),
skip: 20,
});
// setTimeout(() => {
// listStore.fetch();
// }, 2000);
export default listStore;await promise;
const count = 1000;
const roles = () => sample(['Director', 'Manager', 'Stuff', 'Salesman', 'Driver', 'Tester', 'Designer']);
return {
count,
items: range(skip, skip + limit).map(id => ({
id,
title: `User ${id + 1}`,
rating: random(id, count, true).toFixed(2),
role: roles(),
})),
};
},
};
const listStore = new ListStore({ api });
setTimeout(() => {
listStore.fetch();
}, 2000);
const columns = [60, '1fr', '1fr', 60];
const styleHeight = css`
height: 100%;
min-height: 48px;
align-items: center;
`;
const itemStyle = css`
padding: 5 12px;
text-align: center;
background: #eee;['field 9', indexToValue('field9')],
];
const markupProps = {};
const api = {
async find({ skip = 0, limit = 20 } = {}) {
const count = data.length;
return {
count,
items: data.slice(skip, skip + limit),
};
},
};
const listStore = new ListStore({
api,
});
listStore.fetch({ limit: 25 });
const defaultData = [
['title1', 'title2', 'title 3'],
['cell1', 'cell2', 'cell3'],
['cell4', 'cell5', 'cell6'],
];
export default ({ storiesOf }) => (
storiesOf('downloads/utils', module)
.add('download', () => (await promise;
const count = 1000;
const roles = () => sample(['Director', 'Manager', 'Stuff', 'Salesman', 'Driver', 'Tester', 'Designer']);
return {
count,
items: range(skip, skip + limit).map(id => ({
id,
title: `User ${id + 1}`,
rating: random(id, count, true).toFixed(2),
role: roles(),
})),
};
},
};
const listStore = new ListStore({ api });
setTimeout(() => {
listStore.fetch();
}, 2000);
const columns = [60, '1fr', '1fr', 60];
const styleHeight = css`
height: 100%;
min-height: 48px;
align-items: center;
`;
const itemStyle = css`
padding: 0 12px;
`;render() {
const {
debug, columns, show: customShow = {},
pageSize = 10,
pageOptions = [1, 2, 5, 10],
paginatorProps = {},
Item, FilterForm, HeaderItem,
filterProps,
innerProps,
} = this.props;
const isFilterModal = getProp(this, 'isFilterModal');
let { listStore } = this.props;
if (!listStore) {
if (__DEV__) return ;
listStore = new ListStore();
}
const { selectStore } = listStore;
const show = mapValues({
...defaultShow,
...customShow,
}, Boolean);
const List = { //eslint-disable-line
LoaderIcon: getProp(this, 'LoaderIcon'),
Sticky: getProp(this, 'Sticky'),
Header: getProp(this, 'Header'),
Search: getProp(this, 'Search'),
Filter: getProp(this, 'Filter'),
Tag: getProp(this, 'Tag'),
