Added sort

docs/Answer Formats.md

@@ -1,4 +1,4 @@
-# DEPRECATED!! Use the typescript definition files!
+# DEPRECATED!! Use the typescript definition files in response.d.ts
 
 # Answer Formats
 

lib/QuestionComponent.js

@@ -763,6 +763,7 @@ module.exports = QuestionComponent = function () {
               onValueChange: this.handleValueChange,
               columns: this.props.question.columns,
               rows: this.props.question.rows,
+              sortOptions: this.props.question.sortOptions,
               T: this.context.T,
               locale: this.context.locale
             });

lib/answers/CascadingListAnswerComponent.d.ts

@@ -10,6 +10,8 @@ interface Props {
     columns: CascadingListColumn[];
     value?: CascadingListAnswerValue;
     onValueChange: (value?: CascadingListAnswerValue) => void;
+    /** True to sort options alphabetically */
+    sortOptions?: boolean;
     /** Localizer to use */
     T: LocalizeString;
     /** Locale to use */

lib/answers/CascadingListAnswerComponent.js

@@ -120,6 +120,10 @@ var CascadingListAnswerComponent = /** @class */ (function (_super) {
                 options.push({ value: enumValue.id, label: formUtils_1.localizeString(enumValue.name, this.props.locale) });
             }
         }
+        // Sort options if set
+        if (this.props.sortOptions) {
+            options = lodash_1.default.sortBy(options, function (opt) { return opt.label; });
+        }
         return react_1.default.createElement("div", { style: { paddingBottom: 15 }, key: index },
             react_1.default.createElement("label", { className: "text-muted" }, formUtils_1.localizeString(this.props.columns[index].name, this.props.locale)),
             react_1.default.createElement(bootstrap_1.Select, { value: this.state.columnValues[index], options: options, nullLabel: this.props.T("Select..."), onChange: this.handleChange.bind(null, index) }));

lib/formDesign.d.ts

@@ -833,6 +833,9 @@ interface CascadingListQuestion extends QuestionBase {
   /** Columns in the table that are displayed also as dropdowns to choose the row */
   columns: CascadingListColumn[]
 
+  /** True to sort items alphabetically */
+  sortOptions?: boolean
+
   /** No validation available */
   validations: []
 }

src/QuestionComponent.coffee

@@ -482,6 +482,7 @@ module.exports = class QuestionComponent extends React.Component
           onValueChange: @handleValueChange
           columns: @props.question.columns
           rows: @props.question.rows
+          sortOptions: @props.question.sortOptions
           T: @context.T
           locale: @context.locale
         }

src/answers/CascadingListAnswerComponent.tsx

@@ -18,6 +18,9 @@ interface Props {
   value?: CascadingListAnswerValue
   onValueChange: (value?: CascadingListAnswerValue) => void
 
+  /** True to sort options alphabetically */
+  sortOptions?: boolean
+
   /** Localizer to use */
   T: LocalizeString
 
@@ -133,7 +136,7 @@ export class CascadingListAnswerComponent extends React.Component<Props, State>
 
   renderDropdown(index: number) {
     // Determine available options
-    const options: { label: string, value: string }[] = []
+    let options: { label: string, value: string }[] = []
 
     // Find all possible values, filtering by all previous selections
     const values = this.findValues(index, this.state.columnValues)
@@ -145,6 +148,11 @@ export class CascadingListAnswerComponent extends React.Component<Props, State>
       }
     }
 
+    // Sort options if set
+    if (this.props.sortOptions) {
+      options = _.sortBy(options, opt => opt.label)
+    }
+
     return <div style={{ paddingBottom: 15 }} key={index}>
       <label className="text-muted">{localizeString(this.props.columns[index].name, this.props.locale)}</label>
       <Select 

src/formDesign.d.ts

@@ -833,6 +833,9 @@ interface CascadingListQuestion extends QuestionBase {
   /** Columns in the table that are displayed also as dropdowns to choose the row */
   columns: CascadingListColumn[]
 
+  /** True to sort items alphabetically */
+  sortOptions?: boolean
+
   /** No validation available */
   validations: []
 }