@steroidsjs/core 2.0.0-rc.6 → 2.0.1-beta.112

package/ui/format/index.ts

@@ -0,0 +1,27 @@
+import BooleanFormatter from './BooleanFormatter';
+import DateFormatter from './DateFormatter';
+import DateTimeFormatter from './DateTimeFormatter';
+import EnumFormatter from './EnumFormatter';
+import FileSize from './FileSize';
+import MoneyFormatter from './MoneyFormatter';
+import PhotosFormatter from './PhotosFormatter';
+
+export {
+    BooleanFormatter,
+    DateFormatter,
+    DateTimeFormatter,
+    EnumFormatter,
+    FileSize,
+    MoneyFormatter,
+    PhotosFormatter,
+};
+
+export default {
+    BooleanFormatter,
+    DateFormatter,
+    DateTimeFormatter,
+    EnumFormatter,
+    FileSize,
+    MoneyFormatter,
+    PhotosFormatter,
+};

package/ui/icon/Icon/Icon.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import _isObject from 'lodash-es/isObject';
+import _isString from 'lodash-es/isString';
+
+/**
+ * Install the latest free version of Font Awesome via yarn:
+ * ```
+ * $ yarn add @fortawesome/fontawesome-free
+ * ```
+ *
+ * in your root style file (e.g. index.scss) import fontawesome styles
+ * ```
+ *  @import "~@fortawesome/fontawesome-free/scss/fontawesome";
+ * ```
+ *
+ * and in hoc @application add the following code
+ * ```
+ *   ui.addIcons(getFontAwesomeIcons())
+ * ```
+ *
+ * That get the icon used <Icon name={'icon-name'} />
+ */
+export interface IIconProps extends IComponentsHocOutput {
+    /**
+     * Имя иконки (латиницей). Импорт иконок происходит на старте приложения.
+     * @example create
+     */
+    name?: string,
+
+    /**
+     * Заголовок, отображаемый при наведении (через нативное поле title)
+     * @example Добавить запись
+     */
+    title?: string,
+
+    className?: CssClassName;
+
+    /**
+     * Переопределение view React компонента для кастомизациии отображения
+     * @example MyCustomView
+     */
+    view?: React.ComponentType;
+
+    onClick?: any,
+
+    [key: string]: any,
+}
+
+export interface IIconViewProps extends IIconProps {
+    /**
+     * @example require('icon.png'), <svg .../>, 'https://<site-name>/icon.png
+     */
+    icon: string,
+}
+
+@components('ui')
+export default class Icon extends React.PureComponent<IIconProps> {
+
+    render() {
+        const IconView = this.props.view || this.props.ui.getView('icon.IconView');
+        const name = this.props.name;
+        let icon;
+
+        if (process.env.PLATFORM === 'mobile') {
+            icon = this.props.ui.getIcon(name) || name;
+        } else {
+            icon = name.indexOf('<svg') === 0 || name.indexOf('http') === 0
+                ? name
+                : this.props.ui.getIcon(this.props.name);
+
+            if (_isObject(icon) && _isString(icon.default)) {
+                icon = icon.default;
+            }
+
+            // Fix width attribute in icon
+            if (_isString(icon) && icon.indexOf('<svg') === 0) {
+                const match = icon.match(/<svg([^>]+)/);
+                if (match && match[0].indexOf('width') === -1) {
+                    icon = icon.replace(match[0], match[0] + ' width=16');
+                }
+            }
+
+            if (!icon) {
+                throw new Error('Not found icon with name "' + name + '"');
+            }
+        }
+
+        return (
+            <IconView
+                {...this.props}
+                icon={icon}
+            />
+        );
+    }
+}

package/ui/icon/Icon/demo/icon.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import '@fortawesome/fontawesome-free/js/all.min'
+
+import Icon from '../Icon';
+import fontAwesomeIcons from "@steroidsjs/bootstrap/icon/fontawesome";
+
+type IconState = {
+    selectedIcons: any
+};
+
+export default class extends React.PureComponent<{}, IconState> {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selectedIcons: null,
+        };
+    }
+
+    renderIcons(icons) {
+        return (
+            <div className='row'>
+                {icons.map((iconName, index) => {
+                    return (
+                        <div className='col-md-1 p-3' key={index}>
+                            <div>
+                                <Icon
+                                    name={iconName}
+                                />
+                            </div>
+                            <div style={{padding: '20px', textAlign: 'center'}}>{iconName}</div>
+                        </div>
+                    );
+                })}
+            </div>
+        )
+    }
+
+    renderSelectIcons(icons) {
+        if (!this.state.selectedIcons) {
+            return this.renderIcons(icons)
+        }
+        return this.renderIcons(this.state.selectedIcons);
+    }
+
+    render() {
+        const icons = Object.keys(fontAwesomeIcons);
+        return (
+            <>
+                <input
+                    className='form-control'
+                    onChange={(event) => {
+                        const value = event.target.value;
+                        if (value.length === 0) {
+                            this.setState({selectedIcons: null})
+                            return
+                        }
+                        const selectedIcons = icons.filter(iconName => {
+                            return iconName.indexOf(value) === 0;
+                        })
+                        this.setState({selectedIcons: selectedIcons})
+                    }}
+                />
+
+                {this.renderSelectIcons(icons)}
+            </>
+        );
+    }
+}

package/ui/icon/Icon/index.ts

@@ -0,0 +1,2 @@
+import Icon from "./Icon";
+export default Icon;

package/ui/layout/Header/Header.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {components, theme} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IBemHocOutput} from '../../../hoc/bem';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {INavProps} from '../../nav/Nav/Nav';
+import {IThemeHocInput} from '../../../hoc/theme';
+
+export interface IHeaderProps extends IThemeHocInput {
+    className?: CssClassName;
+    view?: any;
+    logo?: {
+        title: string,
+        linkProps?: object,
+        icon?: string | any,
+        className?: CssClassName,
+    };
+    nav?: INavProps;
+    [key: string]: any;
+}
+
+export interface IHeaderViewProps extends IHeaderProps, IBemHocOutput {
+}
+
+interface IHeaderPrivateProps extends IConnectHocOutput, IComponentsHocOutput {
+
+}
+
+@theme()
+@components('ui')
+export default class Header extends React.PureComponent<IHeaderProps & IHeaderPrivateProps> {
+
+    render() {
+        const HeaderView = this.props.view || this.props.ui.getView('layout.HeaderView');
+        return (
+            <HeaderView {...this.props}/>
+        );
+    }
+
+}

package/ui/layout/Header/index.ts

@@ -0,0 +1,2 @@
+import Header from './Header';
+export default Header;

package/ui/layout/Loader/Loader.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {components, theme} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface ILoaderProps {
+    view?: any;
+    [key: string]: any;
+}
+
+interface ILoaderPrivateProps extends IComponentsHocOutput {
+
+}
+
+@theme()
+@components('ui')
+export default class Loader extends React.PureComponent<ILoaderProps & ILoaderPrivateProps> {
+
+    render() {
+        const LoaderView = this.props.view || this.props.ui.getView('layout.LoaderView');
+        return <LoaderView {...this.props} />;
+    }
+
+}

package/ui/layout/Loader/index.ts

@@ -0,0 +1,2 @@
+import Loader from './Loader';
+export default Loader;

package/ui/layout/Notifications/Notifications.tsx

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import {components, theme} from '../../../hoc';
+import {
+    setFlashes,
+    closeNotification
+} from '../../../actions/notifications';
+import {getNotifications, getPosition} from '../../../reducers/notifications';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import _orderBy from 'lodash-es/orderBy';
+
+interface INotificationItem {
+    id?: number,
+
+    /**
+     * Цвет всплывающего уведомления
+     * @example warning
+     */
+    level?: ColorName,
+
+    /**
+     * Сообщение во всплывающем уведомлении
+     * @example Сохранено!
+     */
+    message?: string,
+    isClosing?: boolean
+}
+
+export interface INotificationsProps {
+    initialFlashes?: {
+        [key: string]: string | any,
+    };
+    notifications?: INotificationItem[];
+    closeTimeoutMs?: number;
+    className?: CssClassName;
+    view?: any;
+    itemView?: any;
+    position?: string;
+    [key: string]: any;
+}
+
+export interface INotificationsViewProps {
+    notifications?: INotificationItem[];
+    className?: CssClassName;
+    position: string;
+}
+
+export interface INotificationsItemViewProps extends INotificationItem {
+    isClosing: boolean;
+    onClose: () => void;
+    position: string;
+}
+
+interface INotificationsPrivateProps extends IConnectHocOutput, IComponentsHocOutput {
+
+}
+
+interface INotificationsState  {
+    notifications: INotificationItem[];
+    closing: INotificationItem[];
+    position: string;
+}
+
+@connect(state => ({
+    notifications: getNotifications(state),
+    position: getPosition(state)
+}))
+@theme()
+@components('ui')
+export default class Notifications extends React.PureComponent<INotificationsProps & INotificationsPrivateProps, INotificationsState> {
+
+    static defaultProps = {
+        closeTimeoutMs: 1500,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            notifications: [].concat(this.props.notifications),
+            closing: [],
+            position: this.props.position
+        };
+    }
+
+    componentDidMount() {
+        if (this.props.initialFlashes) {
+            this.props.dispatch(setFlashes(this.props.initialFlashes));
+
+            // Disable scroll or scroll to top on show notifications
+            if ('scrollRestoration' in history) {
+                history.scrollRestoration = 'manual';
+            } else {
+                setTimeout(() => window.scrollTo(0, 0), 1000);
+            }
+        }
+    }
+
+    componentDidUpdate(prevProps: INotificationsProps & INotificationsPrivateProps) {
+        if (prevProps.notifications !== this.props.notifications) {
+            const propsIds: number[] = this.props.notifications.map(item => item.id);
+            const toClose: INotificationItem[] = this.state.notifications.filter(item => !propsIds.includes(item.id));
+
+            this.setState({
+                notifications: [].concat(this.props.notifications),
+                closing: this.state.closing.concat(this.state.notifications.filter(item => !propsIds.includes(item.id))),
+            });
+
+            if (toClose.length > 0) {
+                setTimeout(() => {
+                    this.setState({
+                        closing: (this.state.closing).filter(item => !toClose.includes(item)),
+                    });
+                }, this.props.closeTimeoutMs);
+            }
+        }
+    }
+
+    render() {
+        const NotificationsView = this.props.view || this.props.ui.getView('layout.NotificationsView');
+        const NotificationsItemView = this.props.itemView || this.props.ui.getView('layout.NotificationsItemView');
+
+        const closingIds = this.state.closing.map(item => item.id);
+        const notifications = _orderBy([].concat(this.state.notifications).concat(this.state.closing),['id'],'asc') ;
+
+        return (
+            <NotificationsView {...this.props}>
+                {notifications.map(notification => (
+                    <NotificationsItemView
+                        {...notification}
+                        key={notification.id}
+                        position={notification.position}
+                        isClosing={closingIds.includes(notification.id)}
+                        onClose={this._onClose.bind(this, notification.id)}
+                    />
+                ))}
+            </NotificationsView>
+        );
+    }
+
+    _onClose(notificationId) {
+        this.props.dispatch(closeNotification(notificationId));
+    }
+}

package/ui/layout/Notifications/demo/basic.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import Notifications from '../Notifications';
+import Button from '../../../form/Button';
+import {showNotification} from '../../../../actions/notifications';
+import {connect} from '../../../../hoc';
+import {IConnectHocOutput} from '../../../../hoc/connect';
+
+
+@connect()
+export default class NotificationsDemo extends React.PureComponent<IConnectHocOutput> {
+
+    render() {
+        const notifications = {
+            primary: 'Primary notification',
+            secondary: 'Secondary notification',
+            success: 'Success notification',
+            danger: 'Danger notification',
+            warning: 'Warning notification',
+            info: 'Info notification',
+            light: 'Light notification',
+            dark: 'Dark notification',
+        };
+
+        return (
+            <div
+                style={{
+                    width: '30%',
+                    display: 'flex',
+                    flexFlow: 'column'
+                }}
+            >
+                {Object.keys(notifications).map((level: string) => (
+                    [].concat(notifications[level] || [])
+                        .map(message => (
+                            <Button
+                                key={level}
+                                color={level}
+                                label={__(`Уведомление типа "${level}"`)}
+                                onClick={() => this.props.dispatch(showNotification(message, level))}
+                                style={{  margin: '10px 0' }}
+                            />
+                            ))
+                ))}
+            </div>
+        );
+    }
+}

package/ui/layout/Notifications/index.ts

@@ -0,0 +1,2 @@
+import Notifications from './Notifications';
+export default Notifications;

package/ui/layout/Portal.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import {createPortal} from 'react-dom';
+import {components} from '../../hoc';
+import {IComponentsHocOutput} from '../../hoc/components';
+
+
+@components('ui')
+export default class Portal extends React.PureComponent<IComponentsHocOutput> {
+    el: HTMLDivElement;
+
+    constructor(props) {
+        super(props);
+
+        this.el = document.createElement('div');
+        this.el.className = 'Portal';
+    }
+
+    componentDidMount() {
+        document.body.appendChild(this.el);
+        this.props.ui.setPortalElement(this.el);
+    }
+
+    componentWillUnmount() {
+        this.props.ui.setPortalElement(null);
+        document.body.removeChild(this.el);
+    }
+
+    render() {
+        return createPortal(this.props.children, this.el);
+    }
+}