diginet-core-ui 1.4.39 → 1.4.40

package/src/components/check-text/interview-confirmation.js

@@ -0,0 +1,169 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Typography } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import { useTheme } from 'theme';
+import { getProp } from 'utils';
+
+const color = ['semantic/warning', 'semantic/success', 'semantic/danger'];
+const colorNum = {
+    Yes: 0,
+    Maybe: 1,
+    No: 2,
+};
+
+const InterviewConfirmation = memo(
+    forwardRef(({ disabled, readOnly, chosen, onClick, onChoose }, ref) => {
+        if (!ref) {
+            ref = useRef(null);
+        }
+
+        const { colors } = useTheme();
+        const checkText = css`
+            display: inline-flex;
+            color: ${disabled ? getProp(colors, 'system/disabled') : getProp(colors, 'system/rest')};
+            div:nth-of-type(1):hover {
+                color: ${getProp(colors, color[0])};
+            }
+            div:nth-of-type(2):hover {
+                color: ${getProp(colors, color[1])};
+            }
+            div:nth-of-type(3):hover {
+                color: ${getProp(colors, color[2])};
+            }
+        `;
+        const checkTextItemText = css`
+            margin-left: 10px;
+        `;
+        const checkTextDivider = css`
+            margin: 2px 19px;
+            width: 2px;
+            height: 16px;
+            background: ${getProp(colors, 'system/rest')};
+            border-radius: 1px;
+        `;
+
+        const onClickItem = (e, index) => {
+            const clickedItem = ref.current.querySelectorAll('div');
+            if (readOnly || clickedItem[index].style.color) return;
+            clickedItem.forEach((el, i) => {
+                if (i === index) {
+                    const cl = color[index];
+                    el.style.color = getProp(colors, cl, cl);
+                } else if (el.style.color) {
+                    el.style.color = null;
+                }
+            });
+            e.selectedItem = {
+                value: e.target.textContent,
+                index,
+            };
+            if (onClick) onClick(e);
+            if (onChoose) onChoose(e);
+        };
+
+        useEffect(() => {
+            ref.current.querySelectorAll('div').forEach((el, i) => {
+                if (i === chosen || el.textContent === chosen) {
+                    const cl = color[isNaN(chosen) ? colorNum[chosen] : chosen];
+                    el.style.color = getProp(colors, cl, cl);
+                } else if (el.style.color) {
+                    el.style.color = null;
+                }
+            });
+        }, [chosen]);
+
+        return useMemo(
+            () => (
+                <div css={checkText} ref={ref}>
+                    <Typography
+                        type={'p2'}
+                        style={{
+                            lineHeight: '20px',
+                            color: `${disabled ? `${getProp(colors, 'system/disabled')} !important` : 'inherit'}`,
+                            cursor: `${readOnly ? 'default' : 'pointer'}`,
+                            pointerEvents: `${disabled ? 'none' : 'auto'}`,
+                            userSelect: 'none',
+                        }}
+                        mapping={'div'}
+                        onClick={e => onClickItem(e, 0)}
+                    >
+                        <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M4.57555 8.00004C4.39155 8.00004 4.21555 7.92404 4.08955 7.79004L0.847547 4.33738C0.594881 4.06938 0.608881 3.64738 0.876881 3.39538C1.14555 3.14338 1.56755 3.15671 1.81888 3.42471L4.56888 6.35204L10.1742 0.217377C10.4235 -0.0552893 10.8449 -0.0732893 11.1169 0.174711C11.3882 0.422711 11.4069 0.844711 11.1589 1.11604L5.06755 7.78271C4.94288 7.92004 4.76555 7.99871 4.58021 8.00004H4.57555Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                        <span css={checkTextItemText}>Yes</span>
+                    </Typography>
+                    <span css={checkTextDivider} />
+                    <Typography
+                        type={'p2'}
+                        style={{
+                            lineHeight: '20px',
+                            color: `${disabled ? `${getProp(colors, 'system/disabled')} !important` : 'inherit'}`,
+                            cursor: `${readOnly ? 'default' : 'pointer'}`,
+                            pointerEvents: `${disabled ? 'none' : 'auto'}`,
+                            userSelect: 'none',
+                        }}
+                        mapping={'div'}
+                        onClick={e => onClickItem(e, 1)}
+                    >
+                        <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M7.33335 4C7.33335 3.11594 6.98216 2.2681 6.35704 1.64298C5.73192 1.01786 4.88408 0.666666 4.00002 0.666666C3.11597 0.666666 2.26812 1.01786 1.643 1.64298C1.01788 2.2681 0.666687 3.11594 0.666687 4C0.666687 4.17681 0.736925 4.34638 0.861949 4.4714C0.986974 4.59643 1.15654 4.66667 1.33335 4.66667C1.51016 4.66667 1.67973 4.59643 1.80476 4.4714C1.92978 4.34638 2.00002 4.17681 2.00002 4C2.00002 3.60444 2.11732 3.21776 2.33708 2.88886C2.55684 2.55996 2.8692 2.30362 3.23465 2.15224C3.60011 2.00087 4.00224 1.96126 4.3902 2.03843C4.77816 2.1156 5.13453 2.30608 5.41423 2.58579C5.69394 2.86549 5.88442 3.22186 5.96159 3.60982C6.03876 3.99778 5.99915 4.39991 5.84778 4.76537C5.6964 5.13082 5.44006 5.44318 5.11116 5.66294C4.78226 5.8827 4.39558 6 4.00002 6C3.82321 6 3.65364 6.07024 3.52862 6.19526C3.40359 6.32029 3.33335 6.48986 3.33335 6.66667V8C3.33335 8.17681 3.40359 8.34638 3.52862 8.4714C3.65364 8.59643 3.82321 8.66667 4.00002 8.66667C4.17683 8.66667 4.3464 8.59643 4.47142 8.4714C4.59645 8.34638 4.66669 8.17681 4.66669 8V7.26667C5.4196 7.11298 6.09628 6.70388 6.58222 6.1086C7.06816 5.51332 7.33351 4.76843 7.33335 4Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M3.99998 11.3333C4.36817 11.3333 4.66665 11.0349 4.66665 10.6667C4.66665 10.2985 4.36817 10 3.99998 10C3.63179 10 3.33331 10.2985 3.33331 10.6667C3.33331 11.0349 3.63179 11.3333 3.99998 11.3333Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                        <span css={checkTextItemText}>Maybe</span>
+                    </Typography>
+                    <span css={checkTextDivider} />
+                    <Typography
+                        type={'p2'}
+                        style={{
+                            lineHeight: '20px',
+                            color: `${disabled ? `${getProp(colors, 'system/disabled')} !important` : 'inherit'}`,
+                            cursor: `${readOnly ? 'default' : 'pointer'}`,
+                            pointerEvents: `${disabled ? 'none' : 'auto'}`,
+                            userSelect: 'none',
+                        }}
+                        mapping={'div'}
+                        onClick={e => onClickItem(e, 2)}
+                    >
+                        <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M4.94271 3.99992L7.80471 1.13792C8.06538 0.87725 8.06538 0.455917 7.80471 0.19525C7.54405 -0.0654165 7.12271 -0.0654165 6.86205 0.19525L4.00004 3.05725L1.13804 0.19525C0.877378 -0.0654165 0.456045 -0.0654165 0.195378 0.19525C-0.0652888 0.455917 -0.0652888 0.87725 0.195378 1.13792L3.05738 3.99992L0.195378 6.86192C-0.0652888 7.12258 -0.0652888 7.54392 0.195378 7.80458C0.325378 7.93458 0.496045 7.99992 0.666711 7.99992C0.837378 7.99992 1.00804 7.93458 1.13804 7.80458L4.00004 4.94258L6.86205 7.80458C6.99205 7.93458 7.16271 7.99992 7.33338 7.99992C7.50405 7.99992 7.67471 7.93458 7.80471 7.80458C8.06538 7.54392 8.06538 7.12258 7.80471 6.86192L4.94271 3.99992Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                        <span css={checkTextItemText}>No</span>
+                    </Typography>
+                </div>
+            ),
+            []
+        );
+    })
+);
+
+InterviewConfirmation.propsTypes = {
+    /** Prevent all event if true */
+    disabled: PropTypes.bool,
+    /** the displayed chosen for each change */
+    chosen: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** The function will run to return a value of CheckText Component */
+    onClick: PropTypes.func,
+    /** The function will run to return a value of CheckText Component */
+    onChoose: PropTypes.func,
+};
+
+export default InterviewConfirmation;

package/src/components/check-text/interview-status.js

@@ -0,0 +1,142 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Typography } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import { useTheme } from 'theme';
+import { getProp } from 'utils';
+
+const color = ['semantic/warning', 'semantic/success', 'semantic/danger'];
+const colorNum = {
+    Scheduled: 0,
+    Started: 1,
+    Cancel: 2,
+};
+
+const InterviewStatus = memo(
+    forwardRef(({ disabled, readOnly, chosen, onClick, onChoose }, ref) => {
+        if (!ref) {
+            ref = useRef(null);
+        }
+        const { colors } = useTheme();
+        const checkText = css`
+            display: inline-flex;
+            color: ${disabled ? getProp(colors, 'system/disabled') : getProp(colors, 'system/rest')};
+            div:nth-of-type(1):hover {
+                color: ${getProp(colors, color[0])};
+            }
+            div:nth-of-type(2):hover {
+                color: ${getProp(colors, color[1])};
+            }
+            div:nth-of-type(3):hover {
+                color: ${getProp(colors, color[2])};
+            }
+        `;
+        const checkTextItemText = css`
+            margin-left: 10px;
+        `;
+        const checkTextDivider = css`
+            margin: 2px 19px;
+            width: 2px;
+            height: 16px;
+            background: ${getProp(colors, 'system/rest')};
+            border-radius: 1px;
+        `;
+
+        const onClickItem = (e, index) => {
+            const clickedItem = ref.current.querySelectorAll('div');
+            if (readOnly || clickedItem[index].style.color) return;
+            clickedItem.forEach((el, i) => {
+                if (i === index) {
+                    const cl = color[index];
+                    el.style.color = getProp(colors, cl, cl);
+                } else if (el.style.color) {
+                    el.style.color = null;
+                }
+            });
+            e.selectedItem = {
+                value: e.target.textContent,
+                index,
+            };
+            if (onClick) onClick(e);
+            if (onChoose) onChoose(e);
+        };
+
+        useEffect(() => {
+            ref.current.querySelectorAll('div').forEach((el, i) => {
+                if (i === chosen || el.textContent === chosen) {
+                    const cl = color[isNaN(chosen) ? colorNum[chosen] : chosen];
+                    el.style.color = getProp(colors, cl, cl);
+                } else if (el.style.color) {
+                    el.style.color = null;
+                }
+            });
+        }, [chosen]);
+
+        return useMemo(
+            () => (
+                <div css={checkText} ref={ref}>
+                    <Typography
+                        type={'p2'}
+                        style={{
+                            lineHeight: '20px',
+                            color: `${disabled ? `${getProp(colors, 'system/disabled')} !important` : 'inherit'}`,
+                            cursor: `${readOnly ? 'default' : 'pointer'}`,
+                            pointerEvents: `${disabled ? 'none' : 'auto'}`,
+                            userSelect: 'none',
+                        }}
+                        mapping={'div'}
+                        onClick={e => onClickItem(e, 0)}
+                    >
+                        <span css={checkTextItemText}>Scheduled</span>
+                    </Typography>
+                    <span css={checkTextDivider} />
+                    <Typography
+                        type={'p2'}
+                        style={{
+                            lineHeight: '20px',
+                            color: `${disabled ? `${getProp(colors, 'system/disabled')} !important` : 'inherit'}`,
+                            cursor: `${readOnly ? 'default' : 'pointer'}`,
+                            pointerEvents: `${disabled ? 'none' : 'auto'}`,
+                            userSelect: 'none',
+                        }}
+                        mapping={'div'}
+                        onClick={e => onClickItem(e, 1)}
+                    >
+                        <span css={checkTextItemText}>Started</span>
+                    </Typography>
+                    <span css={checkTextDivider} />
+                    <Typography
+                        type={'p2'}
+                        style={{
+                            lineHeight: '20px',
+                            color: `${disabled ? `${getProp(colors, 'system/disabled')} !important` : 'inherit'}`,
+                            cursor: `${readOnly ? 'default' : 'pointer'}`,
+                            pointerEvents: `${disabled ? 'none' : 'auto'}`,
+                            userSelect: 'none',
+                        }}
+                        mapping={'div'}
+                        onClick={e => onClickItem(e, 2)}
+                    >
+                        <span css={checkTextItemText}>Cancel</span>
+                    </Typography>
+                </div>
+            ),
+            []
+        );
+    })
+);
+
+InterviewStatus.propsTypes = {
+    /** Prevent all event if true */
+    disabled: PropTypes.bool,
+    /** the displayed chosen for each change */
+    chosen: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** The function will run to return a value of CheckText Component */
+    onClick: PropTypes.func,
+    /** The function will run to return a value of CheckText Component */
+    onChoose: PropTypes.func,
+};
+
+export default InterviewStatus;

package/src/components/chip/attach.js

@@ -0,0 +1,156 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { Fragment, memo, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import Chip from './';
+import { Pdf, Word, Sheet, Presentation, Image, Compressed, Another } from '../../icons';
+import { capitalize, getFileType, getProp } from '../../utils';
+import { ButtonIcon, ModalSample, Slider, SliderItem } from '../';
+import { useTheme } from 'theme';
+
+const FileTypeIcon = { Pdf, Word, Sheet, Presentation, Image, Compressed, Another };
+
+const AttachChip = memo(({ file, maxLength, onView, onDownload, onRemove, ...props }) => {
+    const moreActionRef = useRef(null);
+    const [open, setOpen] = useState(false);
+
+    const { colors } = useTheme();
+
+    const MoreAction = css`
+        display: none;
+        justify-content: space-evenly;
+        align-items: center;
+        position: absolute;
+        top: -34px;
+        right: -1px;
+        width: 120px;
+        height: 36px;
+        background: ${getProp(colors, 'system/standard')};
+        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        &.DGN-UI-Chip-show {
+            display: flex;
+        }
+    `;
+
+    const getStartIcon = () => {
+        const lastIndexOfDot = file.FileName?.lastIndexOf('.');
+        if (!lastIndexOfDot) return null;
+        const fileExt = file.FileName.slice(lastIndexOfDot + 1);
+        if (!fileExt) return null;
+        const fileType = getFileType(fileExt);
+        const FileIcon = FileTypeIcon[capitalize(fileType)];
+        return <FileIcon size={'small'} viewBox />;
+    };
+
+    const clickOutAction = event => {
+        if (!moreActionRef.current) {
+            document.removeEventListener('click', clickOutAction);
+            return;
+        }
+        if (!moreActionRef.current.contains(event.target)) {
+            moreActionRef.current.classList.remove('DGN-UI-Chip-show');
+            document.removeEventListener('click', clickOutAction);
+        }
+    };
+
+    const onShowMoreOption = () => {
+        if (!moreActionRef.current.classList.contains('DGN-UI-Chip-show')) {
+            moreActionRef.current.classList.add('DGN-UI-Chip-show');
+            setTimeout(() => {
+                document.addEventListener('click', clickOutAction);
+            }, 100);
+        }
+    };
+
+    const viewAction = (e, file) => {
+        if (onView) {
+            onView(e, file);
+        } else {
+            setOpen(true);
+        }
+    };
+
+    const downloadAction = (e, file = {}) => {
+        if (onDownload) onDownload(e, file);
+        else if (file.URL) {
+            fetch(file.URL)
+                .then(resp => resp.blob())
+                .then(blob => {
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.style.display = 'none';
+                    a.href = url;
+                    // the filename you want
+                    a.download = file.FileName;
+                    document.body.appendChild(a);
+                    a.click();
+                    window.URL.revokeObjectURL(url);
+                })
+                .catch(() => alert('File not found'));
+        }
+    };
+
+    const deleteAction = (e, file) => {
+        if (onRemove) onRemove(e, file);
+        setTimeout(() => {
+            if (moreActionRef.current && moreActionRef.current.parentNode) moreActionRef.current.parentNode.remove();
+        }, 0);
+    };
+
+    const renderLabel = label => {
+        if (maxLength && label && label.length > maxLength) {
+            label = label.slice(0, maxLength) + '...';
+        }
+        return label;
+    };
+
+    const attachView = useMemo(() => {
+        return (
+            <ModalSample open={open} title={file.FileName} onClose={() => setOpen(false)}>
+                <Slider>
+                    <SliderItem url={file.URL} />
+                </Slider>
+            </ModalSample>
+        );
+    }, [open]);
+
+    return (
+        <Fragment>
+            <Chip
+                {...props}
+                clearAble={false}
+                label={renderLabel(file.FileName)}
+                startIcon={getStartIcon()}
+                endIcon={<ButtonIcon viewType={'ghost'} name={'more'} size={'tiny'} onClick={onShowMoreOption} />}
+            >
+                <div css={MoreAction} ref={moreActionRef}>
+                    <ButtonIcon viewType={'ghost'} name={'view'} onClick={e => viewAction(e, file)} />
+                    <ButtonIcon viewType={'ghost'} name={'download'} onClick={e => downloadAction(e, file)} />
+                    <ButtonIcon viewType={'ghost'} name={'delete'} onClick={e => deleteAction(e, file)} />
+                </div>
+            </Chip>
+            {attachView}
+        </Fragment>
+    );
+});
+
+AttachChip.propTypes = {
+    /** the file info, such as:<br/>
+     * {<br/>
+     *  URL: https://url.com/pathname,<br/>
+     *  FileName: file.name,<br/>
+     * }
+     */
+    file: PropTypes.shape({
+        URL: PropTypes.string.isRequired,
+        FileName: PropTypes.string.isRequired,
+    }).isRequired,
+    /** max length content to display was allowed */
+    maxLength: PropTypes.number,
+    /** any props else of Chip component */
+    props: PropTypes.any,
+};
+
+export default AttachChip;