diginet-core-ui 1.4.39 → 1.4.40

package/src/icons/menu/v2/index.js

@@ -0,0 +1,77 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-empty */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { classNames } from 'utils';
+
+const IconMenu = memo(
+    forwardRef(({ action, className, height, id, name, style, type, width }, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const ref = useRef(null);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const getResourceImage = fileName => {
+            let icon = require('../../../assets/images/menu/dhr/Default.svg');
+            try {
+                icon = require('../../../assets/images/menu/' + `${type}/` + fileName);
+            } catch (e) {}
+            return icon;
+        };
+
+        return useMemo(
+            () => (
+                <img
+                    ref={ref}
+                    id={id}
+                    className={classNames('DGN-UI-IconMenu', className)}
+                    style={style}
+                    src={getResourceImage(name + '.svg')}
+                    width={width}
+                    height={height}
+                    alt={name}
+                />
+            ),
+            [className, height, id, name, style, type, width]
+        );
+    })
+);
+
+IconMenu.defaultProps = {
+    className: '',
+    height: '100%',
+    name: 'Default',
+    type: 'dhr',
+    width: '100%',
+    style: {},
+};
+
+IconMenu.propTypes = {
+    /** Class for component. */
+    className: PropTypes.string,
+    /** Height of icon. */
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** Name of icon. */
+    name: PropTypes.string,
+    /** Menu type (DHR || ERP || BEM). */
+    type: PropTypes.oneOf(['dhr', 'erp', 'bem', 'eo']),
+    /** Width of icon. */
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** Style inline of component. */
+    style: PropTypes.object,
+};
+
+export default IconMenu;

package/src/icons/menu/v2/index.stories.js

@@ -0,0 +1,426 @@
+import { Notify as AlertNotify, TextInput, Typography } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React, { Fragment, useState } from 'react';
+import IconMenu from '.';
+
+AlertNotify.displayName = 'Notify';
+TextInput.displayName = 'TextInput';
+Typography.displayName = 'Typography';
+
+export default {
+    title: 'Icon/Menu',
+    component: IconMenu,
+};
+
+const styles = {
+    container: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+        gridTemplateRows: 'repeat(auto-fit, minmax(140px, 1fr))',
+    },
+    type: {
+        margin: '10px 25px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        height: 100,
+    },
+    title: {
+        wordBreak: 'break-word',
+        textAlign: 'center',
+    },
+    content: {
+        margin: '10px 30px',
+        width: '38px',
+        cursor: 'copy',
+    },
+};
+
+const iconDHR = [
+    'Default',
+    'MAHR21N0000',
+    'MAHR29N0001',
+    'MAHR29N0002',
+    'MAHR29N0003',
+    'MAHR29N0004',
+    'MAHR29N0011',
+    'MAHR29N0012',
+    'MAHR29N0013',
+    'MAHR75N0005',
+    'MAHR75N0006',
+    'MAHR75N0007',
+    'MAHR75N0008',
+    'MAHR75N0009',
+    'MAHR75N0010',
+    'MAHR89N0014',
+    'MAHR89N0015',
+    'MHRM00N0001',
+    'MHRM00N0002',
+    'MHRM00N0003',
+    'MHRM00N0004',
+    'MHRM00N0005',
+    'MHRM00N0006',
+    'MHRM00N0007',
+    'MHRM09N0001',
+    'MHRM09N0002',
+    'MHRM09N0003',
+    'MHRM09N0004',
+    'MHRM09N0005',
+    'MHRM09N1010',
+    'MHRM09N1015',
+    'MHRM09N1020',
+    'MHRM09N1025',
+    'MHRM09N1030',
+    'MHRM09N1035',
+    'MHRM09N1040',
+    'MHRM09N1400',
+    'MHRM13N0001',
+    'MHRM13N0002',
+    'MHRM13N0003',
+    'MHRM13N0004',
+    'MHRM15N0001',
+    'MHRM25N0001',
+    'MHRM29N0001',
+    'MHRM29N0002',
+    'MHRM29N0003',
+    'MHRM29N0004',
+    'MHRM29N0005',
+    'MHRM29N0015',
+    'MHRM38N0001',
+    'MHRM38N0002',
+    'MHRM38N0003',
+    'MHRM39N0012',
+    'MHRM39N0013',
+    'MHRM39N0014',
+    'MHRM39N0015',
+    'MHRM39N0016',
+    'MHRM39N0017',
+    'MHRM39N0018',
+    'MHRM39N0019',
+    'MHRM39N0020',
+    'MHRM39N0021',
+    'MHRM39N0022',
+    'MHRM39N0023',
+    'MHRM51N0005',
+    'MHRM51N0006',
+    'MHRM51N0007',
+    'MHRM77N0001',
+    'MHRM77N0003',
+    'MHRM82N0001',
+    'MHRM82N0002',
+    'MHRM84N0001',
+    'MHRM84N0002',
+    'MHRM89N0001',
+    'MHRM89N0002',
+    'MHRP00N0001',
+    'MHRP09N0001',
+    'MHRP09N0002',
+    'MHRP09N0003',
+    'MHRP09N0004',
+    'MHRP09N0005',
+    'MHRP09N0006',
+    'MHRP09N0007',
+    'MHRP09N0008',
+    'MHRP09N0009',
+    'MHRP09N0010',
+    'MHRP09N0011',
+    'MHRP09N0012',
+    'MHRP09N0013',
+    'MHRP09N0014',
+    'MHRP09N0015',
+    'MHRP09N0016',
+    'MHRP09N0017',
+    'MHRP09N0018',
+    'MHRP09N0019',
+    'MHRP09N0020',
+    'MHRP09N0021',
+    'MHRP09N0022',
+    'MHRP09N0023',
+    'MHRP09N0024',
+    'MHRP09N0025',
+    'MHRP09N0026',
+    'MHRP09N0027',
+    'MHRP09N0028',
+    'MHRP09N0029',
+    'MHRP09N0030',
+    'MHRP09N0031',
+    'MHRP09N0032',
+    'MHRP09N0033',
+    'MHRP09N0034',
+    'MHRP09N0035',
+    'MHRP13N0001',
+    'MHRP13N0005',
+    'MHRP13N0006',
+    'MHRP15N0002',
+    'MHRP15N0003',
+    'MHRP21N0001',
+    'MHRP21N0002',
+    'MHRP25L0101',
+    'MHRP25L0501',
+    'MHRP25N0001',
+    'MHRP25N0002',
+    'MHRP25N0003',
+    'MHRP25N0004',
+    'MHRP25N0005',
+    'MHRP29N0001',
+    'MHRP29N0002',
+    'MHRP29N0003',
+    'MHRP29N0004',
+    'MHRP29N0005',
+    'MHRP29N0006',
+    'MHRP29N0007',
+    'MHRP29N0008',
+    'MHRP29N0009',
+    'MHRP29N0010',
+    'MHRP29N0011',
+    'MHRP29N0012',
+    'MHRP29N0013',
+    'MHRP29N0014',
+    'MHRP29N0016',
+    'MHRP29N0017',
+    'MHRP29N0018',
+    'MHRP29N0019',
+    'MHRP29N0020',
+    'MHRP29N0021',
+    'MHRP29N0022',
+    'MHRP29N0023',
+    'MHRP29N0026',
+    'MHRP29N0027',
+    'MHRP29N0028',
+    'MHRP29N0029',
+    'MHRP29N0030',
+    'MHRP38N0001',
+    'MHRP38N0002',
+    'MHRP39N0001',
+    'MHRP39N0002',
+    'MHRP39N0003',
+    'MHRP39N0004',
+    'MHRP39N0005',
+    'MHRP39N0006',
+    'MHRP39N0007',
+    'MHRP39N0008',
+    'MHRP39N0009',
+    'MHRP39N0010',
+    'MHRP39N0011',
+    'MHRP39N0013',
+    'MHRP39N0014',
+    'MHRP39N0015',
+    'MHRP39N0017',
+    'MHRP39N0018',
+    'MHRP39N0019',
+    'MHRP39N0020',
+    'MHRP39N0021',
+    'MHRP39N1222',
+    'MHRP51N0001',
+    'MHRP51N0002',
+    'MHRP51N0003',
+    'MHRP51N0004',
+    'MHRP52N0001',
+    'MHRP52N0002',
+    'MHRP52N0003',
+    'MHRP75N0001',
+    'MHRP75N0002',
+    'MHRP75N0003',
+    'MHRP75N0006',
+    'MHRP75N0007',
+    'MHRP75N0008',
+    'MHRP77N0007',
+    'MHRP77N0008',
+    'MHRP77N0009',
+    'MHRP77N0010',
+    'MHRP77N0011',
+    'MHRP89N1000',
+    'MHRP89N1001',
+    'W00F0001',
+    'W00F0002',
+    'W00F0003',
+    'W00F0004',
+    'W00F0005',
+    'W09F2000-WEB5',
+    'W09F2000',
+    'W09F2002-WEB5',
+    'W09F2005-WEB5',
+    'W09F2020-WEB5',
+    'W09F2022-WEB5',
+    'W09F2150-WEB5',
+    'W09F2152-WEB5',
+    'W09F2160-WEB5',
+    'W09F2162-WEB5',
+    'W29F4006-WEB5',
+    'W75F2260-WEB5',
+    'W75F2261-WEB5',
+    'W75F3005-WEB5',
+    'W75F4070-WEB5',
+    'W75F4071-WEB5',
+    'W75F4100-WEB5',
+    'W77F1011',
+    'W77F1013',
+    'TASK',
+    'ALL',
+    'D00',
+    'D09',
+    'D13',
+    'D15',
+    'D21',
+    'D25',
+    'D29',
+    'D38',
+    'D39',
+    'D51',
+    'D52',
+    'D77',
+    'D84',
+    'D89',
+];
+
+const iconERP = [
+    'D05',
+    'D06',
+    'D90R',
+    'DBC',
+    'W00F0001',
+    'W00F0002',
+    'W00F0003',
+    'W00F0004',
+    'W05F0001',
+    'W05F0001N0000',
+    'W05F0004N0000',
+    'W05F0006N0000',
+    'W05F0007N0000',
+    'W05F0008N0000',
+    'W05F0011N0000',
+    'W05F0013N0000',
+    'W05F4000N0000',
+    'W06F0001',
+    'W06F0001N0000',
+    'W06F0004N0000',
+    'W06F0005N0000',
+    'W06F0006N0000',
+    'W06F0008N0000',
+    'W94F1000N0000',
+    'W94F1000N0001',
+    'WA3F1025',
+    'WA3F2100',
+];
+
+const iconBEM = ['WA3F0100', 'WA3F1025', 'WA3F2000', 'WA3F2020', 'WA3F2030', 'WA3F2040', 'WA3F2100'];
+
+const iconEO = [
+    'W00F0001',
+    'W00F0002',
+    'W00F0003',
+    'W00F0004',
+    'WEO76APP0001',
+    'WEO76APP0002',
+    'WEO76LIS0001',
+    'WEO76LIS0002',
+    'WEO76LIS0003',
+    'WEO76LIS0004',
+    'WEO76LIS0005',
+    'WEO76LIS0006',
+    'WEO76LIS0007',
+    'WEO76REQ0001',
+    'WEO76REQ0002',
+    'WEO76REQ0003',
+    'WEO76TRA0001',
+    'WTM76ACC0001',
+    'WTM76INF0001',
+    'WTM76PRO0001',
+    'WTM76SYS0001',
+];
+
+const iconMap = new Map([
+    ['dhr', iconDHR],
+    ['erp', iconERP],
+    ['bem', iconBEM],
+    ['eo', iconEO],
+]);
+
+const onclick = (type, key, cb) => {
+    const temp_input = document.createElement('input');
+    temp_input.value = `<IconMenu type={'${type}'} name={${key}} />`;
+    document.body.appendChild(temp_input);
+    temp_input.select();
+    temp_input.setSelectionRange(0, 99999);
+    document.execCommand('copy');
+    temp_input.remove();
+    !!cb && cb();
+};
+
+const Template = args => {
+    const [search, setSearch] = useState('');
+    const pattern = new RegExp(search, 'i');
+    let Notify = null;
+    const listIcon = iconMap.get(args.type);
+    return (
+        <>
+            <ImportComp components={'IconMenu'} from={'icons/menu/v2'} importDefault />
+            <div>
+                <div style={styles.type}>
+                    <div
+                        style={styles.content}
+                        onClick={() => onclick(args.type, args.name, () => Notify(`Đã copy icon ${args.name}`))}
+                    >
+                        <IconMenu {...args} />
+                    </div>
+                    <Typography type={'h3'} color={'primary'} style={styles.title}>
+                        {args.name}
+                    </Typography>
+                </div>
+                <div>
+                    <TextInput
+                        icon={'search'}
+                        variant={'box'}
+                        label={'Tìm kiếm'}
+                        placeholder={'Nhập tên icon'}
+                        onChange={e => setSearch(e.target.value)}
+                    />
+                </div>
+                <div style={styles.container}>
+                    {listIcon.map((key, index) => {
+                        if (pattern.test(key)) {
+                            return (
+                                <Fragment key={index}>
+                                    <div style={styles.type}>
+                                        <div
+                                            style={styles.content}
+                                            onClick={() => onclick(args.type, key, () => Notify(`Đã copy ${key} icon`))}
+                                        >
+                                            <IconMenu name={key} type={args.type} />
+                                        </div>
+                                        <Typography type={'h3'} color={'primary'} style={styles.title}>
+                                            {key}
+                                        </Typography>
+                                    </div>
+                                </Fragment>
+                            );
+                        }
+                        return null;
+                    })}
+                </div>
+                <AlertNotify getAddNotify={func => (Notify = func)} progressing={true} autoDisappear={true} />
+            </div>
+        </>
+    );
+};
+
+export const DHR = Template.bind({});
+DHR.args = {
+    type: 'dhr',
+};
+
+export const ERP = Template.bind({});
+ERP.args = {
+    type: 'erp',
+};
+
+export const BEM = Template.bind({});
+BEM.args = {
+    type: 'bem',
+};
+
+export const EO = Template.bind({});
+EO.args = {
+    type: 'eo',
+};

package/src/locale/index.js

@@ -0,0 +1,13 @@
+import GlobalObject from '../global';
+
+const locale = {
+    get: () => {
+        const language = GlobalObject.language === 'en' ? 'en' : 'vi';
+        return language;
+    },
+    set: (language) => {
+        GlobalObject.language = language;
+    }
+}
+
+export default locale;

package/src/scss/styles.scss

@@ -0,0 +1,10 @@
+html *
+{
+  color: #000 !important;
+  font-family: "SF Pro Display", Arial, sans-serif;
+  font-size: 16px;
+}
+
+b {
+    font-weight: bold !important;
+}