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

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

@@ -1,32 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,182 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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')
-);
-