Telerik
/
react-coffee-warehouse
зеркало из https://github.com/telerik/react-coffee-warehouse.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

feat: update packages

This commit is contained in:
Vladimir Iliev 2020-05-14 11:18:33 +03:00
Родитель dd48b53a80
Коммит 16f7e57a6d
8 изменённых файлов: 167 добавлений и 98 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

33
package.json
Просмотреть файл

@ -7,22 +7,23 @@
"@progress/kendo-data-query": "^1.5.3",
"@progress/kendo-drawing": "^1.6.0",
"@progress/kendo-date-math": "^1.5.0",
"@progress/kendo-react-buttons": "^3.14.0-dev.202005080720",
"@progress/kendo-react-charts": "^3.14.0-dev.202005080720",
"@progress/kendo-react-data-tools": "^3.14.0-dev.202005080720",
"@progress/kendo-react-dateinputs": "^3.14.0-dev.202005080720",
"@progress/kendo-react-dialogs": "^3.14.0-dev.202005080720",
"@progress/kendo-react-dropdowns": "^3.14.0-dev.202005080720",
"@progress/kendo-react-editor": "^3.14.0-dev.202005080720",
"@progress/kendo-react-form": "^3.14.0-dev.202005080720",
"@progress/kendo-react-grid": "^3.14.0-dev.202005080720",
"@progress/kendo-react-inputs": "^3.14.0-dev.202005080720",
"@progress/kendo-react-intl": "^3.14.0-dev.202005080720",
"@progress/kendo-react-layout": "^3.14.0-dev.202005080720",
"@progress/kendo-react-pdf": "^3.14.0-dev.202005080720",
"@progress/kendo-react-excel-export": "^3.14.0-dev.202005080720",
"@progress/kendo-react-scheduler": "^3.14.0-dev.202005080720",
"@progress/kendo-react-upload": "^3.14.0-dev.202005080720",
"@progress/kendo-react-buttons": "3.14.0",
"@progress/kendo-react-charts": "3.14.0",
"@progress/kendo-react-data-tools": "3.14.0",
"@progress/kendo-react-dateinputs": "3.14.0",
"@progress/kendo-react-dialogs": "3.14.0",
"@progress/kendo-react-dropdowns": "3.14.0",
"@progress/kendo-react-editor": "3.14.0",
"@progress/kendo-react-form": "3.14.0",
"@progress/kendo-react-grid": "3.14.0",
"@progress/kendo-react-inputs": "3.14.0",
"@progress/kendo-react-intl": "3.14.0",
"@progress/kendo-react-layout": "3.14.0",
"@progress/kendo-react-pdf": "3.14.0",
"@progress/kendo-react-excel-export": "3.14.0",
"@progress/kendo-react-progressbars": "3.14.0",
"@progress/kendo-react-scheduler": "3.14.0",
"@progress/kendo-react-upload": "3.14.0",
"@progress/kendo-theme-default": "^4.17.0",
"cldr-core": "36.0.0",
"cldr-dates-full": "^36.0.0",

52
src/components/form/DropDownList.jsx
Просмотреть файл

@ -6,23 +6,43 @@ import { FieldWrapper } from '@progress/kendo-react-form';
import { Label, Error, Hint } from '@progress/kendo-react-labels';
export const DropDownList = (fieldRenderProps) => {
const { validationMessage, visited, label, id, value, valid, hint, optional, ...others } = fieldRenderProps;
const ddlRef = React.useRef(null);
const showValidationMessage = visited && validationMessage;
const { validationMessage, touched, label, id, valid, disabled, hint, wrapperStyle, ...others } = fieldRenderProps;
const editorRef = React.useRef(null);
const showValidationMessage = touched && validationMessage;
const showHint = !showValidationMessage && hint;
const hintId = showHint ? `${id}_hint` : '';
const errorId = showValidationMessage ? `${id}_error` : '';
const labelId = label ? `${id}_label` : '';
return (
<FieldWrapper>
<Label editorId={id} editorValid={valid} editorRef={ddlRef} optional={optional}>{label}</Label>
<div className={'k-form-field-wrap'}>
<KendoDropDownList ref={ddlRef} value={value} valid={valid} id={id} {...others} />
{
!showValidationMessage &&
<Hint>{hint}</Hint>
}
{
showValidationMessage &&
<Error>{validationMessage}</Error>
}
</div>
<FieldWrapper style={wrapperStyle}>
<Label
id={labelId}
editorRef={editorRef}
editorId={id}
editorValid={valid}
editorDisabled={disabled}
>
{label}
</Label>
<KendoDropDownList
ariaLabelledBy={labelId}
ariaDescribedBy={`${hintId} ${errorId}`}
ref={editorRef}
valid={valid}
id={id}
disabled={disabled}
{...others}
/>
{
showHint &&
<Hint id={hintId}>{hint}</Hint>
}
{
showValidationMessage &&
<Error id={errorId}>{validationMessage}</Error>
}
</FieldWrapper>
);
};

7
src/components/form/Editor.jsx
Просмотреть файл

@ -6,8 +6,9 @@ import { FieldWrapper } from '@progress/kendo-react-form';
import { Label, Error, Hint } from '@progress/kendo-react-labels';
export const Editor = (fieldRenderProps) => {
const { validationMessage, visited, label, id, valid, hint, optional, value, onChange, ...others } = fieldRenderProps;
const showValidationMessage = visited && validationMessage;
const { validationMessage, touched, label, id, valid, hint, optional, value, onChange, ...others } = fieldRenderProps;
const showValidationMessage = touched && validationMessage;
const showHint = !showValidationMessage && hint;
const onChangeHandler = (event) => {
onChange({value: event.html});
@ -32,7 +33,7 @@ export const Editor = (fieldRenderProps) => {
{...others}
/>
{
!showValidationMessage &&
showHint &&
<Hint>{hint}</Hint>
}
{

26
src/components/form/Input.jsx
Просмотреть файл

@ -6,20 +6,32 @@ import { FieldWrapper } from '@progress/kendo-react-form';
import { Label, Error, Hint } from '@progress/kendo-react-labels';
export const Input = (fieldRenderProps) => {
const { validationMessage, visited, label, id, valid, hint, optional, ...others } = fieldRenderProps;
const showValidationMessage = visited && validationMessage;
const { validationMessage, touched, label, id, valid, disabled, hint, type, optional, ...others } = fieldRenderProps;
const showValidationMessage = touched && validationMessage;
const showHint = !showValidationMessage && hint;
const hintId = showHint ? `${id}_hint` : '';
const errorId = showValidationMessage ? `${id}_error` : '';
return (
<FieldWrapper>
<Label editorId={id} editorValid={valid} optional={optional}>{label}</Label>
<Label editorId={id} editorValid={valid} editorDisabled={disabled} optional={optional}>{label}</Label>
<div className={'k-form-field-wrap'}>
<KendoInput valid={valid} id={id} {...others} />
<KendoInput
valid={valid}
type={type}
id={id}
disabled={disabled}
ariaDescribedBy={`${hintId} ${errorId}`}
{...others}
/>
{
!showValidationMessage &&
<Hint>{hint}</Hint>
showHint &&
<Hint id={hintId}>{hint}</Hint>
}
{
showValidationMessage &&
<Error>{validationMessage}</Error>
<Error id={errorId}>{validationMessage}</Error>
}
</div>
</FieldWrapper>

23
src/components/form/MaskedTextBox.jsx
Просмотреть файл

@ -6,26 +6,35 @@ import { FieldWrapper } from '@progress/kendo-react-form';
import { Label, Error, Hint } from '@progress/kendo-react-labels';
export const MaskedTextBox = (fieldRenderProps) => {
const { validationMessage, visited, label, id, valid, hint, optional, ...others } = fieldRenderProps;
const showValidationMessage = visited && validationMessage;
const { validationMessage, touched, label, id, valid, hint, optional, ...others } = fieldRenderProps;
const showValidationMessage = touched && validationMessage;
const showHint = !showValidationMessage && hint;
const hintId = showHint ? `${id}_hint` : '';
const errorId = showValidationMessage ? `${id}_error` : '';
return (
<FieldWrapper>
<Label editorId={id} editorValid={valid} optional={optional}>{label}</Label>
<div className={'k-form-field-wrap'}>
<KendoMaskedTextBox valid={valid} id={id} {...others} />
<KendoMaskedTextBox
ariaDescribedBy={`${hintId} ${errorId}`}
valid={valid}
id={id}
{...others}
/>
{
!showValidationMessage &&
<Hint>{hint}</Hint>
showHint &&
<Hint id={hintId}>{hint}</Hint>
}
{
showValidationMessage &&
<Error>{validationMessage}</Error>
<Error id={errorId}>{validationMessage}</Error>
}
</div>
</FieldWrapper>
);
};
MaskedTextBox.displayName = 'MaskedTextBox';
MaskedTextBox.propTypes = {
valid: PropTypes.bool,

48
src/components/form/RadioGroup.jsx
Просмотреть файл

@ -6,34 +6,40 @@ import { FieldWrapper } from '@progress/kendo-react-form';
import { Label, Error, Hint } from '@progress/kendo-react-labels';
export const RadioGroup = (fieldRenderProps) => {
const { validationMessage, visited, label, labelId, valid, hint, optional, ...others } = fieldRenderProps;
const showValidationMessage = visited && validationMessage;
const radioRef = React.useRef(null);
const { validationMessage, touched, id, label, valid, disabled, hint, ...others } = fieldRenderProps;
const editorRef = React.useRef(null);
const showValidationMessage = touched && validationMessage;
const showHint = !showValidationMessage && hint
const hintId = showHint ? `${id}_hint` : '';
const errorId = showValidationMessage ? `${id}_error` : '';
const labelId = label ? `${id}_label` : '';
return (
<FieldWrapper>
<Label id={labelId} editorRef={radioRef} editorValid={valid} optional={optional}>{label}</Label>
<div className={'k-form-field-wrap'}>
<KendoRadioGroup
ariaDescribedBy={labelId}
ariaLabelledBy={labelId}
valid={valid}
ref={radioRef}
{...others}
/>
{
!showValidationMessage &&
<Hint>{hint}</Hint>
}
{
showValidationMessage &&
<Error>{validationMessage}</Error>
}
</div>
<Label id={labelId} editorRef={editorRef} editorId={id} editorValid={valid} editorDisabled={disabled}>{label}</Label>
<KendoRadioGroup
id={id}
ariaDescribedBy={`${hintId} ${errorId}`}
ariaLabelledBy={labelId}
valid={valid}
disabled={disabled}
ref={editorRef}
{...others}
/>
{
showHint &&
<Hint id={hintId}>{hint}</Hint>
}
{
showValidationMessage &&
<Error id={errorId}>{validationMessage}</Error>
}
</FieldWrapper>
);
};
RadioGroup.displayName = 'RadioGroup';
RadioGroup.propTypes = {
valid: PropTypes.bool,

57
src/components/form/Switch.jsx
Просмотреть файл

@ -6,31 +6,44 @@ import { FieldWrapper } from '@progress/kendo-react-form';
import { Label, Error, Hint } from '@progress/kendo-react-labels';
export const Switch = (fieldRenderProps) => {
const { validationMessage, visited, label, labelId, id, valid, hint, optional, value, ...others } = fieldRenderProps;
const showValidationMessage = visited && validationMessage;
const switchRef = React.useRef(null);
const { validationMessage, touched, label, optional, id, valid, disabled, hint, ...others } = fieldRenderProps;
const editorRef = React.useRef(null);
const showValidationMessage = touched && validationMessage;
const showHint = !showValidationMessage && hint;
const hintId = showHint ? `${id}_hint` : '';
const errorId = showValidationMessage ? `${id}_error` : '';
const labelId = label ? `${id}_label` : '';
return (
<FieldWrapper>
<Label id={labelId} editorRef={switchRef} editorValid={valid} optional={optional}>{label}</Label>
<div className={'k-form-field-wrap'}>
<KendoSwitch
ariaDescribedBy={labelId}
ariaLabelledBy={labelId}
valid={valid}
checked={value}
ref={switchRef}
{...others}
/>
{
!showValidationMessage &&
<Hint>{hint}</Hint>
}
{
showValidationMessage &&
<Error>{validationMessage}</Error>
}
</div>
<Label
id={labelId}
editorRef={editorRef}
editorId={id}
editorValid={valid}
editorDisabled={disabled}
optional={optional}
>
{label}
</Label>
<KendoSwitch
ref={editorRef}
ariaLabelledBy={labelId}
ariaDescribedBy={`${hintId} ${errorId}`}
valid={valid}
id={id}
disabled={disabled}
{...others}
/>
{
showHint &&
<Hint id={hintId}>{hint}</Hint>
}
{
showValidationMessage &&
<Error id={errorId}>{validationMessage}</Error>
}
</FieldWrapper>
);
};

19
src/components/form/Upload.jsx
Просмотреть файл

@ -9,10 +9,15 @@ import { Avatar } from '@progress/kendo-react-layout';
import userAvatar from '../../assets/user-avatar.jpg';
export const Upload = (fieldRenderProps) => {
const {valid, value, id, optional, label, hint, validationMessage, visited, ...others} = fieldRenderProps;
const {valid, value, id, optional, label, hint, validationMessage, touched, ...others} = fieldRenderProps;
const imgRef = React.useRef(null);
const hasImage = value && value.length > 0;
const showValidationMessage = visited && validationMessage;
const showValidationMessage = touched && validationMessage;
const showHint = !showValidationMessage && hint;
const hintId = showHint ? `${id}_hint` : '';
const errorId = showValidationMessage ? `${id}_error` : '';
const labelId = label ? `${id}_label` : '';
const onChangeHandler = (event) => {
fieldRenderProps.onChange({ value: event.newState });
@ -38,7 +43,7 @@ export const Upload = (fieldRenderProps) => {
return (
<FieldWrapper>
<Label editorId={id} editorValid={valid} optional={optional}>
<Label id={labelId} editorId={id} editorValid={valid} optional={optional}>
{label}
<Avatar style={{width: 100, height: 100}} shape={'circle'} type={'image'}>
{
@ -58,15 +63,17 @@ export const Upload = (fieldRenderProps) => {
files={value}
onAdd={onChangeHandler}
onRemove={onRemoveHandler}
ariaDescribedBy={`${hintId} ${errorId}`}
ariaLabelledBy={labelId}
{...others}
/>
{
!showValidationMessage &&
<Hint>{hint}</Hint>
showHint &&
<Hint id={hintId}>{hint}</Hint>
}
{
showValidationMessage &&
<Error>{validationMessage}</Error>
<Error id={errorId}>{validationMessage}</Error>
}
</div>
</FieldWrapper>