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

package/docs/examples/signature/forms/kendo/func/main.tsx

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Button } from '@progress/kendo-react-buttons';
+import { Field, FieldWrapper, Form, FormElement } from '@progress/kendo-react-form';
+import { Input, Signature } from '@progress/kendo-react-inputs';
+import { Error, Hint, Label } from '@progress/kendo-react-labels';
+
+
+const firstNameValidator = (value: string) => !value ?
+    'First Name is required' : '';
+
+const lastNameValidator = (value: string) => !value ?
+    'Last Name is required' : '';
+
+const signatureValidator = (value: string) => !value ?
+    'Signature is required' : '';
+
+const FormInput = (fieldRenderProps: any) => {
+    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 FormSignature = (fieldRenderProps: any) => {
+    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>
+        <Signature
+          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: any) => {
+        const shortData = {
+            ...dataItem,
+            signature: dataItem.signature.substring(0, 30) + '...'
+        };
+
+        alert(JSON.stringify(shortData, null, 2));
+    };
+
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <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={'signature'}
+                  name={'signature'}
+                  label={'Signature'}
+                  hint={'Sign to agree with our Terms of Use'}
+                  component={FormSignature}
+                  layout={'horizontal'}
+                  validator={signatureValidator}
+                        />
+                <div className="k-form-buttons">
+                  <Button
+                    themeColor={'primary'}
+                    type={'submit'}
+                    disabled={!formRenderProps.allowSubmit}
+                            >
+                    Submit
+                  </Button>
+                  <Button onClick={formRenderProps.onFormReset}>
+                    Clear
+                  </Button>
+                </div>
+              </fieldset>
+            </FormElement>
+            )}
+        />
+      </div>
+    );
+};
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

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

@@ -0,0 +1,239 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { saveAs } from '@progress/kendo-file-saver';
+import {
+  Button,
+  ButtonGroup,
+  SplitButton,
+  SplitButtonItemClickEvent,
+  Toolbar,
+  ToolbarItem,
+  ToolbarSeparator,
+  ToolbarSpacer
+  } from '@progress/kendo-react-buttons';
+import { Icon } from '@progress/kendo-react-common';
+import { ColorPicker, ColorPickerChangeEvent, Signature, SignatureChangeEvent } from '@progress/kendo-react-inputs';
+import { loadMessages, LocalizationProvider } from '@progress/kendo-react-intl';
+import { Upload, UploadOnAddEvent } from '@progress/kendo-react-upload';
+
+import './styles.css';
+
+loadMessages({
+  'upload': {
+      'dropFilesHere': '',
+      'select': 'Browse Image...'
+  }
+}, 'en-US');
+
+const App = () => {
+    const [value, setValue] = React.useState<string>();
+    const [color, setColor] = React.useState('#000');
+    const [backgroundColor, setBackgroundColor] = React.useState('#fff');
+    const [strokeWidth, setStrokeWidth] = React.useState(3);
+    const [strokeWidthText, setStrokeWidthText] = React.useState('Wide');
+    const [showUpload, setShowUpload] = React.useState(false);
+    const [imageURL, setImageURL] = React.useState<string>();
+
+    const strokeWidthOptions = [{
+        text: 'Normal',
+        value: 1
+    }, {
+        text: 'Wide',
+        value: 3
+    }];
+
+    const onChange = (e: SignatureChangeEvent) => {
+        setValue(e.value);
+    };
+
+    const onColorChange = (e: ColorPickerChangeEvent) => {
+        setColor(e.value);
+    };
+
+    const onStrokeWidthChange = (e: SplitButtonItemClickEvent) => {
+        setStrokeWidth(e.item.value);
+        setStrokeWidthText(e.item.text);
+    };
+
+    const onBackgroundColorChange = (e: ColorPickerChangeEvent) => {
+        setBackgroundColor(e.value);
+    };
+
+    const onDrawClick = () => {
+        setShowUpload(false);
+    };
+
+    const onUploadClick = () => {
+        setShowUpload(true);
+    };
+
+    const revokeImageURL = () => {
+        if (imageURL) {
+            console.log('cleanup');
+            URL.revokeObjectURL(imageURL);
+            setImageURL(undefined);
+        }
+    };
+
+    // Clean up on unmount.
+    React.useEffect(() => revokeImageURL, []);
+
+    const readImage = (file: File) => {
+        const reader = new FileReader();
+
+        const onLoad = () => {
+            setValue(reader.result as string);
+            reader.removeEventListener('load', onLoad);
+        };
+
+        reader.addEventListener('load', onLoad);
+        reader.readAsDataURL(file);
+    };
+
+    const onFileSelect = (e: UploadOnAddEvent) => {
+        const entry = e.affectedFiles[0];
+        if (entry && entry.getRawFile) {
+            const file = entry.getRawFile();
+            readImage(file);
+
+            revokeImageURL();
+            setImageURL(URL.createObjectURL(file));
+        }
+    };
+
+    const onSave = () => {
+        if (value) {
+            saveAs(value, 'signature.png');
+        }
+    };
+
+    const onClear = () => {
+        setValue(undefined);
+        revokeImageURL();
+    };
+
+    return (
+      <div className="example">
+        <div className="content-wrapper">
+          <Toolbar>
+            {!showUpload && (
+              <>
+                <ToolbarItem className='toolbar-tool'>
+                  Brush:
+                  <ColorPicker value={color} onChange={onColorChange}/>
+                </ToolbarItem>
+
+                <SplitButton
+                  items={strokeWidthOptions}
+                  text={strokeWidthText}
+                  textField='text'
+                  onItemClick={onStrokeWidthChange}
+                />
+
+                <ToolbarSeparator />
+
+                <ToolbarItem className='toolbar-tool'>
+                  Background:
+                  <ColorPicker value={backgroundColor} onChange={onBackgroundColorChange}/>
+                </ToolbarItem>
+              </>
+            )}
+
+            {showUpload && (
+              <ToolbarItem className='toolbar-tool'>
+                Upload your signature:
+                <LocalizationProvider language="en-US">
+                  <Upload
+                    autoUpload={false}
+                    restrictions={{ allowedExtensions: [ 'png', 'jpeg' ] }}
+                    showFileList={false}
+                    showActionButtons={false}
+
+                    onAdd={onFileSelect}
+                  />
+                </LocalizationProvider>
+              </ToolbarItem>
+            )}
+
+            <ToolbarSpacer />
+
+            <ToolbarItem>
+              <ButtonGroup>
+                <Button
+                  togglable={true}
+                  selected={!showUpload}
+                  onClick={onDrawClick}
+                  icon='brush'
+                >Draw</Button>
+                <Button
+                  togglable={true}
+                  selected={showUpload}
+                  onClick={onUploadClick}
+                  icon='upload'
+                >Upload</Button>
+              </ButtonGroup>
+            </ToolbarItem>
+          </Toolbar>
+          <div className="signature-wrapper">
+            {!showUpload && (
+              <Signature
+                value={value}
+                onChange={onChange}
+
+                color={color}
+                backgroundColor={backgroundColor}
+                strokeWidth={strokeWidth}
+                smooth={true}
+
+                maximizable={false}
+                hideLine={true}
+              />
+            )}
+
+            {showUpload && (
+              <>
+                {!imageURL && (
+                  <div className='placeholder'>
+                    <Icon name='image' size='xlarge' />
+                    <span>Please, browse an image to preview here.</span>
+                  </div>
+                )}
+
+                {imageURL && (
+                  <img
+                    src={imageURL}
+                    title='Uploaded signature'
+                    draggable="false"
+                  />
+                )}
+              </>
+            )}
+          </div>
+
+          <div className="notes">
+            By using the Kendo UI for Angular signature component,
+            you can enable your end-users to draw handwritten signatures
+            using touch or pointer devices.
+          </div>
+
+          <Toolbar>
+            <Button
+              icon='save'
+              themeColor='primary'
+              disabled={!value}
+              onClick={onSave}
+            >Save</Button>
+
+            <Button
+              onClick={onClear}
+            >Clear</Button>
+          </Toolbar>
+        </div>
+      </div>
+    );
+};
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/signature/overview/func/styles.css

@@ -0,0 +1,56 @@
+.content-wrapper,
+.content-wrapper img {
+    width: 750px;
+    height: 250px;
+}
+
+.example {
+    display: flex;
+    justify-content: center;
+}
+
+.toolbar-tool {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.k-signature,
+.notes {
+    border-color: rgba(0, 0, 0, 0.08);
+    border-width: 0 1px;
+    border-radius: 0;
+}
+
+.k-upload .k-dropzone {
+    padding: 0
+}
+
+.signature-wrapper {
+    height: 270px;
+}
+
+.signature-wrapper .k-signature {
+    width: 100%;
+    height: 100%;
+}
+
+.signature-wrapper img {
+    user-select: none
+}
+
+.placeholder {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.notes {
+    font-style: italic;
+    border-width: 1px;
+    border-bottom-width: 0;
+    border-style: solid;
+    padding: 1em;
+}

package/docs/examples/signature/popup/disabled/func/main.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Signature } from '@progress/kendo-react-inputs';
+
+
+const App = () => {
+    return <Signature maximizable={false} />;
+};
+
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/signature/popup/scale/func/main.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Signature } from '@progress/kendo-react-inputs';
+
+
+const App = () => {
+    return <Signature popupScale={2.5} />;
+};
+
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/signature/readonly/func/main.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Signature } from '@progress/kendo-react-inputs';
+import { sampleSignature } from './sample-signature';
+
+
+const App = () => {
+    const [value] = React.useState(sampleSignature);
+
+    return <Signature value={value} readOnly={true} popupScale={2} />;
+};
+
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/signature/smooth/func/main.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Signature } from '@progress/kendo-react-inputs';
+
+
+const App = () => {
+    return <Signature smooth={true} popupScale={2} />;
+};
+
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/slider/buttons/func/main.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Slider } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <Slider
+        buttons={true}
+        min={1}
+        max={10}
+        step={1}
+        defaultValue={7}
+      />
+    );
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Slider, SliderChangeEvent, SliderLabel } from '@progress/kendo-react-inputs';
+import { Tooltip } from '@progress/kendo-react-tooltip';
+
+interface AppState {
+  value: number
+}
+
+class App extends React.Component {
+  state: AppState = {
+    value: 7
+  };
+
+  render() {
+    return (
+      <Tooltip anchorElement="target" position="bottom">
+        <Slider
+          min={1}
+          max={10}
+          step={1}
+          value={this.state.value}
+          onChange={this.onChange}
+        >
+          {[ 1, 3, 5, 6, 10 ].map(value => (
+            <SliderLabel
+              title={`${value}`}
+              key={value}
+              position={value}
+              onClick={() => { this.setState({ value }); }}
+              />
+          ))}
+        </Slider>
+      </Tooltip>
+    );
+  }
+
+  onChange = (event: SliderChangeEvent) => {
+    this.setState({ value: event.value });
+  };
+
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Slider, SliderChangeEvent, SliderLabel } from '@progress/kendo-react-inputs';
+import { Tooltip } from '@progress/kendo-react-tooltip';
+
+const App = () => {
+  const [value, setValue] = React.useState(7);
+  
+    const onChange = (event: SliderChangeEvent) => {
+      setValue(event.value);
+    };
+
+    return (
+      <Tooltip anchorElement="target" position="bottom">
+        <Slider
+          min={1}
+          max={10}
+          step={1}
+          value={value}
+          onChange={onChange}
+        >
+          {[ 1, 3, 5, 6, 10 ].map(value => (
+            <SliderLabel
+              title={value.toString()}
+              key={value}
+              position={value}
+              onClick={() => { setValue(value); }}
+            />
+          ))}
+        </Slider>
+      </Tooltip>
+    );
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

package/docs/examples/slider/labels/class/main.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Slider, SliderChangeEvent, SliderLabel } from '@progress/kendo-react-inputs';
+
+interface AppState {
+  value: number
+}
+
+class App extends React.Component {
+  state: AppState = {
+    value: 7
+  };
+
+  render() {
+    return (
+      <Slider
+        buttons={true}
+        step={1}
+        min={1}
+        max={10}
+        value={this.state.value}
+        onChange={this.onChange}
+        >
+        {[ 1, 5.5, 8, 10 ].map((perc, i) => (
+          <SliderLabel
+            key={i}
+            position={perc}
+            onClick={() => { this.setState({ val: perc }); }}
+                >
+            {perc.toString()}
+          </SliderLabel>
+            ))}
+      </Slider>
+    );
+  }
+  onChange = (e: SliderChangeEvent) => {
+    this.setState({
+        val: e.value
+    });
+}
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Slider, SliderChangeEvent, SliderLabel } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    const [value, setValue] = React.useState(7);
+
+    const handleChange = (event: SliderChangeEvent) => {
+      setValue(event.value)
+    }
+
+    return (
+      <Slider
+        buttons={true}
+        step={1}
+        min={1}
+        max={10}
+        value={value}
+        onChange={handleChange}
+        >
+        {[ 1, 5.5, 8, 10 ].map((perc, i) => (
+          <SliderLabel
+            key={i}
+            position={perc}
+            onClick={() => { setValue(perc); }}
+          >
+            {perc.toString()}
+          </SliderLabel>
+        ))}
+      </Slider>
+    );
+}
+
+ReactDOM.render(<App />, document.querySelector('my-app'));