Mortar-JS

by fuzz-productions

master4960167  created August 3rd 2016

other versions

40
Classes
195
Functions

FiltersMultipleFilterOptions

    MultipleFilterOptions Component A component for building filters with multiple options. The user is not bound to a single selection, so the filters are sent as "ors"

    Properties:

    1. options

      The selectable options.

    2. actionMethodoptional

      A function that is called when an option is toggled

    Examples:

    // Like options will be nested under a single Header:
    // ______________
    // |Age:         |
    // | [] 10-19... |
    // |             |
    // | Registered  |
    // | [] Yes ...  |
    // |_____________|
    
    filterOptions: {
    	'Age': {
    		'10-19': {'label': '10-19'},
    		'20-29': {'label': '20-29'},
    		'30-39': {'label': '30-39'}
    	},
    	'Registered': {
    		'Yes': {'is_registered': true},
    		'No' : {'is_registered': false}
    	}
    },
    render: function() { return(
    	<Br.Filter filters={this.filterOptions} actionMethod={this.requestNewData} multiple={true} />
    )}

    See:

    fx
    FiltersMultipleFilterOptions.setFilters

      Builds a filter object that can span multiple attributes and multiple queries Then requests the resource again using the new filter.

      Returns:

      Examples:

      // Output
      {
          filter1: '[query, query, query]',
          filter2: '[query, query, query]',  // Give me everything that meets any query in all filters.
          filter3: '[query, query, query]',  // in other words give me anything with, filter1 (x or y) AND filter 2 (a or b)
      }

      n
      FormComponents

      Form components are varied in implementation, but all focus on one thing: editing data. All Form components can live outside of the '

      ', but wrapping them in '' adds a lot of functionality. For example, automatic updating of bound resources via the FormStore.

      In the below example, we require the Mortar Form, and create a working resource with the property "first_name". We then bind that resource to the form, and reference the path to that key in Br.Form.Input. The input is rendered with the value specified in 'workingResource'. Now, any changes to that input field will be caught by the Form, and a change event will be fired in the 'FormStore'.

      Registering a change listener to the 'FormStore' will allow changes to be picked up in our component, and let us 'setState()' with any changes.

      Static Members:

      Examples:

      var Br = MortarJS.require('components', 'Form');
      var FormStore = MortarJS.Stores.FormStore;
      
      // in the component:
      workingResource = {first_name: 'Kyle'}
      
      // in component.render
      <Br.Form key="a string" formKey="unique string" bindResource={this.workingResource}>
      	<Br.Form.Input fieldKey="first_name" type="text" label="First Name" />
      </Br.Form>

      FormComponentsCheckbox

        Checkbox Component

        Properties:

        1. fieldKey

          The key for the property on the object getting edited.

        2. changeCallback

          The function that is called whenever a change occurs to this component

        3. options

          The options that will turn into checkboxes

        4. labelAttribute

          The attribute on an object to be displayed

        5. disabled

          If true, disables making changes to the component

        6. comparisonAttr

          The attribute to compare to the form's bound resource and return

        7. overrideclass

          A string of classes to attach to the rendered checkboxes

        8. inputLabel

          A label to be displayed above the checkboxes

        See:

        FormComponentsDropdownSelect

          DropdownSelect class.

          The dropdown select component is used to...

          Properties:

          1. fieldKey

          2. placeholderoptional

          3. callbackoptional

          4. changeCallbackoptional

          5. options

          6. uniqueoptional

          7. label

          8. inputLabeloptional

          9. multipleoptional

          10. disabledoptional

          11. debugoptional

          Examples:

          <Br.Form.DropdownSelect fieldKey='Ages'
          	options={['1-10', '11-20', '21-30']}
          	multiple={false} placeholder='Select an Age'
          	required="true" />

          See:

          fx
          FormComponentsDropdownSelect.componentDidMount

            When the component mounts, an event listener is attached to the window to track click events, and filter them into this component's handleClick function.

            Also calls the FormUtilityMixin's componentDidMount function to handle input changes.

            Returns:

            See:

            fx
            FormComponentsDropdownSelect.handleClick
            • event

            A click listener attached to the window.

            Any time there's a click, it checks to see if there's an open dropdown, and if the click occurred outside of the open dropwn.

            If both of these conditions are true, the dropdown is closed.

            Arguments:

            1. event

              The window's click event

            Returns:

            fx
            FormComponentsDropdownSelect.render~dropdownStyle

              Sets the max-height property of the dropdown dynamically. We are animating the drawer with the max-height property, so we need it to be accurate for each unique drawer.

              If it's too high, the animation closes weirdly. Too large, and content will be cut off.

              Returns:

              fx
              FormComponentsDropdownSelect.setSelected
              • option

              After clicks, handles updating the selected array in this.state

              If we're allowing multiple selections, it pushes the selection to the array, then checks to make sure that all values are unqiue before setting state.

              If we're not allowing multiple selections, it simply swaps the selections.

              Arguments:

              1. option

                The selected value in the dropdown

              Returns:

              fx
              FormComponentsForm.componentWillReceiveProps
              • nextProps

              Form component receives props on every parent state change (when form fields are edited). On these events, we need to sync the form's resource with parent's state.

              Arguments:

              1. nextProps

                The next props for this component

              Returns:

              fx
              FormComponentsForm.getNestedFieldKeys
              • obj

              Takes an object with infinitely nested values and grabs the paths to all values

              Example: var obj = {a: 1, b: {c: 2}}; getNestedFieldKeys(obj); // ['a', 'b.c']

              Arguments:

              1. obj

                The object to be flattened

              Returns:

              1. An array of paths to all values on the object

              fx
              FormComponentsForm.traverseChildren
              • children

              Dynamically (recursively) traverse every child component and set some universal properties for them.

              Arguments:

              1. children

                The children nodes of the Form component

              Returns:

              FormComponentsFormValidator
              • schema

              A very simple class that handles checking if a resource is valid against a schema and passing back errors if it is not.

              When instantiated, binds the schema to the internal object for later validation.

              Arguments:

              1. schema

                A js-schema to validate the form's resource off of

              Static Members:

              FormComponentsInput

                Form Input Component Responsible for handling simple keyboard inputs.

                Properties:

                1. formKey

                2. fieldKey

                3. resource

                  The value of the entire form

                4. labeloptional

                5. placeholderoptional

                6. helpTextoptional

                7. type

                8. disabledoptional

                9. onFocusoptional

                10. onBluroptional

                11. minoptional

                12. maxoptional

                13. maxLengthoptional

                14. autoFocusoptional

                15. valueoptional

                  A custom value to display if we don't want to rely on fieldValue

                16. changeCallbackoptional

                See:

                fx
                FormComponentsInput.handleInput
                • event

                Handles user input into the input component. Sets fieldValue in the component state to equal the keyboard input and syncs with the provided remote through a callback.

                Arguments:

                1. event

                  The event that triggered this function

                Returns:

                fx
                FormComponentsInput.handleInput
                • event

                Handles user input into the input component. Sets fieldValue in the component state to equal the keyboard input and syncs with the provided remote through a callback.

                Arguments:

                1. event

                  The event that triggered this function

                Returns:

                FormComponentsRadioButton

                  RadioButton component A component used to build radio-style checkbox elements.

                  Properties:

                  1. fieldKey

                    The key for the property on the object getting edited.

                  2. label

                    The label for entire component. Displayed above the radio buttons

                  3. valueKey

                    If the bound resource doesn't save data to value you can define your own value key here.

                  4. labelAttribute

                    The attribute on the bound resource to display as the option next to the radio button.

                  5. options

                    Possible options that will become the radio-button.

                  6. disabled

                    If the fields should be disabled or not

                  See:

                  FormComponentsTextArea

                    TextArea Component A component used for building long-form text input forms.

                    Properties:

                    1. limitoptional

                      Max character limit for text area

                    2. labeloptional

                    3. placeholderoptional

                    4. helpTextoptional

                    5. disabledoptional

                    6. fieldKey

                    7. requiredoptional

                    Examples:

                    render: function() { return(
                    	<Br.Form.TextArea
                    		fieldKey="userComment"
                    		label="Comment"
                    		placeholder="Sample text area component. Type away!"
                    		required="true"
                      />
                    )}

                    See:

                    FormComponentsToggle

                      Form Toggle Component Responsible for handling simple keyboard inputs.

                      Properties:

                      1. fieldKey

                      2. fieldLabeloptional

                      3. disabledoptional

                      4. checkedoptional

                        A custom checked value if we don't want to rely on fieldValue

                      5. mods

                      6. changeCallbackoptional

                      7. labelBeforeoptional

                        A label to show when the box is unchecked

                      8. labelAfteroptional

                        A label to show when the box is checked

                      See:

                      fx
                      FormComponentsToggle.handleInput
                      • event

                      Handles user input into the input component. Sets fieldValue in the component state to equal the keyboard input and syncs with the provided remote through a callback.

                      Arguments:

                      1. event

                        The event triggering this function

                      Returns:

                      FormComponentsTypeAheadInput

                        TypeAheadInput Component A component for building 'type-ahead' or autocomplete functionality.

                        Properties:

                        1. fieldKey

                        2. label

                        3. placeholder

                        4. helpText

                        5. limit

                          Limit on number of suggested results

                        6. resourceAction

                        7. returnFieldoptional

                          Field to return from matching objects in source

                        8. source

                          Source, either a local array or 'remote'

                        9. updateCallback

                          A callback called every-time the component updates

                        Examples:

                        // A local source array could be structured as follows:
                        
                        dataSource: [
                        	{ name: 'Alabama',              state : 'AL'},
                        	{ name: 'Alaska',               state : 'AK'},
                        	{ name: 'Arizona',              state : 'AZ'},
                        	{ name: 'Arkansas',             state : 'AR'},
                        	{ name: 'California',           state : 'CA'},
                        	{ name: 'Colorado',             state : 'CO'},
                        	{ name: 'Connecticut',          state : 'CT'},
                        ]
                        
                        render: function() { return(
                        	<Br.Form.TypeAheadInput
                        		source={this.dataSource}
                        		fields={['name', 'state']}
                        		returnField='state'
                        		label='Start Typing...'
                        		placeholder="USA state search"
                        	/>
                        )}

                        See:

                        m
                        FormKeyMixin

                        Kind
                        mixin
                        Scope
                        global

                        Generates a 16 character string to be used as a unique formKey for components that do not inherit formKeys as a prop.

                        fx
                        GlobalTooltip.setHeight
                        • height
                        • orientation

                        Kind
                        function
                        Scope
                        static

                        Dynamically computes the width and (conditionally) margin-top styles for the tooltip. A valid CSS length is required when passing the width property.

                        Arguments:

                        1. height

                          The width passed in from this.props.width

                        2. orientation

                          The orientation of the tooltip, passed from this.props.orientation

                        Returns:

                        1. The computed styles for width and conditionally margin-top. False if the input is invalid.

                        fx
                        GlobalTooltip.setWidth
                        • width
                        • orientation

                        Kind
                        function
                        Scope
                        static

                        Dynamically computes the width and (conditionally) margin-left styles for the tooltip. A valid CSS length is required when passing the width property.

                        Arguments:

                        1. width

                          The width passed in from this.props.width

                        2. orientation

                          The orientation of the tooltip, passed from this.props.orientation

                        Returns:

                        1. The computed styles for width and optionally margin-left. False if the input is invalid.

                        GlobalComponentsButtonDrawer

                          No description available.

                          Properties:

                          1. mods

                            The mods for the buttonDrawer buttons

                          2. type

                            The type of button to show

                          3. icon

                            The buttonDrawer's icon

                          4. iconClass

                            The buttonDrawer's iconClass (for example, fa for font-awesome)

                          5. handleAction

                            The function to call when an action is fired

                          6. buttons

                            The hidden buttons of the buttonDrawer

                          See:

                          fx
                          GlobalComponentsModalContainer.addKeyUpListener

                            When the modal is opened, an event listener is attached to the window to track keyup events, and filter them into this component's handleKeyUp function.

                            Returns:

                            fx
                            GlobalComponentsModalContainer.componentWillReceiveProps
                            • newProps

                            Invoked when a component is receiving new props. This method is not called for the initial render.

                            Arguments:

                            1. newProps

                              Incoming props from parent component

                            Returns:

                            fx
                            GlobalComponentsModalContainer.handleClick
                            • event

                            A click listener attached to the modal. Every time a click happens, this function checks to see if the click was on the modal dialog, or outside of it.

                            If the click is outside of the dialog, we close the modal without saving.

                            Arguments:

                            1. event

                              The click event

                            Returns:

                            fx
                            GlobalComponentsModalContainer.handleKeyUp
                            • event

                            A keyup listener attached to the modal. Every time a key is released, this function checks to see if it was the 'ESC' key. If the 'ESC' was released, we close the modal.

                            Arguments:

                            1. event

                              The keyup event

                            Returns:

                            GlobalComponentsTooltip

                              No description available.

                              Properties:

                              1. children

                                The children that the tooltip wraps and will point to when open.

                              2. text

                                The text to display inside of the tooltip

                              3. orientationoptional

                                The orientation of the tooltip. (top, bottom, left, right)

                              4. coloroptional

                                The text color

                              5. backgroundoptional

                                The background color

                              6. width

                                The width (in pixels) of the tool tip

                              7. height

                                The height (in pixels) of the tool tip

                              8. keepOpenoptional

                                If true, the tooltip is always shown

                              See:

                              fx
                              MortarJSflatten
                              • object
                              • path
                              • paths

                              Kind
                              function
                              Scope
                              static

                              Flatten an object and set keys to contain object paths

                              Arguments:

                              1. object

                                The object to flatten

                              2. path

                                The path to the component to require

                              3. paths

                                The paths of the flattened object

                              Returns:

                              fx
                              MortarJSrequire
                              • type

                              Kind
                              function
                              Scope
                              static

                              Dynamically and intelligently parse string requirements

                              Format: FuzzyReaction.require('type(components|action|etc)', 'require1', 'require2');

                              Arguments:

                              1. type

                                The type of components to require

                              Returns:

                              m
                              ResourceComponentMixin

                              Kind
                              mixin
                              Scope
                              global

                              Resource Component Mixin

                              This mixin is used to help lighten the load of creating new Resource Components. This mixin will handle adding and removing change listeneres, handling changes, binding resources to scope, retrieving from stores, and firing optional callbacks as well.

                              Examples:

                              var ResourceComponentMixin = Mortar.Mixins.ResourceComponentMixin;
                              React.createClass({
                              	mixins: [ResourceComponentMixin],
                              	pageConfig: function() {
                              		stores: [
                              			store: UsersStore,
                              			action: UsersStore.getUsers, // makes this request when a change happens on UsersStore
                              			bindTo: 'users', // will do this.setState({users: UsersStore.getUsers})
                              			callback: this.myCallback // fired after state is set
                              		]
                              	},
                              	componentDidMount: function() {
                              		_componentDidMount();
                              	},
                              	componentWillUnmount: function() {
                              		_componentWillUnmount();
                              	}

                              fx
                              StoresPaginationStore.getRequestedModifiers

                                Kind
                                function
                                Scope
                                static

                                Retrieve the appopriate query parameters (modifiers)

                                Returns:

                                n
                                TableComponents

                                Table components are responsible for displaying tabular data.

                                The only component that is typically used by the developer is "TableContainer". The table container takes in the data to be displayed as rows, the data keys to display as columns, a table title, and then additional configuration options to change the display.

                                All of these values are passed down as properties from TableContainer -> Table -> Rows -> Row where it is ultimately finally rendered.

                                Static Members:

                                Examples:

                                var Br = MortarJS.require('components', 'Table');
                                
                                // in component.render
                                var data = []; // An array of objects to be displayed in the table
                                var dataKeys = {}; // An object, where every key is the name of a field in data
                                
                                return { <Br.Table data={data} dataKeys={dataKeys} title="My table" /> }

                                fx
                                TableComponentsRow.buildActionOptions

                                  Create action buttons for the row. For example, an "edit" button will be added if the resource is editable. When edit is clicked, renders a "save" and "cancel" button.

                                  Adds any buttons to the last column in the row.

                                  Returns:

                                  fx
                                  TableComponentsRow.componentDidMount

                                    The row component is only mounted when data exists (retrieved from the API or wherever its source is). This means that there is no componentWillReceiveProps being fired as it does not fire on mount but when there is a new set of props to compare to an old set. We can require props.data to be present and then be sure that data props exist in this component on mount and handle any componentWillReceiveProps-esque logic here.

                                    Returns:

                                    See:

                                    fx
                                    TableComponentsRow.doActionOnResource
                                    • action

                                    Fire a named action event to the parent component's registered callback

                                    Arguments:

                                    1. action

                                      The action that is getting fired. Determines the path through this function

                                    Returns:

                                    fx
                                    TableComponentsRow.selectRow
                                    • event

                                    Selecting a checkbox will set its bind resource's 'selected' property to selected true fires the 'selectedRow' action

                                    Arguments:

                                    1. event

                                    Returns:

                                      • null

                                      fx
                                      TableComponentsRows.handleDragEnd

                                        Finalize the drag sort

                                        Source of truth for sort order is in the developer's parent component. Here we just determine and bubble up the 'proposed' sortOrder.

                                        Returns:

                                        TableComponentsSumRow

                                          Table sum rows component If the summableRows option is a property of the options object on a table, this component will sum the value for that column, and add it to the last row of the table. Any columns that are not summable are rendered as an empty cell.

                                          Adjacent empty cells will be collapsed into a single cell.

                                          Properties:

                                          1. data

                                            The data to display for this row.

                                          2. dataKeys

                                            The data keys to display from data. Each key maps to a single cell.

                                          3. rows

                                            All the rows for the table.

                                          4. optionsoptional

                                            Additional options to configure that data.

                                          See:

                                          fx
                                          TableComponentsSumRow.buildRowData

                                            Builds the data for the row one step at a time. First, loop through the keys to find all summable rows. Then, start adding the jsx to an array to be rendered as the final row.

                                            Returns:

                                            TableComponentsTable

                                              Table component

                                              Properties:

                                              1. data

                                                The data that is displayed. Each index is one row of the table.

                                              2. dataKeys

                                                The keys of the table. Each key on the object corresponds to a table header.

                                              3. options

                                                Optional configuration options for the table

                                              See:

                                              fx
                                              TableComponentsTable.toggleAllCheckboxes

                                                When the top checkbox is selected, all rows should be (de)selected accordingly Sets state with the proper selected selected status, and sets all children as well. Fires the 'selectAllRows' action for the actionsCallback

                                                Returns:

                                                TableComponentsTableContainer

                                                  Wrapper component for tables

                                                  Properties:

                                                  1. title

                                                    The title of the table

                                                  2. data

                                                    The data that will be displayed. Each index is one row of the table.

                                                  3. dataKeys

                                                    The keys of the table. Each key on the object corresponds to a table header.

                                                  4. options

                                                    Optional configuration options for the table

                                                  See:

                                                  fx
                                                  moduleexports.deserialize
                                                  • queryString

                                                  Kind
                                                  function
                                                  Scope
                                                  static

                                                  Break apart a query string into an object

                                                  Arguments:

                                                  1. queryString

                                                    The query string to seserialize into an object

                                                  Returns:

                                                  fx
                                                  moduleexports.failedAuthentication
                                                  • response

                                                  Kind
                                                  function
                                                  Scope
                                                  static

                                                  Authentication failed. Necessary to set CmsUserStore and result in a redirect to login page.

                                                  Arguments:

                                                  1. response

                                                    The response from the API

                                                  Returns:

                                                  fx
                                                  moduleexports.serialize
                                                  • object

                                                  Kind
                                                  function
                                                  Scope
                                                  static

                                                  Serialize an object into a string of query parameters. This does not return the beginning ?.

                                                  Arguments:

                                                  1. object

                                                    The object to serialize

                                                  Returns:

                                                  fx
                                                  moduleexports.uploadProgress
                                                  • loaded
                                                  • total

                                                  Kind
                                                  function
                                                  Scope
                                                  static

                                                  Authentication failed. Necessary to set CmsUserStore and result in a redirect to login page.

                                                  Arguments:

                                                  1. loaded

                                                    If the upload succeeded

                                                  2. total

                                                    The progress total

                                                  Returns: