223 |
224 |
225 | Visit [code.viget.com](http://code.viget.com) to see more projects from [Viget.](https://viget.com)
226 |
--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | public/index.html
2 | public/main.*.js
3 | public/main.*.css
4 |
--------------------------------------------------------------------------------
/example/example.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as DOM from 'react-dom'
3 | import { Ars, render } from '../src'
4 | import server from './server'
5 |
6 | import './style'
7 |
8 | const options = {
9 | url: '/api/photos',
10 |
11 | listQuery(options) {
12 | return {
13 | term: options.search,
14 | sort: options.sort,
15 | limit: 10,
16 | offset: options.page * 10
17 | }
18 | },
19 |
20 | onError(response) {
21 | return `${response.code}: ${response.message}`
22 | },
23 |
24 | onChange(value) {
25 | console.log('Value changed to %s', value)
26 | },
27 |
28 | request: server
29 | }
30 |
31 | function Example({ title, options }) {
32 | return (
33 |
34 |
40 | )
41 | }
42 |
43 | DOM.render(
44 |
35 |
38 | {title}
36 |{JSON.stringify(options, null, 2)}
39 |
45 |
,
63 | document.getElementById('app')
64 | )
65 |
--------------------------------------------------------------------------------
/example/public/images/alistar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vigetlabs/ars-arsenal/42c3ab3b85744155147923e3742923a2d953a241/example/public/images/alistar.jpg
--------------------------------------------------------------------------------
/example/public/images/brand.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vigetlabs/ars-arsenal/42c3ab3b85744155147923e3742923a2d953a241/example/public/images/brand.jpg
--------------------------------------------------------------------------------
/example/public/images/galio.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vigetlabs/ars-arsenal/42c3ab3b85744155147923e3742923a2d953a241/example/public/images/galio.jpg
--------------------------------------------------------------------------------
/example/public/images/jarvan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vigetlabs/ars-arsenal/42c3ab3b85744155147923e3742923a2d953a241/example/public/images/jarvan.jpg
--------------------------------------------------------------------------------
/example/public/images/riven.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vigetlabs/ars-arsenal/42c3ab3b85744155147923e3742923a2d953a241/example/public/images/riven.jpg
--------------------------------------------------------------------------------
/example/public/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | ArsArsenal
12 | vigetlabs/ars-arsenal 13 |
90 | {this.renderSelection()}
91 | {dialogOpen && this.getPicker()}
92 |
93 | Awaiting data...
11 | } 12 | returnNo items exist {search ? `for “${search}”.` : ''}
13 | } 14 | 15 | export default Empty 16 | -------------------------------------------------------------------------------- /src/components/error-message.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * ErrorMessage 3 | * Displays error information should an endpoint fail to respond 4 | */ 5 | 6 | import * as React from 'react' 7 | 8 | interface Props { 9 | error?: Error | string 10 | } 11 | 12 | const ErrorMessage: React.SFC{error instanceof Error ? error.message : error}
18 | }
19 |
20 | export default ErrorMessage
21 |
--------------------------------------------------------------------------------
/src/components/figure.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Figure
3 | * An individual gallery tile
4 | */
5 |
6 | import * as React from 'react'
7 | import Ink from 'react-ink'
8 | import cx from 'classnames'
9 | import Image from './ui/image'
10 | import { Record, ID } from '../record'
11 |
12 | interface Props {
13 | record: Record
14 | onClick: (id: ID, picked: boolean) => void
15 | picked: boolean
16 | }
17 |
18 | const Figure: React.SFC
63 |
72 |
82 |
83 | {items.map(this.getItem, this)}
84 |
85 |
87 | )
88 | }
89 |
90 | setFocus = (focus: Record) => {
91 | this.setState({ focus })
92 | }
93 |
94 | clearFocus = () => {
95 | this.setState({ focus: null })
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/src/components/multiselection-item.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * MultiSelectionItem
3 | */
4 |
5 | import * as React from 'react'
6 | import cx from 'classnames'
7 | import Image from './ui/image'
8 | import SelectionNotFound from './ui/selection-not-found'
9 | import LoadRecord, { RecordResult } from '../containers/load-record'
10 | import { RefreshIcon } from '../icons'
11 | import { ID, Record } from '../record'
12 |
13 | interface Props {
14 | id: ID | null
15 | resource: string
16 | }
17 |
18 | export default class MultiSelectionItem extends React.Component
35 | {fetching ?
38 | )
39 | }
40 |
41 | render() {
42 | return
34 | {ids.map(id => (
35 |
38 | )
39 | }
40 |
41 | render() {
42 | const { resource, ids, onEdit, onClear } = this.props
43 |
44 | let hasPicked = ids.length
45 |
46 | let title = selectionText({
47 | resource: resource,
48 | item: hasPicked,
49 | isPlural: true
50 | })
51 |
52 | let className = cx('ars-multiselection', {
53 | 'ars-has-photo': hasPicked
54 | })
55 |
56 | return (
57 |
58 | {this.getItems()}
59 |
60 |
74 |
75 | )
76 | }
77 |
78 | onClick = (event: React.MouseEvent) => {
79 | event.preventDefault()
80 | this.props.onClick(event)
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/components/picker.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Picker
3 | * The a modal that appears to select a gallery image
4 | */
5 |
6 | import * as React from 'react'
7 | import Button from './ui/button'
8 | import ErrorMessage from './error-message'
9 | import FocusTrap from 'react-focus-trap'
10 | import Gallery from './gallery'
11 | import Search from './search'
12 | import TableView from './table-view'
13 | import LoadCollection, { CollectionResult } from '../containers/load-collection'
14 | import Empty from './empty'
15 | import GalleryButton from './gallery-button'
16 | import TableButton from './table-button'
17 | import { ID, Record } from '../record'
18 | import { ArsColumn, SortableColumn, ArsMode } from '../options'
19 | import OptionsContext from '../contexts/options'
20 |
21 | type Mode = 'gallery' | 'table'
22 |
23 | interface Props {
24 | columns?: ArsColumn[]
25 | mode: ArsMode
26 | multiselect: boolean
27 | onChange: (selection: ID[]) => void
28 | onExit: () => void
29 | picked: Array{trimmed}
: null 18 | } 19 | 20 | getCaption(caption: string) { 21 | let trimmed = caption ? caption.trim() : '' 22 | 23 | return trimmed.length ?{trimmed}
: null 24 | } 25 | 26 | render() { 27 | let { caption = '', name = '', url } = this.props.item 28 | 29 | return ( 30 |
47 | {this.getPhoto(data, fetching, initialized)}
48 |
49 |
62 |
63 | )
64 | }
65 |
66 | render() {
67 | return
100 | 
101 |
102 |
130 |
131 |
132 |
187 |
188 | )
189 | }
190 | }
191 |
192 | export default TableView
193 |
--------------------------------------------------------------------------------
/src/components/table-view/table-heading.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import cx from 'classnames'
3 | import { ArsColumn } from '../../options'
4 |
5 | interface Props {
6 | active: boolean
7 | children: React.ReactNode
8 | field: string
9 | onSort?: (string: ArsColumn) => void
10 | show: boolean
11 | }
12 |
13 | const TableHeading: React.SFC|
134 | Use this column to select items
135 |
136 | |
145 |
|---|
18 | {record.tags.map((tag, i) => (
19 |
22 | )
23 | }
24 |
25 | export default TagList
26 |
--------------------------------------------------------------------------------
/src/components/tag.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | interface TagProps {
4 | tag: string
5 | onClick: (tag: string) => void
6 | }
7 |
8 | const Tag: React.SFC
9 |
10 |
13 |
14 | )
15 |
16 | export default SelectionNotFound
17 |
--------------------------------------------------------------------------------
/src/containers/__tests__/load-record.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import xhr from 'xhr'
3 | import LoadRecord from '../load-record'
4 | import { mount } from 'enzyme'
5 |
6 | jest.useFakeTimers()
7 |
8 | describe('LoadRecord', () => {
9 | beforeEach(() => xhr.mockClear())
10 |
11 | describe('componentWillMount', () => {
12 | test('fetches on mount if given a id', () => {
13 | mount(Unable to find {resource.toLowerCase()}
11 |It may have been deleted.
12 |