Skip to content

Commit

Permalink
doc typos
Browse files Browse the repository at this point in the history
  • Loading branch information
theporchrat committed Oct 8, 2014
1 parent edf4a2f commit 1c33502
Show file tree
Hide file tree
Showing 8 changed files with 91 additions and 65 deletions.
21 changes: 10 additions & 11 deletions docs/components/pages/Calendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ var Calendar = React.createClass({
<MenuItem href={'#' + prefix + 'duration'}>duration</MenuItem>
<MenuItem href={'#' + prefix + 'isRtl'}>isRtl</MenuItem>
<MenuItem href={'#' + prefix + 'messages'}>messages</MenuItem>
<MenuItem divider={true}></MenuItem>
<MenuItem href={'#' + prefix + 'keyboard'}>Keyboard Navigation</MenuItem>
</DDButton>
</span>
</h1>
Expand Down Expand Up @@ -61,27 +63,25 @@ var Calendar = React.createClass({
<h3 className='prop-header' id={ prefix +"value" }>
value <small>Date</small></h3>
<p>
The current selected date, should be a JavaScript Date instance.
The current selected date, should be a Date object or null.
</p>

<h3 className='prop-header' id={ prefix +"onChange" }>
onChange <small>{'function ( selectedValue )'}</small></h3>
<p>
change event Handler that is called when the value is changed.
change event Handler that is called when the value is changed. The handler is called with the Date object
</p>
<strong>Note:</strong><span> Just like input tags, if you do not specify an <code>onChange</code> handler the widget
becomes readonly</span>

<h3 className='prop-header' id={ prefix +"min" }>
min <small>Date</small></h3>
<p>
The minimum Date that the Calendar can navigate into the past
The minimum date that the Calendar can navigate from.
</p>

<h3 className='prop-header' id={ prefix +"max" }>
max <small>Date</small></h3>
<p>
The maximum date that the Calendar can navigate into the future
The maximum date that the Calendar can navigate to.
</p>

<h3 className='prop-header' id={ prefix +"initialView" }>
Expand All @@ -94,20 +94,19 @@ var Calendar = React.createClass({
</p>

<h3 className='prop-header' id={ prefix +"finalView" }>

finalView <small>One of - "month", "year", "decade", "century"</small>
<span className='default'>"century"</span>
</h3>
<p>
The highest level view the calendar can navigate up to; Should be higher then <code>initialView</code>
The highest level view the calendar can navigate up to. This value should be higher
than <code>initialView</code>
</p>


<h3 className='prop-header' id={ prefix +"isRtl" }>
isRtl <small>Boolean</small></h3>
<p>
mark whether the widget should render right-to-left. This property can also be implicitly passed to the widget through
a <code>childContext</code> prop (<code>isRtl</code>) this allows higher level application components to specify the direction.
a <code>childContext</code> prop (<code>isRtl</code>) this allows higher level application components to specify the direction.
</p>

<h3 className='prop-header' id={ prefix +"messages" }>
Expand All @@ -125,7 +124,7 @@ var Calendar = React.createClass({
title and screen reader text for the right arrow button
</p>

<h2>Keyboard Navigation</h2>
<h2 id={ prefix +"keyboard" }>Keyboard Navigation</h2>

<ul className='list-unstyled keyboard-list'>
<li><kbd>ctrl + down arrow</kbd> navigate to next view </li>
Expand Down
28 changes: 17 additions & 11 deletions docs/components/pages/ComboBox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ var ComboBox = React.createClass({
<MenuItem href={'#' + prefix + 'duration'}>duration</MenuItem>
<MenuItem href={'#' + prefix + 'isRtl'}>isRtl</MenuItem>
<MenuItem href={'#' + prefix + 'messages'}>messages</MenuItem>
<MenuItem divider={true}></MenuItem>
<MenuItem href={'#' + prefix + 'keyboard'}>Keyboard Navigation</MenuItem>
</DDButton>
</span>
</h1>
Expand Down Expand Up @@ -66,35 +68,39 @@ var ComboBox = React.createClass({
<h3 className='prop-header' id={ prefix +"value" }>
value <small>mixed</small></h3>
<p>
The current value of the DropdownList.
The current value of the Combobox. This can be an object (such as a member of the <code>data</code> array)
or a primitive value, hinted to by the <code>valueField</code>. The widget value does not need to be in
the <code>data</code>, widgets can have values that are not in their list.
</p>

<h3 className='prop-header' id={ prefix +"onChange" }>
onChange <small>{"function ( selectedValue )"}</small></h3>
onChange <small>{"function ( value )"}</small></h3>
<p>
change event Handler that is called when the value is changed.
change event Handler that is called when the value is changed. If the value is on of
the <code>data</code> members that item will be returned. In the case of a value not being found in
the <code>data</code> array the string value of the combobox will be returned.
</p>
<strong>Note:</strong><span> Just like input tags, if you do not specify an <code>onChange</code> handler the widget
becomes readonly</span>

<h3 className='prop-header' id={ prefix +"data" }>
data <small>Array - mixed</small></h3>
<p>
provide an array of possible values for the dropdown list. If an array of <code>objects</code> is provided you should use
the <code>valueField</code> and <code>textField</code> props, to specify an array item unique id and label respectively
provide an array of possible values for the combobox. If an array of <code>objects</code> is provided you
should use the <code>valueField</code> and <code>textField</code> props, to specify which object
properties comprise the value field (such as an id) and the field used to label the item.
</p>

<h3 className='prop-header' id={ prefix +"valueField" }>
valueField <small>String</small></h3>
<p>
The field name of a uniquely identifying field in the <code>data</code> array
A property name of a uniquely identifying field in the <code>data</code> array. If no valueField is provided,
the widget will use strict equality checks to locate the data item, if it exists.
</p>

<h3 className='prop-header' id={ prefix +"textField" }>
textField <small>String</small></h3>
<p>
This prop determines which data item field to display in the dropdown list and selected item This prop is
unnecessary when a <code>itemComponent</code> is provided
This prop determines which data item field to display in the dropdown list and the text value of combobox.
This prop is unnecessary when an <code>itemComponent</code> is provided.
</p>

<h3 className='prop-header' id={ prefix +"itemComponent" }>
Expand Down Expand Up @@ -158,7 +164,7 @@ var ComboBox = React.createClass({
<p>
text to display when the the current filter does not return any results
</p>
<h2>Keyboard Navigation</h2>
<h2 id={ prefix +"keyboard" }>Keyboard Navigation</h2>

<ul className='list-unstyled keyboard-list'>
<li><kbd>alt + down arrow</kbd> open dropdown</li>
Expand Down
29 changes: 16 additions & 13 deletions docs/components/pages/DateTimePicker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ var DateTimePicker = React.createClass({
<MenuItem href={'#' + prefix + 'duration'}>duration</MenuItem>
<MenuItem href={'#' + prefix + 'isRtl'}>isRtl</MenuItem>
<MenuItem href={'#' + prefix + 'messages'}>messages</MenuItem>
<MenuItem divider={true}></MenuItem>
<MenuItem href={'#' + prefix + 'keyboard'}>Keyboard Navigation</MenuItem>
</DDButton>
</span>
</h1>
Expand All @@ -52,7 +54,8 @@ var DateTimePicker = React.createClass({

<p>
Dates are never mutated but always return and operate on a new Date instance. When the <code>calendar</code> prop
is {'set'} the widget takes all props vailable to the Calendar widget (see above), the same is true for the keyboard navigation!
is {'set'} the widget takes all props vailable to the Calendar widget (see above),
the same is true for the keyboard navigation!
</p>
<DatePickerExample/>
<Example code={
Expand Down Expand Up @@ -82,30 +85,27 @@ var DateTimePicker = React.createClass({
<h3 className='prop-header' id={ prefix +"value" }>
value <small>Date</small></h3>
<p>
The current selected date, should be a JavaScript Date instance.
The current selected date, should be a <code>Date</code> instance or <code>null</code>.
</p>

<h3 className='prop-header' id={ prefix +"onChange" }>
onChange <small>{'function ( selectedValue )'}</small></h3>
onChange <small>{'function ( date, stringDate )'}</small></h3>
<p>
change event Handler that is called when the value is changed.
change event Handler that is called when the value is changed. The handler is called with both the
current <code>Date</code> object (or null if it was not parseable), and the second argument is
a <code>string</code> representation of the date value, formated by the <code>format</code> prop.
</p>
<strong>Note: </strong>
<span>
Just like input tags, if you do not specify an <code>onChange</code> handler the widget
becomes readonly
</span>

<h3 className='prop-header' id={ prefix +"calendar" }>
calendar <small>Boolean</small><span className='default'>true</span></h3>
<p>
Whether to show the date picker button
Whether to show the date picker button.
</p>

<h3 className='prop-header' id={ prefix +"time" }>
time <small>Boolean</small><span className='default'>true</span></h3>
<p>
Whether to show the time picker button
Whether to show the time picker button.
</p>

<h3 className='prop-header' id={ prefix +"min" }>
Expand All @@ -127,7 +127,10 @@ var DateTimePicker = React.createClass({
<h3 className='prop-header' id={ prefix +"format" }>
format <small>String</small><span className='default'>"M/d/yyyy h:mm tt"</span></h3>
<p>
A string format used to display the date value
A string format used to display the date value. For more information on prefined and custom formats
visit the <a href='https://github.com/jquery/globalize/tree/79ae658b842f75f58199d6e9074e01f7ce207468#dates'>
Globalize.js documentation <i className="fa fa-external-link"></i>
</a>
</p>

<h3 className='prop-header' id={ prefix +"parse" }>
Expand Down Expand Up @@ -176,7 +179,7 @@ var DateTimePicker = React.createClass({
title and screen reader text for the right arrow button
</p>

<h2>Keyboard Navigation</h2>
<h2 id={ prefix +"keyboard" }>Keyboard Navigation</h2>

<ul className='list-unstyled keyboard-list'>
<li><strong>All Calendar keys above also apply</strong></li>
Expand Down
24 changes: 13 additions & 11 deletions docs/components/pages/DropdownList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ var DropdownList = React.createClass({
<MenuItem href={'#' + prefix + 'duration'}>duration</MenuItem>
<MenuItem href={'#' + prefix + 'isRtl'}>isRtl</MenuItem>
<MenuItem href={'#' + prefix + 'messages'}>messages</MenuItem>
<MenuItem divider={true}></MenuItem>
<MenuItem href={'#' + prefix + 'keyboard'}>Keyboard Navigation</MenuItem>
</DDButton>
</span>
</h1>
Expand Down Expand Up @@ -67,33 +69,35 @@ var DropdownList = React.createClass({
value <small>mixed</small>
</h3>
<p>
The current value of the DropdownList.
the current value of the DropdownList. This can be an object (such as a member of the <code>data</code> array)
or a primitive value, hinted to by the <code>valueField</code>. The widget value does not need to be in
the <code>data</code> array; widgets can have values that are not in their list.
</p>

<h3 className='prop-header' id={ prefix +"onChange" }>
onChange <small>{"function ( selectedValue )"}</small></h3>
<p>
change event Handler that is called when the value is changed.
Change event Handler that is called when the value is changed.
</p>
<strong>Note:</strong><span> Just like input tags, if you do not specify an <code>onChange</code> handler the widget
becomes readonly</span>

<h3 className='prop-header' id={ prefix +"data" }>
data <small>Array - mixed</small></h3>
<p>
provide an array of possible values for the dropdown list. If an array of <code>objects</code> is provided you should use
the <code>valueField</code> and <code>textField</code> props, to specify an array item unique id and label respectively
provide an array of possible values for the DropdownList. If an array of <code>objects</code> is provided you
should use the <code>valueField</code> and <code>textField</code> props, to specify which object
properties comprise the value field (such as an id) and the field used to label the item.
</p>
<h3 className='prop-header' id={ prefix +"valueField" }>
valueField <small>String</small></h3>
<p>
The field name of a uniquely identifying field in the <code>data</code> array
A property name of a uniquely identifying field in the <code>data</code> array. If no valueField is provided,
the widget will use strict equality checks to locate the data item, if it exists.
</p>
<h3 className='prop-header' id={ prefix +"textField" }>
textField <small>String</small></h3>
<p>
This prop determines which data item field to display in the combobox and selected item. This prop is
unnecessary when a <code>itemComponent</code> is provided
unnecessary when an <code>itemComponent</code> and <code>valueComponent</code> are provided.
</p>

<h3 className='prop-header' id={ prefix +"valueComponent" }>
Expand Down Expand Up @@ -137,9 +141,7 @@ var DropdownList = React.createClass({
Dropdown button text for screen readers
</p>

<h2>
<a href={ prefix +"keyboard" }><i className="fa fa-link"></i></a>
Keyboard Navigation</h2>
<h2 id={ prefix +"keyboard" }>Keyboard Navigation</h2>

<ul className='list-unstyled keyboard-list'>
<li><kbd>alt + down arrow</kbd> open dropdown</li>
Expand Down
7 changes: 7 additions & 0 deletions docs/components/pages/GettingStarted.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,13 @@ var GettingStarted = React.createClass({
<code>value</code> and <code>onChange()</code>. For the dropdown list, combobox, select widgets there
is an additional <code>data</code> prop that is an array of possible values.
</p>
<p>
React-widgets can be "bound", meaning that they can be backed by some sort of data structure
(traditionally a model). While they work just as well with data primitives such as strings, numbers, and
arrays, they really shine in providing hassle free visual representations of data, without needing to map
the data over and over.
</p>

<h2>Install</h2>
<p>
The prefered way is to use NPM <code>npm install react-widgets</code> and make use of something like Webpack or
Expand Down
24 changes: 14 additions & 10 deletions docs/components/pages/NumberPicker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ var NumberPicker = React.createClass({

<MenuItem href={'#' + prefix + 'isRtl'}>isRtl</MenuItem>
<MenuItem href={'#' + prefix + 'messages'}>messages</MenuItem>
<MenuItem divider={true}></MenuItem>
<MenuItem href={'#' + prefix + 'keyboard'}>Keyboard Navigation</MenuItem>
</DDButton>
</span>

Expand All @@ -54,44 +56,46 @@ var NumberPicker = React.createClass({
}/>
<h2>Props</h2>
<h3 className='prop-header' id={ prefix +"value" }>
value <small>mixed</small></h3>
value <small>Number</small></h3>
<p>
The current value of the NumberPicker.
</p>

<h3 className='prop-header' id={ prefix +"onChange" }>
onChange <small>{"function ( selectedValue )"}</small></h3>
<p>
change event Handler that is called when the value is changed.
change event Handler that is called when the value is changed. The handler is called with the
current numeric value or null.
</p>
<strong>Note:</strong><span> Just like input tags, if you do not specify an <code>onChange</code> handler the widget
becomes readonly</span>

<h3 className='prop-header' id={ prefix +"format" }>
format <small>String</small><span className='default'>"d"</span></h3>
<p>
A Globalize.js compatible number format string, used to display the value when widget is not focused
A format string used to display the number value. For more information on prefined and custom number and
currency formats visit the&nbsp;
<a href='https://github.com/jquery/globalize/tree/79ae658b842f75f58199d6e9074e01f7ce207468#number-formatting'>
Globalize.js documentation <i className="fa fa-external-link"></i>
</a>.
</p>

<h3 className='prop-header' id={ prefix +"min" }>
min <small>Number</small><span className='default'>-Infinity</span></h3>
<p>
The minimum number that the NumberPicker value
The minimum number that the NumberPicker value.
</p>

<h3 className='prop-header' id={ prefix +"max" }>
max <small>Number</small><span className='default'>Infinity</span></h3>
<p>
The maximum number that the NumberPicker value
The maximum number that the NumberPicker value.
</p>

<h3 className='prop-header' id={ prefix +"step" }>
step <small>Number</small><span className='default'>1</span></h3>
<p>
Amount to increase or decrease value when using the spinner buttons
Amount to increase or decrease value when using the spinner buttons.
</p>


<h3 className='prop-header' id={ prefix +"isRtl" }>
isRtl <small>Boolean</small></h3>
<p>
Expand All @@ -112,7 +116,7 @@ var NumberPicker = React.createClass({
<h3>messages.decrement <small>String</small><span className='default'>"decrement value"</span></h3>
<p>Number picker spinner down button text for screen readers </p>

<h2>Keyboard Navigation</h2>
<h2 id={ prefix +"keyboard" }>Keyboard Navigation</h2>

<ul className='list-unstyled keyboard-list'>
<li><kbd>down arrow</kbd> decrement value</li>
Expand Down
Loading

0 comments on commit 1c33502

Please sign in to comment.