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

package/docs/examples/numerictextbox/forms/override/func/main.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { NumericTextBox, Input } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    const [firstName, setFirstName] = React.useState<string>('');
+    const [lastName, setLastName] = React.useState<string>('');
+    const [age, setAge] = React.useState<number>(0);
+    const [success, setSuccess] = React.useState<boolean>(false);
+
+    const ageValidationMessage: string = "You must be over 18 years old!";
+
+    const handleChange = (event) => {
+      if (event.target.name === 'firstName') {
+        setFirstName(event.target.value);
+      } else if (event.target.name === 'lastName') {
+        setLastName(event.target.value);
+      } else if (event.target.name === 'age') {
+        setAge(event.target.value);
+      }
+    }
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        setSuccess(true);
+        setTimeout(() => { setSuccess(false); }, 3000);
+    }
+
+    return (
+      <div className="row example-wrapper">
+        <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
+          <form className="k-form" onSubmit={handleSubmit}>
+            <fieldset>
+              <legend>Please fill in the fields:</legend>
+              <div className="mb-3">
+                <Input
+                  value={firstName}
+                  onChange={handleChange}
+                  name="firstName"
+                  style={{ width: "100%" }}
+                  label="First Name"
+                  pattern="[A-Za-z]{1,32}"
+                    />
+              </div>
+              <div className="mb-3">
+                <Input
+                  value={lastName}
+                  onChange={handleChange}
+                  name="lastName"
+                  style={{ width: '100%' }}
+                  label="Last Name"
+                    />
+              </div>
+              <div>
+                <NumericTextBox
+                  value={age}
+                  onChange={handleChange}
+                  name="age"
+                  width="100%"
+                  label="Age"
+                  required={true}
+                  valid={age >= 18}
+                  validationMessage={age !== null
+                        ? ageValidationMessage
+                        : 'Please enter your age!'}
+                     />
+              </div>
+            </fieldset>
+            <input type="submit" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" value="Search" />
+          </form>
+        </div>
+        {success && (
+        <div
+          className="alert alert-success"
+          style={{ position: 'absolute' }}
+        >
+          Form submitted!
+        </div>)}
+      </div>
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/numerictextbox/forms/ref/class/main.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import { NumericTextBox } from "@progress/kendo-react-inputs";
+
+interface AppState {
+  ref: any
+}
+
+class App extends React.Component {
+  state: AppState = {
+    ref: React.createRef()
+  }
+
+  componentDidMount() {
+    this.state.ref.element.focus();
+  }
+
+  handleFocus = () => {
+    this.state.ref.current.focus();
+  }
+
+  render() {
+    return (
+      <div>
+        <NumericTextBox
+          ref={(ref) => this.setState({ ref })}
+          placeholder="please enter value"
+          defaultValue={10}
+            />
+        <button
+          onClick={this.handleFocus}
+            >
+          Click to focus
+        </button>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/numerictextbox/forms/ref/func/main.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import { NumericTextBox } from "@progress/kendo-react-inputs";
+
+const App = () => {
+    const ref = React.createRef<any>();
+
+    const handleFocus = (event) => {
+        if (event && ref && ref.current) {
+            ref.current.focus();
+        }
+    }
+
+    return (
+      <div>
+        <NumericTextBox
+          ref={ref}
+          placeholder="please enter value"
+          defaultValue={10}
+        />
+        <button
+          onClick={handleFocus}
+        >
+          Click to focus
+        </button>
+      </div>
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/numerictextbox/keyboard/func/main.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { NumericTextBox } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <div>
+        <NumericTextBox
+          width={200}
+          defaultValue={5}
+        />
+      </div>
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

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

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { NumericTextBox, NumericTextBoxChangeEvent } from '@progress/kendo-react-inputs';
+
+interface AppState {
+  value: number | null
+}
+
+class App extends React.Component {
+  state: AppState = {
+    value: null
+  }
+
+  render() {
+    return (
+      <div>
+        <label>
+          <NumericTextBox
+            width={200}
+            placeholder="please enter value"
+            value={this.state.value}
+            onChange={this.ChangeKilometers}
+                /> Kilometers
+        </label>
+        <br />
+        <label>
+          <NumericTextBox
+            width={200}
+            placeholder="please enter value"
+            value={this.state.value !== null ? this.state.value / 1.609344 : null}
+            onChange={this.ChangeMiles}
+                /> Miles
+        </label>
+      </div>
+    );
+  }
+
+  ChangeKilometers = (e: NumericTextBoxChangeEvent) => {
+    this.setState({
+      value: e.value
+    });
+  }
+
+  ChangeMiles = (e: NumericTextBoxChangeEvent) => {
+    this.setState({
+      value: e.value !== null ? e.value * 1.609344 : null
+    });
+  }
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

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

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { NumericTextBox, NumericTextBoxChangeEvent } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    const [value, setValue] = React.useState<number | null>(null);
+
+    const ChangeKilometers = (e: NumericTextBoxChangeEvent) => {
+        setValue(e.value);
+    }
+
+    const ChangeMiles = (e: NumericTextBoxChangeEvent) => {
+      setValue(e.value !== null ? e.value * 1.609344 : null);
+    }
+
+    return (
+      <div>
+        <label>
+          <NumericTextBox
+            width={200}
+            placeholder="please enter value"
+            value={value}
+            onChange={ChangeKilometers}
+          /> Kilometers
+        </label>
+        <br />
+        <label>
+          <NumericTextBox
+            width={200}
+            placeholder="please enter value"
+            value={value == null ? null : value / 1.609344}
+            onChange={ChangeMiles}
+          /> Miles
+        </label>
+      </div>
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/numerictextbox/spin/func/main.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { NumericTextBox } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <div>
+        <NumericTextBox
+          width={200}
+          defaultValue={5}
+          spinners={false}
+          step={2}
+            />
+      </div>
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/numerictextbox/step/func/main.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { NumericTextBox } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <div>
+        <NumericTextBox
+          width={200}
+          defaultValue={5}
+          step={3}
+            />
+      </div>
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

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

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import {
+    Input,
+    TextArea,
+    MaskedTextBox,
+    NumericTextBox,
+    Slider,
+    RangeSlider,
+    Rating,
+    ColorGradient,
+    ColorPalette,
+    ColorPicker,
+    Switch,
+    Checkbox,
+    RadioButton,
+    RadioGroup
+} from '@progress/kendo-react-inputs'
+
+const App = () => {
+    const data =  React.useMemo(
+      () => [
+        { label: 'Option 1', value: 'one' },
+        { label: 'Option 2', value: 'two' },
+        { label: 'Option 3', value: 'three' }
+      ],
+      []
+    );
+
+    return (
+      <div className="row example-wrapper" style={{ minHeight: 450 }}>
+        <div className="col-12 col-md-6 example-col">
+          <p>Input</p>
+          <Input label="First name" />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>TextArea</p>
+          <TextArea placeholder="Type the text here..." rows={3} />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>MaskedTextBox</p>
+          <MaskedTextBox
+            mask="9-000"
+            defaultValue="_-___"
+          />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>NumericTextBox</p>
+          <NumericTextBox
+            defaultValue={123.45}
+            format="c2"
+          />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>Slider</p>
+          <Slider min={1} max={10} step={1} defaultValue={4} />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>RangeSlider</p>
+          <RangeSlider min={1} max={100} step={1} defaultValue={{ start: 30, end: 70 }} />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>ColorPicker</p>
+          <ColorPicker />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>Switch</p>
+          <Switch />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>ColorGradient</p>
+          <ColorGradient />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>ColorPalette</p>
+          <ColorPalette palette='office' tileSize={30} />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>Checkbox</p>
+          <Checkbox label="Checkbox Option 1" defaultChecked={true} />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>RadioButton</p>
+          <RadioButton label="Radio Option 1" name="group1" value="option 1" defaultChecked={true} />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>RadioGroup</p>
+          <RadioGroup defaultValue={data[2].value} data={data} />
+        </div>
+        <div className="col-12 col-md-6 example-col">
+          <p>Rating</p>
+          <Rating defaultValue={2.5} precision={'half'} />
+        </div>
+      </div>
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/props-context/overview/class/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/class/main.tsx

@@ -0,0 +1,26 @@
+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';
+
+class App extends React.Component {
+    numericTextBoxPropsCallback = (numericTextBoxProps: NumericTextBoxProps) => ({
+        ...numericTextBoxProps,
+        spinners: false
+    });
+
+    render() {
+        return (
+          <NumericTextBoxPropsContext.Provider value={this.numericTextBoxPropsCallback}>
+            <GridWithFiltering />
+          </NumericTextBoxPropsContext.Provider>
+        );
+    }
+}
+
+ReactDOM.render(
+  <App />,
+  document.querySelector('my-app')
+);
+  

package/docs/examples/props-context/overview/class/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)
+    }
+];