+ {message}
+
+);
+
+@ComponentBindings()
+export class ErrorMessageProps {
+ @OneWay() className?: string = '';
+
+ @OneWay() message?: string = '';
+}
+
+@Component({
+ defaultOptionRules: null,
+ view: viewFunction,
+})
+export default class ErrorMessage extends JSXComponent
+ {viewModel.props.children}
+
+);
+
+@ComponentBindings()
+export class WidgetProps extends BaseWidgetProps {
+ @OneWay() _feedbackHideTimeout?: number = 400;
+
+ @OneWay() _feedbackShowTimeout?: number = 30;
+
+ @OneWay() activeStateUnit?: string;
+
+ @OneWay() aria?: any = {};
+
+ @Slot() children?: any;
+
+ @OneWay() classes?: string | undefined = '';
+
+ @OneWay() className?: string = '';
+
+ @OneWay() name?: string = '';
+
+ @Event() onActive?: (e: any) => any;
+
+ @Event() onDimensionChanged?: () => any;
+
+ @Event() onInactive?: (e: any) => any;
+
+ @Event() onKeyboardHandled?: (args: any) => any | undefined;
+
+ @Event() onVisibilityChange?: (args: boolean) => undefined;
+
+ @OneWay() style?: { [name: string]: any };
+}
+
+@Component({
+ defaultOptionRules: null,
+ jQuery: {
+ register: true,
+ },
+ view: viewFunction,
+})
+
+export default class Widget extends JSXComponent
+ Loading...
+
+
+
+
diff --git a/playground/angular/tsconfig.json b/playground/angular/tsconfig.json
new file mode 100644
index 000000000000..aed9b644f22b
--- /dev/null
+++ b/playground/angular/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "baseUrl": "./",
+ "outDir": "./dist/out-tsc",
+ "sourceMap": true,
+ "declaration": false,
+ "downlevelIteration": true,
+ "experimentalDecorators": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "importHelpers": true,
+ "target": "es2015",
+ "typeRoots": [
+ "node_modules/@types"
+ ],
+ "lib": [
+ "es2018",
+ "dom"
+ ]
+ },
+ "include": [
+ "app/**/*.ts"
+ ],
+ "angularCompilerOptions": {
+ "fullTemplateTypeCheck": true,
+ "strictInjectionParameters": true
+ }
+ }
diff --git a/playground/angular/tslint.json b/playground/angular/tslint.json
new file mode 100644
index 000000000000..2f1da5abad49
--- /dev/null
+++ b/playground/angular/tslint.json
@@ -0,0 +1,83 @@
+{
+ "extends": "tslint:recommended",
+ "rules": {
+ "array-type": false,
+ "arrow-parens": false,
+ "deprecation": {
+ "severity": "warning"
+ },
+ "component-class-suffix": true,
+ "contextual-lifecycle": true,
+ "directive-class-suffix": true,
+ "directive-selector": [
+ true,
+ "attribute",
+ "app",
+ "camelCase"
+ ],
+ "component-selector": [
+ true,
+ "element",
+ "app",
+ "kebab-case"
+ ],
+ "import-blacklist": [
+ true,
+ "rxjs/Rx"
+ ],
+ "interface-name": false,
+ "max-classes-per-file": false,
+ "max-line-length": [
+ true,
+ 140
+ ],
+ "member-access": false,
+ "member-ordering": [
+ true,
+ {
+ "order": [
+ "static-field",
+ "instance-field",
+ "static-method",
+ "instance-method"
+ ]
+ }
+ ],
+ "no-consecutive-blank-lines": false,
+ "no-empty": false,
+ "no-inferrable-types": [
+ true,
+ "ignore-params"
+ ],
+ "no-non-null-assertion": true,
+ "no-redundant-jsdoc": true,
+ "no-switch-case-fall-through": true,
+ "no-var-requires": false,
+ "object-literal-key-quotes": [
+ true,
+ "as-needed"
+ ],
+ "object-literal-sort-keys": false,
+ "ordered-imports": false,
+ "quotemark": [
+ true,
+ "single"
+ ],
+ "trailing-comma": false,
+ "no-conflicting-lifecycle": true,
+ "no-host-metadata-property": true,
+ "no-input-rename": true,
+ "no-inputs-metadata-property": true,
+ "no-output-native": true,
+ "no-output-on-prefix": true,
+ "no-output-rename": true,
+ "no-outputs-metadata-property": true,
+ "template-banana-in-box": true,
+ "template-no-negated-async": true,
+ "use-lifecycle-interface": true,
+ "use-pipe-transform-interface": true
+ },
+ "rulesDirectory": [
+ "codelyzer"
+ ]
+ }
\ No newline at end of file
diff --git a/playground/react/.gitignore b/playground/react/.gitignore
new file mode 100644
index 000000000000..7912fc48c7d7
--- /dev/null
+++ b/playground/react/.gitignore
@@ -0,0 +1 @@
+/src/artifacts
diff --git a/playground/react/README.md b/playground/react/README.md
new file mode 100644
index 000000000000..f11f8ba1998f
--- /dev/null
+++ b/playground/react/README.md
@@ -0,0 +1,31 @@
+# README
+
+## Run Example
+
+Install packages using the following command:
+
+```bash
+ npm install
+```
+
+After installation generate components and build scripts
+
+```bash
+ npm run build
+ npm run build:react
+```
+
+or
+
+```bash
+ npm run build:react:watch
+```
+
+
+### Compiles and hot-reloads for development
+
+```bash
+cd ./playground/react
+npm install
+npm start
+```
diff --git a/playground/react/config/env.js b/playground/react/config/env.js
new file mode 100644
index 000000000000..09ec03c5bd6a
--- /dev/null
+++ b/playground/react/config/env.js
@@ -0,0 +1,101 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+ throw new Error(
+ 'The NODE_ENV environment variable is required but was not specified.'
+ );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [
+ `${paths.dotenv}.${NODE_ENV}.local`,
+ `${paths.dotenv}.${NODE_ENV}`,
+ // Don't include `.env.local` for `test` environment
+ // since normally you expect tests to produce the same
+ // results for everyone
+ NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+ paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set. Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+ if (fs.existsSync(dotenvFile)) {
+ require('dotenv-expand')(
+ require('dotenv').config({
+ path: dotenvFile,
+ })
+ );
+ }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+ .split(path.delimiter)
+ .filter(folder => folder && !path.isAbsolute(folder))
+ .map(folder => path.resolve(appDirectory, folder))
+ .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+ const raw = Object.keys(process.env)
+ .filter(key => REACT_APP.test(key))
+ .reduce(
+ (env, key) => {
+ env[key] = process.env[key];
+ return env;
+ },
+ {
+ // Useful for determining whether we’re running in production mode.
+ // Most importantly, it switches React into the correct mode.
+ NODE_ENV: process.env.NODE_ENV || 'development',
+ // Useful for resolving the correct path to static assets in `public`.
+ // For example, {`${text}123`}
;
+
+ it('should render template', () => {
+ const button = render({
+ render: template,
+ text: 'My button',
+ });
+ const customRender = button.find(template);
+
+ expect(customRender.exists()).toBe(true);
+ expect(customRender.exists('.custom-content')).toBe(true);
+
+ expect(customRender.props().text).toBe('My button');
+ expect(customRender.text()).toBe('My button123');
+ });
+
+ it('should rerender template in runtime', () => {
+ const button = mount();
+
+ expect(button.exists(template)).toBe(false);
+
+ button.setProps({ render: template });
+ expect(button.exists(template)).toBe(true);
+
+ button.setProps({ render: undefined });
+ expect(button.exists(template)).toBe(false);
+ });
+
+ it('should change properties in runtime', () => {
+ const button = mount();
+ let buttonContent = button.find(template);
+
+ expect(buttonContent.props().text).toBe('My button');
+ expect(buttonContent.text()).toBe('My button123');
+
+ button.setProps({ text: 'New value' });
+ buttonContent = button.find(template);
+
+ expect(buttonContent.props().text).toBe('New value');
+ expect(buttonContent.text()).toBe('New value123');
+ });
+
+ it('should get original icon prop', () => {
+ const button = render({
+ icon: 'testicon',
+ render: ({ icon }) => {icon}
,
+ text: 'My button',
+ });
+ const buttonContentChildren = button.find('.dx-button-content').children();
+
+ expect(buttonContentChildren.props().icon).toBe('testicon');
+ });
+ });
+
+ describe('icon', () => {
+ it('should not render icon by default', () => {
+ const button = render();
+
+ expect(button.is('.dx-button-has-icon')).toBe(false);
+ expect(button.exists(Icon)).toBe(false);
+ });
+
+ it('should render icon', () => {
+ const button = render({ icon: 'test' });
+ const classNames = button.prop('classes') as string[];
+
+ expect(classNames.includes('dx-button-has-icon')).toBe(true);
+ const { source } = button.find(Icon).props();
+ expect(source).toEqual('test');
+ });
+ });
+
+ describe('iconPosition', () => {
+ it('should render icon before text if iconPosition is left (by default)', () => {
+ const button = render({
+ icon: 'test',
+ text: 'myButton',
+ });
+ const elements = button.find('.dx-button-content').children();
+
+ expect(elements.at(0).is(Icon)).toBe(true);
+ expect(elements.at(1).is('.dx-button-text')).toBe(true);
+ expect(elements.at(0).props().position).toEqual('left');
+ });
+
+ it('should render icon after text if iconPosition is right', () => {
+ const button = render({
+ icon: 'test',
+ iconPosition: 'right',
+ text: 'myButton',
+ });
+ const elements = button.find('.dx-button-content').children();
+ const classNames = button.prop('classes') as string[];
+
+ expect(classNames.includes('dx-button-icon-right')).toBe(true);
+ expect(elements.at(0).is('.dx-button-text')).toBe(true);
+ expect(elements.at(1).is(Icon)).toBe(true);
+ expect(elements.at(1).props().position).toEqual('right');
+ });
+ });
+
+ describe('hoverStateEnabled', () => {
+ it('should pass a default value into Widget component', () => {
+ const tree = render();
+
+ expect(tree.find(Widget).prop('hoverStateEnabled')).toBe(true);
+ });
+
+ it('should pass a custom value into Widget component', () => {
+ const tree = render({ hoverStateEnabled: false });
+
+ expect(tree.find(Widget).prop('hoverStateEnabled')).toBe(false);
+ });
+ });
+
+ describe('visible', () => {
+ it('should pass the default value into Widget component', () => {
+ const tree = render();
+
+ expect(tree.find(Widget).prop('visible')).toBe(true);
+ });
+
+ it('should pass the custom value into Widget component', () => {
+ const tree = render({ visible: false });
+
+ expect(tree.find(Widget).prop('visible')).toBe(false);
+ });
+ });
+
+ describe('focusStateEnabled', () => {
+ it('should pass a default value into Widget component', () => {
+ const button = render();
+
+ expect(button.find(Widget).prop('focusStateEnabled')).toBe(true);
+ });
+
+ it('should pass a custom value into Widget component', () => {
+ const button = render({ focusStateEnabled: false });
+
+ expect(button.find(Widget).prop('focusStateEnabled')).toBe(false);
+ });
+ });
+
+ describe('tabIndex', () => {
+ it('should pass a default value into Widget component', () => {
+ const tree = render();
+
+ expect(tree.find(Widget).prop('tabIndex')).toBe(0);
+ });
+
+ it('should pass a custom value into Widget component', () => {
+ const tree = render({ tabIndex: 10 });
+
+ expect(tree.find(Widget).prop('tabIndex')).toBe(10);
+ });
+ });
+
+ describe('onKeyDown', () => {
+ it('should call custom handler on key press', () => {
+ const onClick = jest.fn();
+ const onKeyDown = jest.fn();
+
+ render({ onClick, onKeyDown });
+
+ expect(onClick).toHaveBeenCalledTimes(0);
+ expect(onKeyDown).toHaveBeenCalledTimes(0);
+
+ emitKeyboard(KEY.space);
+ expect(onClick).toHaveBeenCalledTimes(1);
+ expect(onKeyDown).toHaveBeenCalledTimes(1);
+
+ emitKeyboard(KEY.a);
+ expect(onClick).toHaveBeenCalledTimes(1);
+ expect(onKeyDown).toHaveBeenCalledTimes(2);
+ });
+
+ it('should call custom handler on press specific key', () => {
+ const onClick = jest.fn();
+ const customHandler = jest.fn();
+
+ render({
+ onClick,
+ onKeyDown: (event, { keyName, which }) => {
+ if (keyName === 'a' || which === 'a') {
+ customHandler();
+ }
+
+ return null;
+ },
+ });
+
+ expect(onClick).toHaveBeenCalledTimes(0);
+ expect(customHandler).toHaveBeenCalledTimes(0);
+
+ emitKeyboard(KEY.space);
+ expect(onClick).toHaveBeenCalledTimes(1);
+ expect(customHandler).toHaveBeenCalledTimes(0);
+
+ emitKeyboard(KEY.a);
+ expect(onClick).toHaveBeenCalledTimes(1);
+ expect(customHandler).toHaveBeenCalledTimes(1);
+ });
+
+ it('should not call onClick on press Enter and Space if prevented', () => {
+ const onClick = jest.fn();
+ const customHandler = jest.fn();
+
+ render({
+ onClick,
+ onKeyDown: (event, { keyName, which }) => {
+ if (keyName === 'space' || which === 'space' || keyName === 'enter' || which === 'enter') {
+ customHandler();
+ event.cancel = true; // eslint-disable-line no-param-reassign
+
+ return event;
+ }
+
+ return null;
+ },
+ });
+
+ expect(onClick).toHaveBeenCalledTimes(0);
+ expect(customHandler).toHaveBeenCalledTimes(0);
+
+ emitKeyboard(KEY.space);
+ expect(onClick).toHaveBeenCalledTimes(0);
+ expect(customHandler).toHaveBeenCalledTimes(1);
+
+ emitKeyboard(KEY.enter);
+ expect(onClick).toHaveBeenCalledTimes(0);
+ expect(customHandler).toHaveBeenCalledTimes(2);
+ });
+ });
+ });
+
+ describe('Events', () => {
+ describe('onSubmit', () => {
+ it('should be called on submit input `click` event', () => {
+ const onSubmit = jest.fn();
+ const button = render({ useSubmitBehavior: true, onSubmit });
+ const submitInput = button.find('input.dx-button-submit-input');
+
+ expect(onSubmit).toHaveBeenCalledTimes(0);
+ emit(EVENT.click, defaultEvent, submitInput.getDOMNode());
+ expect(onSubmit).toHaveBeenCalledTimes(1);
+ });
+
+ it('should detach `click` event before rerendering', () => {
+ const button = mount();
+
+ expect(getEventHandlers(EVENT.click).length).toBe(1);
+ button.setProps({ useSubmitBehavior: false });
+ expect(getEventHandlers(EVENT.click).length).toBe(0);
+ });
+ });
+
+ describe('onClick', () => {
+ it('should be called on `click` event', () => {
+ const onClick = jest.fn();
+ const button = render({ onClick });
+
+ expect(onClick).toHaveBeenCalledTimes(0);
+ emit(EVENT.dxClick, defaultEvent, button.getDOMNode());
+ expect(onClick).toHaveBeenCalledTimes(1);
+ });
+
+ it('should be called with passed event', () => {
+ const onClick = jest.fn();
+ const button = render({ onClick });
+
+ emit(EVENT.dxClick, defaultEvent, button.getDOMNode());
+ expect(onClick).toHaveBeenCalledWith({ event: defaultEvent });
+ });
+
+ it('should be called by Enter', () => {
+ const onClick = jest.fn();
+
+ render({ onClick });
+ expect(onClick).toHaveBeenCalledTimes(0);
+ emitKeyboard(KEY.enter);
+ expect(onClick).toHaveBeenCalledTimes(1);
+ emitKeyboard(KEY.a, KEY.enter);
+ expect(onClick).toHaveBeenCalledTimes(2);
+ });
+
+ it('should be called by Space', () => {
+ const onClick = jest.fn();
+
+ render({ onClick });
+ expect(onClick).toHaveBeenCalledTimes(0);
+ emitKeyboard(KEY.space);
+ expect(onClick).toHaveBeenCalledTimes(1);
+ emitKeyboard(KEY.a, KEY.space);
+ expect(onClick).toHaveBeenCalledTimes(2);
+ });
+
+ it('should be called by key press with passed event', () => {
+ const onClick = jest.fn();
+
+ render({ onClick });
+ emitKeyboard(KEY.enter);
+ expect(onClick).toHaveBeenCalledWith({ event: defaultEvent });
+ });
+
+ it('should respond to Enter or Space keys only', () => {
+ const onClick = jest.fn();
+
+ render({ onClick });
+ emitKeyboard(KEY.a);
+ expect(onClick).toHaveBeenCalledTimes(0);
+ });
+ });
+
+ describe('onContentReady', () => {
+ it('should be called after rendering', () => {
+ const onContentReady = jest.fn(({ element }) => expect(element.classList.contains('dx-button')).toBe(true));
+
+ render({ onContentReady });
+ expect(onContentReady).toHaveBeenCalledTimes(1);
+ });
+ });
+ });
+
+ describe('ARIA accessibility', () => {
+ it('should use `text` value as aria-label', () => {
+ const tree = render({ text: 'button-text' });
+
+ expect(tree.find(Widget).prop('aria')).toStrictEqual({ label: 'button-text' });
+ });
+
+ it('should use `icon` name as aria-label', () => {
+ const tree = render({ text: '', icon: 'find' });
+
+ expect(tree.find(Widget).prop('aria')).toStrictEqual({ label: 'find' });
+ });
+
+ it('should use `icon` file name as aria-label if local icon is used', () => {
+ const tree = render({ text: '', icon: '/path/file.png' });
+
+ expect(tree.find(Widget).prop('aria')).toStrictEqual({ label: 'file' });
+ });
+
+ it('should not define aria-label if properties are not defined', () => {
+ const tree = render({ text: '', icon: '' });
+
+ expect(tree.find(Widget).prop('aria')).toStrictEqual({});
+ });
+
+ it('should not parse icon if icon-type is base64 for aria-label', () => {
+ const tree = render({ text: '', icon: 'data:image/png;base64,' });
+
+ expect(tree.find(Widget).prop('aria')).toStrictEqual({ label: 'Base64' });
+ });
+ });
+
+ describe('Default option rules', () => {
+ const getDefaultProps = (): ButtonProps => {
+ defaultOptions({
+ device: () => false,
+ options: {},
+ });
+
+ return Button.defaultProps as ButtonProps;
+ };
+
+ describe('focusStateEnabled', () => {
+ it('should be false if device is not desktop', () => {
+ (devices.real as Mock).mockImplementation(() => ({ deviceType: 'android' }));
+ expect(getDefaultProps().focusStateEnabled).toBe(false);
+ });
+
+ it('should be true on desktop and not simulator', () => {
+ expect(getDefaultProps().focusStateEnabled).toBe(true);
+ });
+
+ it('should be false on simulator', () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (devices as any).isSimulator.mockImplementation(() => true);
+ expect(getDefaultProps().focusStateEnabled).toBe(false);
+ });
+ });
+
+ describe('useInkRiple', () => {
+ it('should be true if material theme', () => {
+ (themes.current as Mock).mockImplementation(() => 'material');
+ expect(getDefaultProps().useInkRipple).toBe(true);
+ });
+
+ it('should be false if theme is not material', () => {
+ (themes.current as Mock).mockImplementation(() => 'generic');
+ expect(getDefaultProps().useInkRipple).toBe(false);
+ });
+ });
+ });
+
+ describe('API', () => {
+ describe('Focus', () => {
+ it('should call .focus API', () => {
+ const apiRef = createRef