@progress/kendo-react-inputs 5.6.0-dev.202208251227 → 5.7.0-sig.202208281415

package/docs/examples/props-context/overview/func/grid-with-filtering.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+import { Grid, GridColumn, GridFilterChangeEvent } from '@progress/kendo-react-grid';
+import { filterBy, CompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { sampleProducts } from './sample-products';
+
+const initialFilter: CompositeFilterDescriptor  = {
+    logic: 'and',
+    filters: [
+        { field: 'ProductName', operator: 'contains', value: 'Chef' }
+    ]
+};
+
+export const GridWithFiltering = () => {
+    const [filter, setFilter] = React.useState(initialFilter);
+
+    return (
+      <Grid
+        style={{ height: '420px' }}
+        data={filterBy(sampleProducts, filter)}
+        filterable={true}
+        filter={filter}
+        onFilterChange={(e: GridFilterChangeEvent) => setFilter(e.filter)}
+        >
+        <GridColumn field="ProductID" title="ID" filterable={false} width="60px" />
+        <GridColumn field="ProductName" title="Product Name" width="240px" />
+        <GridColumn field="FirstOrderedOn" width="240px" filter="date" format="{0:d}" />
+        <GridColumn field="UnitPrice" width="180px" filter="numeric" format="{0:c}" />
+        <GridColumn field="Discontinued" width="190px" filter="boolean" />
+      </Grid>
+    );
+};

package/docs/examples/props-context/overview/func/main.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { GridWithFiltering } from './grid-with-filtering';
+import { NumericTextBoxProps, NumericTextBoxPropsContext } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    const numericTextBoxPropsCallback = React.useCallback((numericTextBoxProps: NumericTextBoxProps) => ({
+        ...numericTextBoxProps,
+        spinners: false
+    }), []);
+
+    return (
+      <NumericTextBoxPropsContext.Provider value={numericTextBoxPropsCallback}>
+        <GridWithFiltering />
+      </NumericTextBoxPropsContext.Provider>
+    );
+};
+
+ReactDOM.render(
+  <App />,
+  document.querySelector('my-app')
+);
+  

package/docs/examples/props-context/overview/func/sample-products.ts

@@ -0,0 +1,182 @@
+export const sampleProducts = [
+    {
+        "ProductID": 1,
+        "ProductName": "Chai",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "10 boxes x 20 bags",
+        "UnitPrice": 18,
+        "UnitsInStock": 39,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 20)
+    },
+    {
+        "ProductID": 2,
+        "ProductName": "Chang",
+        "SupplierID": 1,
+        "CategoryID": 1,
+        "QuantityPerUnit": "24 - 12 oz bottles",
+        "UnitPrice": 19,
+        "UnitsInStock": 17,
+        "UnitsOnOrder": 40,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 1,
+            "CategoryName": "Beverages",
+            "Description": "Soft drinks, coffees, teas, beers, and ales"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 12)
+    },
+    {
+        "ProductID": 3,
+        "ProductName": "Aniseed Syrup",
+        "SupplierID": 1,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 550 ml bottles",
+        "UnitPrice": 10,
+        "UnitsInStock": 13,
+        "UnitsOnOrder": 70,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 26)
+    },
+    {
+        "ProductID": 4,
+        "ProductName": "Chef Anton's Cajun Seasoning",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "48 - 6 oz jars",
+        "UnitPrice": 22,
+        "UnitsInStock": 53,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 5,
+        "ProductName": "Chef Anton's Gumbo Mix",
+        "SupplierID": 2,
+        "CategoryID": 2,
+        "QuantityPerUnit": "36 boxes",
+        "UnitPrice": 21.35,
+        "UnitsInStock": 0,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 17)
+    },
+    {
+        "ProductID": 6,
+        "ProductName": "Grandma's Boysenberry Spread",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 8 oz jars",
+        "UnitPrice": 25,
+        "UnitsInStock": 120,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 25,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 9, 19)
+    },
+    {
+        "ProductID": 7,
+        "ProductName": "Uncle Bob's Organic Dried Pears",
+        "SupplierID": 3,
+        "CategoryID": 7,
+        "QuantityPerUnit": "12 - 1 lb pkgs.",
+        "UnitPrice": 30,
+        "UnitsInStock": 15,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 10,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 7,
+            "CategoryName": "Produce",
+            "Description": "Dried fruit and bean curd"
+        },
+        "FirstOrderedOn": new Date(1996, 7, 22)
+    },
+    {
+        "ProductID": 8,
+        "ProductName": "Northwoods Cranberry Sauce",
+        "SupplierID": 3,
+        "CategoryID": 2,
+        "QuantityPerUnit": "12 - 12 oz jars",
+        "UnitPrice": 40,
+        "UnitsInStock": 6,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 2,
+            "CategoryName": "Condiments",
+            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
+        },
+        "FirstOrderedOn": new Date(1996, 11, 1)
+    },
+    {
+        "ProductID": 9,
+        "ProductName": "Mishi Kobe Niku",
+        "SupplierID": 4,
+        "CategoryID": 6,
+        "QuantityPerUnit": "18 - 500 g pkgs.",
+        "UnitPrice": 97,
+        "UnitsInStock": 29,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": true,
+        "Category": {
+            "CategoryID": 6,
+            "CategoryName": "Meat/Poultry",
+            "Description": "Prepared meats"
+        },
+        "FirstOrderedOn": new Date(1997, 1, 21)
+    },
+    {
+        "ProductID": 10,
+        "ProductName": "Ikura",
+        "SupplierID": 4,
+        "CategoryID": 8,
+        "QuantityPerUnit": "12 - 200 ml jars",
+        "UnitPrice": 31,
+        "UnitsInStock": 31,
+        "UnitsOnOrder": 0,
+        "ReorderLevel": 0,
+        "Discontinued": false,
+        "Category": {
+            "CategoryID": 8,
+            "CategoryName": "Seafood",
+            "Description": "Seaweed and fish"
+        },
+        "FirstOrderedOn": new Date(1996, 8, 5)
+    }
+];

package/docs/examples/radiobutton/appearance/func/main.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RadioButton } from '@progress/kendo-react-inputs';
+
+import { RadioButtonStyleConfigurator } from './radiobutton-style-configurator';
+
+const App = () => {
+    const [size, setSize] = React.useState<'small' | 'medium' | 'large'>('medium');
+
+    return (
+      <div>
+        <RadioButtonStyleConfigurator
+          size={size}
+          onSizeChange={setSize}
+        />
+        <RadioButton
+          size={size}
+          label="RadioButton appearance"
+        />
+      </div>
+    )
+}
+
+ReactDOM.render(
+  <App />,
+  document.querySelector('my-app')
+);

package/docs/examples/radiobutton/custom-labels/func/main.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RadioButton } from '@progress/kendo-react-inputs';
+
+
+const App = () => {
+    return(
+      <div>
+        <RadioButton id="rb1" name="group1" value="on" checked={true}>
+          <label htmlFor="rb1" className={'k-radio-label'} style={{ 'display': 'inline-block'}}>
+            Right-to-left support <strong style={{color: 'green'}}>on</strong>
+          </label>
+        </RadioButton>
+        <br />
+        <RadioButton id="rb2" name="group1" value="off">
+          <label htmlFor="rb2" className={'k-radio-label'} style={{ 'display': 'inline-block'}}>
+            Right-to-left support <strong style={{color: 'red'}}>off</strong>
+          </label>
+        </RadioButton>
+      </div>
+    )
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/radiobutton/disabled/func/main.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RadioButton } from '@progress/kendo-react-inputs';
+
+
+const App = () => {
+    return (
+      <div>
+        <RadioButton name="group1" disabled={true} checked={true} label='Disabled checked radio' />
+        <br />
+        <RadioButton name="group1" disabled={true} label='Disabled unchecked radio' />
+      </div>
+    )
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/radiobutton/labels/func/main.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RadioButton } from '@progress/kendo-react-inputs';
+
+
+const App = () => {
+    return(
+      <div>
+        <RadioButton label="RadioButton label" name="group1" value="default label" checked={true}/>
+        <br />
+        <RadioButton label="RadioButton label before" labelPlacement="before" name="group1" value="label before"/>
+      </div>
+    )
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/radiobutton/overview/class/main.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RadioButton, RadioButtonChangeEvent } from '@progress/kendo-react-inputs';
+
+interface AppState {
+  selectedValue: string
+}
+
+class App extends React.Component {
+  state: AppState = {
+    selectedValue: 'first'
+  };
+
+  render() {
+    return (
+      <div>
+        <RadioButton name="group1" value="first" checked={this.state.selectedValue === 'first'} label="First" onChange={this.handleChange} />
+        <br />
+        <RadioButton name="group1" value="second" checked={this.state.selectedValue === 'second'} label="Second" onChange={this.handleChange} />
+        <br />
+        <RadioButton name="group1" value="third" checked={this.state.selectedValue === 'third'} label="Third" onChange={this.handleChange} />
+      </div>
+    );
+  }
+
+  handleChange = (e: RadioButtonChangeEvent) => {
+    this.setState({ selectedValue: e.value });
+  }
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/radiobutton/overview/func/main.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RadioButton, RadioButtonChangeEvent } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    const [selectedValue, setSelectedValue] = React.useState('first');
+
+    const handleChange = React.useCallback(
+        (e: RadioButtonChangeEvent) => {
+            setSelectedValue(e.value);
+        },
+        [setSelectedValue]
+    );
+
+    return (
+      <div>
+        <RadioButton name="group1" value="first" checked={selectedValue === 'first'} label="First" onChange={handleChange} />
+        <br />
+        <RadioButton name="group1" value="second" checked={selectedValue === 'second'} label="Second" onChange={handleChange} />
+        <br />
+        <RadioButton name="group1" value="third" checked={selectedValue === 'third'} label="Third" onChange={handleChange} />
+      </div>
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/radiogroup/controlled/class/main.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RadioGroup, RadioGroupChangeEvent } from '@progress/kendo-react-inputs';
+
+interface AppState {
+  checked: string,
+  disabled: boolean
+}
+
+const data = [
+  { label: 'Female', value: 'female' },
+  { label: 'Male', value: 'male' },
+  { label: 'Other', value: 'other' }
+];
+
+class App extends React.Component {
+  state: AppState =  {
+    checked: data[0].value,
+    disabled: false
+  }
+
+  render() {
+    return (
+      <div className="row">
+        <div className="col-md-5">
+          <RadioGroup data={data} disabled={this.state.disabled} value={this.state.checked} onChange={this.handleChange}/>
+        </div>
+        <div className="col-md-4">
+          <span>Current checked value is <strong>{this.state.checked}</strong></span>
+          <button className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" onClick={this.handleClick}>Toggle disabled state</button>
+        </div>
+      </div>
+    )
+  }
+
+  handleClick = () => {
+    this.setState({ disabled: !this.state.disabled });
+  }
+
+  handleChange = (e: RadioGroupChangeEvent) => {
+    this.setState({ checked: e.value });
+  }
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/radiogroup/controlled/func/main.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RadioGroup } from '@progress/kendo-react-inputs';
+
+const data = [
+    { label: 'Female', value: 'female' },
+    { label: 'Male', value: 'male' },
+    { label: 'Other', value: 'other' }
+];
+
+const App = () => {
+    const [checked, setChecked] = React.useState(data[0].value);
+    const [disabled, setDisabled] = React.useState(false);
+
+    const handleClick = () => {
+        setDisabled(!disabled);
+    }
+
+    const handleChange = (e) => {
+        setChecked(e.value);
+    }
+
+    return (
+      <div className="row">
+        <div className="col-md-5">
+          <RadioGroup data={data} disabled={disabled} value={checked} onChange={handleChange}/>
+        </div>
+        <div className="col-md-4">
+          <span>Current checked value is <strong>{checked}</strong></span>
+          <button className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" onClick={handleClick}>Toggle disabled state</button>
+        </div>
+      </div>
+    )
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/radiogroup/default-state/func/main.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RadioGroup } from '@progress/kendo-react-inputs';
+
+const data = [
+    { label: 'Female', value: 'female' },
+    { label: 'Male', value: 'male' },
+    { label: 'Other', value: 'other' }
+];
+
+const App = () => {
+    return <RadioGroup defaultValue={data[2].value} data={data} />
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/radiogroup/forms/class/main.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Form, Field, FormElement, FieldWrapper } from '@progress/kendo-react-form';
+import { Label, Hint, Error } from '@progress/kendo-react-labels';
+import { Input, RadioGroup } from '@progress/kendo-react-inputs';
+import { Button } from '@progress/kendo-react-buttons';
+
+const confirmationData = [
+    { label: 'Phone Call', value: 'phone' },
+    { label: 'Via Email', value: 'email' }
+];
+
+const firstNameValidator = (value) => !value ?
+    "First Name is required" :
+    value.length < 7 ? "First Name should be at least 7 characters long." : "";
+
+const lastNameValidator = (value) => !value ?
+    "Last Name is required" :
+    value.length < 7 ? "Last Name should be at least 7 characters long." : "";
+
+const radioGroupValidator = (value) => !value ?
+    "Type of Confirmation is required" : "";
+
+class FormInput extends React.Component {
+  render() {
+    const showValidationMessage: boolean = this.props.touched && this.props.validationMessage;
+    const showHint: boolean = !showValidationMessage && this.props.hint;
+    const hindId: string = showHint ? `${this.props.id}_hint` : '';
+    const errorId: string = showValidationMessage ? `${this.props.id}_error` : '';
+
+    return (
+      <FieldWrapper>
+        <Label editorId={this.props.id} editorValid={this.props.valid} editorDisabled={this.props.disabled} optional={this.props.optional}>
+          {this.props.label}
+        </Label>
+        <div className={'k-form-field-wrap'}>
+          <Input
+            valid={this.props.valid}
+            type={this.props.type}
+            id={this.props.id}
+            disabled={this.props.disabled}
+            ariaDescribedBy={`${hindId} ${errorId}`}
+            {...this.props}
+          />
+          {
+              showHint &&
+              <Hint id={hindId}>{this.props.hint}</Hint>
+          }
+          {
+              showValidationMessage &&
+              <Error id={errorId}>{this.props.validationMessage}</Error>
+          }
+        </div>
+      </FieldWrapper>
+    );
+  }
+};
+
+class FormRadioGroup extends React.Component {
+  render() {
+    const showValidationMessage: boolean = this.props.touched && this.props.validationMessage;
+    const showHint: boolean = !showValidationMessage && this.props.hint
+    const hindId: string = showHint ? `${this.props.id}_hint` : '';
+    const errorId: string = showValidationMessage ? `${this.props.id}_error` : '';
+    const labelId: string = this.props.label ? `${this.props.id}_label` : '';
+
+    return (
+      <FieldWrapper>
+        <Label id={labelId} editorId={this.props.id} editorValid={this.props.valid} editorDisabled={this.props.disabled}>{this.props.label}</Label>
+        <RadioGroup
+          id={this.props.id}
+          ariaDescribedBy={`${hindId} ${errorId}`}
+          ariaLabelledBy={labelId}
+          valid={this.props.valid}
+          disabled={this.props.disabled}
+          layout={this.props.layout}
+          {...this.props}
+        />
+        {
+            showHint &&
+            <Hint id={hindId}>{this.props.hint}</Hint>
+        }
+        {
+            showValidationMessage &&
+            <Error id={errorId}>{this.props.validationMessage}</Error>
+        }
+      </FieldWrapper>
+    );
+  }
+};
+
+class App extends React.Component {
+  render() {
+    return (
+      <Form
+        onSubmit={this.handleSubmit}
+        render={(formRenderProps) => (
+          <FormElement style={{ width: 400 }}>
+            <fieldset className={'k-form-fieldset'}>
+              <legend className={'k-form-legend'}>User Details</legend>
+              <Field
+                id={'firstName'}
+                name={'firstName'}
+                label={'First Name'}
+                component={FormInput}
+                validator={firstNameValidator}
+                          />
+              <Field
+                id={'lastName'}
+                name={'lastName'}
+                label={'Last Name'}
+                component={FormInput}
+                validator={lastNameValidator}
+                          />
+              <Field
+                id={'confirmationType'}
+                name={'confirmationType'}
+                label={'Type of Confirmation'}
+                hint={'Hint: Choose a way to receive a confirmation'}
+                component={FormRadioGroup}
+                data={confirmationData}
+                layout={'horizontal'}
+                validator={radioGroupValidator}
+                          />
+              <div className="k-form-buttons">
+                <Button
+                  themeColor={'primary'}
+                  type={'submit'}
+                  disabled={!formRenderProps.allowSubmit}
+                              >
+                  Submit
+                </Button>
+                <Button onClick={formRenderProps.onFormReset}>
+                  Clear
+                </Button>
+              </div>
+            </fieldset>
+          </FormElement>
+              )}
+          />
+      );
+    }
+    handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);
+