|
| 1 | +var React = require('react'); |
| 2 | + |
| 3 | +var Baz = React.createClass({ |
| 4 | + |
| 5 | + /************************************************** |
| 6 | + * Component Specs and lifecycle * |
| 7 | + **************************************************/ |
| 8 | + |
| 9 | + propTypes: { |
| 10 | + /** |
| 11 | + * The columns you want the Foo to have. Each column can have the |
| 12 | + * following attributes: |
| 13 | + * - `key` **(required)**: column identifier |
| 14 | + * - `label` **(required)**: Display text for the column. Should alread be |
| 15 | + * translated when passed to the Foo. |
| 16 | + * - `accessor` **(required)**: Function that returns relevant value from a |
| 17 | + * given data item. Later fed to the column `render` function. |
| 18 | + * - `render`: Function that takes the output of `accessor` and returns |
| 19 | + * what should be rendered for a given data item in that column. Should |
| 20 | + * return either a formatted value or can also be html. Columns without |
| 21 | + * `render` functions will not be displayed but can be used for filtering |
| 22 | + * (see the `filters` prop for more information). |
| 23 | + * - `widthMultiplier`: Number to multiply the width of the column relative |
| 24 | + * to other columns. By default, all columns are of equal width. |
| 25 | + */ |
| 26 | + columns: React.PropTypes.arrayOf( |
| 27 | + React.PropTypes.shape({ |
| 28 | + key: React.PropTypes.string.isRequired, |
| 29 | + label: React.PropTypes.string.isRequired, |
| 30 | + accessor: React.PropTypes.func.isRequired, |
| 31 | + render: React.PropTypes.func, |
| 32 | + widthMultiplier: React.PropTypes.number |
| 33 | + }) |
| 34 | + ), |
| 35 | + /** |
| 36 | + * Array of data items. These data items can take whatever form or have |
| 37 | + * whatever attributes you'd like. As long as the column.accessor and |
| 38 | + * column.render functions accounts for the form or attributes of your |
| 39 | + * data items. |
| 40 | + */ |
| 41 | + data: React.PropTypes.array.isRequired, |
| 42 | + /** |
| 43 | + * CSS class(es) to add to a Baz. Can be a string or a function. If this |
| 44 | + * prop is a string, the class(es) will be attached to all Bazzes in the Foo. |
| 45 | + * If it is a function, the function will be called with the data item |
| 46 | + * to be rendered in the Baz and the classes returned will be applied |
| 47 | + * to that item's Baz when rendered. In the case of a function the return |
| 48 | + * value is expected to a string of space-separated classes. |
| 49 | + */ |
| 50 | + bazClassNames: React.PropTypes.oneOfType([ |
| 51 | + React.PropTypes.string, |
| 52 | + React.PropTypes.func |
| 53 | + ]), |
| 54 | + /** |
| 55 | + * An array of filters you want the Foo to have. When no filters are |
| 56 | + * given, no filter dropdowns will be shown. A filter object can have the |
| 57 | + * following properties: |
| 58 | + * - `columnKey` **(required)**: The key of the column in the `columns` |
| 59 | + * array the filter will do the filtering on. |
| 60 | + * - `options`: An array of options to display in the filter dropdown. Each |
| 61 | + * option is required to have a `value` and `label`. |
| 62 | + * - `defaultValue` **(required)**: A default value to render the filter with. |
| 63 | + * Should match one of the values in the `options` array. |
| 64 | + * - `filterCb` **(required)**: The predicate function used to filter the |
| 65 | + * items in the Foo when a selection for this filter is made. The `Foo` |
| 66 | + * will call this function with the option `value` as the first argument, and |
| 67 | + * the value of each data item (as they're being filtered) as the second |
| 68 | + * argument. The value of the data item is determined using the corresponding |
| 69 | + * columns (using `columnKey`) `accessor` function. |
| 70 | + * - `value`: Given value to the assign to the filter. If not given, this filter's |
| 71 | + * `defaultValue` will be used. |
| 72 | + */ |
| 73 | + filters: React.PropTypes.arrayOf( |
| 74 | + React.PropTypes.shape({ |
| 75 | + columnKey: React.PropTypes.string.isRequired, |
| 76 | + options: React.PropTypes.arrayOf( |
| 77 | + React.PropTypes.shape({ |
| 78 | + value: React.PropTypes.string.isRequired, |
| 79 | + label: React.PropTypes.string.isRequired |
| 80 | + }) |
| 81 | + ), |
| 82 | + defaultValue: React.PropTypes.string.isRequired, |
| 83 | + filterCb: React.PropTypes.func.isRequired, |
| 84 | + value: React.PropTypes.string |
| 85 | + }) |
| 86 | + ), |
| 87 | + /** |
| 88 | + * An array of column keys that designate which columns the search should |
| 89 | + * look for matches in. When no search columns are given, the search field |
| 90 | + * is not shown in the Foo. |
| 91 | + */ |
| 92 | + searchColumns: React.PropTypes.arrayOf(React.PropTypes.string), |
| 93 | + /** |
| 94 | + * The initial search query. Tokenized based on spaces in the string. |
| 95 | + */ |
| 96 | + searchQuery: React.PropTypes.string, |
| 97 | + /** |
| 98 | + * A function that when given a data item returns a list of possible actions |
| 99 | + * that can be taken for that item. if no `bazActions` are given, then no |
| 100 | + * actions will be shown. This function should return an array of either |
| 101 | + * a visual divider between action options **OR** objects with a `type` and |
| 102 | + * `label`. |
| 103 | + */ |
| 104 | + bazActions: React.PropTypes.func, |
| 105 | + /** |
| 106 | + * A React element that renders and controls secondary info. |
| 107 | + * This could be bulk action buttons, non-actionable information, etc. |
| 108 | + * Will be rendered to the right of the search and filters. |
| 109 | + */ |
| 110 | + secondaryInfo: React.PropTypes.element |
| 111 | + }, |
| 112 | + |
| 113 | + statics: { |
| 114 | + TEXT_ALIGN_LEFT : TEXT_ALIGN_LEFT, |
| 115 | + TEXT_ALIGN_RIGHT : TEXT_ALIGN_RIGHT, |
| 116 | + SORT_DIRECTION_DESC : SORT_DIRECTION_DESC, |
| 117 | + SORT_DIRECTION_ASC : SORT_DIRECTION_ASC |
| 118 | + }, |
| 119 | + |
| 120 | + getDefaultProps() { |
| 121 | + return { |
| 122 | + maxConfigOptions : 6, |
| 123 | + onSearch : _.noop, |
| 124 | + onFilter : _.noop, |
| 125 | + onSort : _.noop |
| 126 | + }; |
| 127 | + }, |
| 128 | + |
| 129 | + /************************************************** |
| 130 | + * Rendering * |
| 131 | + **************************************************/ |
| 132 | + |
| 133 | + render: function() { |
| 134 | + return ( |
| 135 | + <div>Hello World, this is a Baz element.</div> |
| 136 | + ); |
| 137 | + } |
| 138 | +}); |
| 139 | + |
| 140 | +module.exports = Baz; |
0 commit comments