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

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

@@ -0,0 +1,146 @@
+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" : "";
+
+const FormInput = (fieldRenderProps) => {
+    const { validationMessage, touched, label, id, valid, disabled, hint, type, optional, ...others } = fieldRenderProps;
+
+    const showValidationMessage = touched && validationMessage;
+    const showHint = !showValidationMessage && hint;
+    const hindId = showHint ? `${id}_hint` : '';
+    const errorId = showValidationMessage ? `${id}_error` : '';
+
+    return (
+      <FieldWrapper>
+        <Label editorId={id} editorValid={valid} editorDisabled={disabled} optional={optional}>{label}</Label>
+        <div className={'k-form-field-wrap'}>
+          <Input
+            valid={valid}
+            type={type}
+            id={id}
+            disabled={disabled}
+            ariaDescribedBy={`${hindId} ${errorId}`}
+            {...others}
+                />
+          {
+                    showHint &&
+                    <Hint id={hindId}>{hint}</Hint>
+                }
+          {
+                    showValidationMessage &&
+                    <Error id={errorId}>{validationMessage}</Error>
+                }
+        </div>
+      </FieldWrapper>
+    );
+};
+
+const FormRadioGroup = (fieldRenderProps) => {
+    const { validationMessage, touched, id, label, layout, valid, disabled, hint, ...others } = fieldRenderProps;
+
+    const showValidationMessage = touched && validationMessage;
+    const showHint = !showValidationMessage && hint
+    const hindId = showHint ? `${id}_hint` : '';
+    const errorId = showValidationMessage ? `${id}_error` : '';
+    const labelId = label ? `${id}_label` : '';
+
+    return (
+      <FieldWrapper>
+        <Label id={labelId} editorId={id} editorValid={valid} editorDisabled={disabled}>{label}</Label>
+        <RadioGroup
+          id={id}
+          ariaDescribedBy={`${hindId} ${errorId}`}
+          ariaLabelledBy={labelId}
+          valid={valid}
+          disabled={disabled}
+          layout={layout}
+          {...others}
+            />
+        {
+                showHint &&
+                <Hint id={hindId}>{hint}</Hint>
+            }
+        {
+                showValidationMessage &&
+                <Error id={errorId}>{validationMessage}</Error>
+            }
+      </FieldWrapper>
+    );
+};
+
+const App = () => {
+    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
+    return (
+      <Form
+        onSubmit={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>
+            )}
+        />
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);
+

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

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { RadioGroup } from '@progress/kendo-react-inputs';
+
+interface AppState {
+  radioGroupRef: any
+}
+
+const data = [
+  { label: 'Female', value: 'female' },
+  { label: 'Male', value: 'male' },
+  { label: 'Other', value: 'other' }
+];
+
+class App extends React.Component {
+  state: AppState = {
+    radioGroupRef: React.createRef()
+  }
+
+  componentDidMount() {
+    this.state.radioGroupRef.element.focus();
+  }
+
+  render() {
+    return (
+      <div>
+        <RadioGroup data={data} ref={(radiogroup) => this.setState({ radiogroup })}/>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

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

@@ -0,0 +1,31 @@
+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 radioGroupRef = React.useRef<any>(null);
+    
+    React.useEffect(() => {
+      if(radioGroupRef && radioGroupRef.current) {
+        radioGroupRef.current.focus();
+      }
+    });
+
+    return (
+      <div>
+        <RadioGroup data={data} ref={radioGroupRef} />
+      </div>
+    )
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

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

@@ -0,0 +1,49 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import { RadioGroup } from "@progress/kendo-react-inputs";
+import { DropDownList, DropDownListChangeEvent } from "@progress/kendo-react-dropdowns";
+
+interface AppState {
+  layout?: "vertical" | "horizontal"
+}
+
+const tasks = [
+  { label: "To Do", value: "to do", className: "task red" },
+  { label: "In Progress", value: "in progress", className: "task orange" },
+  { label: "Ready for Test", value: "ready for test", className: "task blue" },
+  { label: "Done", value: "done", className: "task green" }
+];
+
+class App extends React.Component {
+  state: AppState = {
+    layout: "vertical"
+  };
+
+  render() {
+    return (
+      <div>
+        <p>Change the layout:</p>
+        <DropDownList
+          data={["horizontal", "vertical"]}
+          value={this.state.layout}
+          onChange={this.handleChange}
+        />
+        <hr />
+        <RadioGroup data={tasks} layout={this.state.layout} />
+        <style>
+          {`.k-radio k-radio-md.task { background: white; border-color: grey; box-shadow: none; }
+              .k-radio k-radio-md.red { color: red; }
+              .k-radio k-radio-md.orange { color: orange; }
+              .k-radio k-radio-md.blue { color: blue; }
+              .k-radio k-radio-md.green { color: green; }`}
+        </style>
+      </div>
+    );
+  }
+  handleChange = (e: DropDownListChangeEvent) => {
+    this.setState({ layout: e.value });
+  };
+}
+
+ReactDOM.render(<App />, document.querySelector("my-app"));

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RadioGroup } from '@progress/kendo-react-inputs';
+import { DropDownList } from '@progress/kendo-react-dropdowns';
+
+const tasks = [
+    { label: 'To Do', value: 'to do', className: 'task red' },
+    { label: 'In Progress', value: 'in progress', className: 'task orange' },
+    { label: 'Ready for Test', value: 'ready for test', className: 'task blue' },
+    { label: 'Done', value: 'done', className: 'task green' }
+];
+
+const App = () => {
+    const [layout, setLayout] = React.useState<any>('vertical');
+    const handleChange = (e) => {
+        setLayout(e.value);
+    }
+
+    return (
+      <div>
+        <p>Change the layout:</p>
+        <DropDownList
+          data={['horizontal', 'vertical']}
+          value={layout}
+          onChange={handleChange}
+            />
+        <hr />
+        <RadioGroup data={tasks} layout={layout} />
+        <style>
+          {`.k-radio k-radio-md.task { background: white; border-color: grey; box-shadow: none; }
+                .k-radio k-radio-md.red { color: red; }
+                .k-radio k-radio-md.orange { color: orange; }
+                .k-radio k-radio-md.blue { color: blue; }
+                .k-radio k-radio-md.green { color: green; }`}
+        </style>
+      </div>
+    )
+}
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

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

@@ -0,0 +1,18 @@
+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 data={data} />
+}
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RangeSlider, SliderLabel } from '@progress/kendo-react-inputs';
+
+interface AppState {
+  start: number,
+  end: number
+}
+
+class App extends React.Component {
+  state: AppState = {
+    start: 10,
+    end: 100
+  };
+
+  render() {
+    return (
+      <RangeSlider
+        defaultValue={{start: 30, end: 70}}
+        step={1}
+        min={0}
+        max={100}
+        >
+        {[0, 25, 50, 75, 100].map((perc, i) => (
+          <SliderLabel
+            key={i}
+            position={perc}
+            onClick={this.onClick}
+                >
+            {perc.toString()}
+          </SliderLabel>
+            ))}
+      </RangeSlider>
+    );
+  }
+
+  onClick(event: any) {
+    if(event.value) {
+      this.setState({ start: event.value.start, end: event.value.end });
+    }
+  }
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RangeSlider, SliderLabel } from '@progress/kendo-react-inputs';
+
+const App = () => {
+  const [start, setStart] = React.useState<number>(10);
+  const [end, setEnd] =  React.useState<number>(100);
+
+  const handleClick = (event: any) => {
+    if(event.value) {
+      setStart(event.value.start);
+      setEnd(event.value.end);
+    }
+  }
+
+  return (
+    <RangeSlider
+      defaultValue={{start: start, end: end}}
+      step={1}
+      min={0}
+      max={100}
+    >
+      {[0, 25, 50, 75, 100].map((perc, i) => (
+        <SliderLabel
+          key={i}
+          position={perc}
+          onClick={handleClick}
+        >
+          {perc.toString()}
+        </SliderLabel>
+      ))}
+    </RangeSlider>
+  );
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RangeSlider, SliderLabel } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <RangeSlider
+        defaultValue={{start: 30, end: 70}}
+        step={1}
+        min={0}
+        max={100}
+        disabled={true}
+      >
+        {[0, 25, 50, 75, 100].map((perc, i) => (
+          <SliderLabel
+            key={i}
+            position={perc}
+          >
+            {perc.toString()}
+          </SliderLabel>
+        ))}
+      </RangeSlider>
+    );
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RangeSlider, SliderLabel } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <RangeSlider
+        defaultValue={{start: 30, end: 70}}
+        step={1}
+        min={0}
+        max={100}
+      >
+        {[0, 25, 50, 75, 100].map((perc, i) => (
+          <SliderLabel
+            key={i}
+            position={perc}
+          >
+            {perc.toString()}
+          </SliderLabel>
+        ))}
+      </RangeSlider>
+    );
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

package/docs/examples/rangeslider/orientation/func/main.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RangeSlider, SliderLabel } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <RangeSlider
+        defaultValue={{start: 30, end: 70}}
+        step={1}
+        min={0}
+        max={100}
+        vertical={true}
+      >
+        {[0, 25, 50, 75, 100].map((perc, i) => (
+          <SliderLabel
+            key={i}
+            position={perc}
+          >
+            {perc.toString()}
+          </SliderLabel>
+        ))}
+      </RangeSlider>
+    );
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { RangeSlider, SliderLabel } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <RangeSlider
+        defaultValue={{ start: 30, end: 70 }}
+        step={1}
+        min={0}
+        max={100}
+      >
+        {[0, 25, 50, 75, 100].map((perc, i) => (
+          <SliderLabel
+            key={i}
+            position={perc}
+          >
+            {perc.toString()}
+          </SliderLabel>
+        ))}
+      </RangeSlider>
+    );
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Rating } from '@progress/kendo-react-inputs';
+
+interface AppState {
+  value: number
+}
+
+class App extends React.Component {
+  state: AppState = {
+    value: 2
+  }
+
+  render() {
+    return (
+      <Rating
+        value={this.state.value}
+        onChange={this.handleValueChange}
+      />
+    );
+  }
+
+  handleValueChange = (event) => {
+    this.setState({ value: event.value });
+  };
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Rating, RatingChangeEvent } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    const [value, setValue] = React.useState(2);
+
+    const handleValueChange = (event: RatingChangeEvent) => {
+        setValue(event.value);
+    };
+
+    return (
+      <Rating
+        value={value}
+        onChange={handleValueChange}
+        />
+    );
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Rating } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <div>
+        <h4>Disabled Mode</h4>
+        <Rating
+          defaultValue={3}
+          disabled={true}
+        />
+      </div>
+    );
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

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

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Form, Field, FormElement } from '@progress/kendo-react-form';
+import { Error } from '@progress/kendo-react-labels';
+import { Input, Rating } from '@progress/kendo-react-inputs';
+
+const emailRegex = new RegExp(/\S+@\S+\.\S+/);
+const emailValidator = (value) => (emailRegex.test(value) ? "" : "Please enter a valid email.");
+
+class EmailInput extends React.Component {
+    render() {
+      return (
+        <div>
+          <Input {...this.props} />
+          {
+              this.props.visited && this.props.validationMessage &&
+              (<Error>{this.props.validationMessage}</Error>)
+          }
+        </div>
+      );
+    }
+};
+
+const ratingValidator = (value) => (value ? "" : "Please enter a valid email.");
+
+class RatingInput extends React.Component {
+    render() {
+      return (
+        <div>
+          <Rating {...this.props} />
+          {
+              this.props.visited && this.props.validationMessage &&
+              (<Error>{this.props.validationMessage}</Error>)
+          }
+        </div>
+      );
+    }
+};
+
+class App extends React.Component {
+    render() {
+      return (
+        <Form
+          onSubmit={this.handleSubmit}
+          render={(formRenderProps) => (
+            <FormElement style={{ maxWidth: 650 }}>
+              <fieldset className={'k-form-fieldset'}>
+                <legend className={'k-form-legend'}>Please fill in the fields:</legend>
+                <div className="mb-3">
+                  <Field name={'firstName'} component={Input} label={'First name'} />
+                </div>
+                <div className="mb-3">
+                  <Field name={'lastName'} component={Input} label={'Last name'} />
+                </div>
+                <div className="mb-3">
+                  <Field name={"email"} type={"email"} component={EmailInput} label={"Email"} validator={emailValidator} />
+                </div>
+                <legend className={'k-form-legend'}>Please rate your experience:</legend>
+                <div className="mb-3">
+                  <Field name={'rating'} component={RatingInput} defaultValue={5} validation={ratingValidator} />
+                </div>
+              </fieldset>
+              <div className="k-form-buttons">
+                <button
+                  type={'submit'}
+                  className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
+                  disabled={!formRenderProps.allowSubmit}
+                          >
+                  Submit
+                </button>
+              </div>
+            </FormElement>
+              )}
+          />
+      );
+    }
+    handleSubmit = (dataItem: React.SyntheticEvent) => alert(JSON.stringify(dataItem, null, 2));
+};
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);
+
+