diginet-core-ui 1.4.39 → 1.4.40

package/src/components/image/index.js

@@ -0,0 +1,191 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx, keyframes } from '@emotion/core';
+import ImageDefault from 'assets/image/default.png';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import {
+    animation,
+    aspectSquare,
+    borderRadius,
+    displayInlineFlex,
+    itemsCenter,
+    objectFit,
+    overflowHidden,
+    parseWidthHeight,
+    positionRelative,
+} from 'styles/general';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, useIntersection } from 'utils';
+
+const blurKeyframe = keyframes`
+    0% { -webkit-filter: blur(4px);}
+    25% { -webkit-filter: blur(3px);}
+    50% { -webkit-filter: blur(2px);}
+    75% { -webkit-filter: blur(1px);}
+    100% { -webkit-filter: blur(0px);}
+`;
+
+const Image = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Image' });
+        const {
+            action = {},
+            alt,
+            circular,
+            className,
+            defaultSrc: defaultSrcProp,
+            height,
+            id,
+            lazyLoading,
+            objectFit,
+            onError,
+            square,
+            src,
+            style,
+            width,
+        } = props;
+
+        const defaultSrc = defaultSrcProp || ImageDefault;
+
+        const ref = useRef(null);
+
+        const [srcState, setSrcState] = useState(src);
+        const [isInView, setIsInView] = useState(false);
+        const [onLoaded, setOnLoaded] = useState(false);
+
+        useIntersection(ref, () => {
+            setIsInView(true);
+        });
+
+        const _ImageCSS = ImageCSS(width, height, circular);
+        const _DefaultImgCSS = DefaultImgCSS(objectFit, square);
+        const _ImgCSS = ImgCSS(objectFit, square);
+
+        useEffect(() => {
+            if (src) {
+                if (isInView || !lazyLoading) {
+                    const img = document.createElement('img');
+                    img.src = src;
+                    img.alt = '';
+                    img.onerror = () => {
+                        setSrcState(defaultSrc);
+                        onError?.();
+                    };
+                    img.onload = () => {
+                        setSrcState(src);
+                    };
+                }
+            }
+            return () => {
+                setSrcState(defaultSrc);
+            };
+        }, [src]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const renderImage = useMemo(() => {
+            const defaultImage = (
+                <img css={_DefaultImgCSS} draggable={false} src={defaultSrc} alt={''} width={width} height={height} />
+            );
+            const image = (
+                <Fragment>
+                    {!onLoaded && defaultImage}
+                    {srcState && (
+                        <img
+                            css={_ImgCSS}
+                            draggable={false}
+                            src={srcState}
+                            alt={alt || srcState}
+                            onLoad={() => setOnLoaded(true)}
+                            width={width}
+                            height={height}
+                        />
+                    )}
+                </Fragment>
+            );
+            if (lazyLoading) {
+                return isInView ? image : defaultImage;
+            } else return image;
+        }, [alt, defaultSrc, height, isInView, lazyLoading, onLoaded, srcState, width, objectFit, square]);
+
+        return (
+            <div ref={ref} css={_ImageCSS} id={id} className={classNames('DGN-UI-Image', className)} style={style}>
+                {renderImage}
+            </div>
+        );
+    })
+);
+
+const ImageCSS = (width, height, circular) => css`
+    ${displayInlineFlex};
+    ${positionRelative};
+    ${itemsCenter};
+    ${overflowHidden};
+    ${parseWidthHeight(width, height)};
+    ${circular && borderRadius('50%')};
+`;
+
+const DefaultImgCSS = (objectFitValue, square) => css`
+    ${objectFit(objectFitValue)};
+    ${square && aspectSquare};
+`;
+
+const ImgCSS = (objectFitValue, square) => css`
+    ${objectFit(objectFitValue)};
+    ${animation({ keyframes: blurKeyframe, duration: '1s' })};
+    ${square && aspectSquare};
+`;
+
+// Image.defaultProps = {
+//     circular: false,
+//     className: '',
+//     height: 200,
+//     lazyLoading: false,
+//     objectFit: 'cover',
+//     style: {},
+//     width: 200,
+// };
+
+Image.propTypes = {
+    /** Description of the image. */
+    alt: PropTypes.string,
+    /** If `true`, the image is displayed in a circular shape. */
+    circular: PropTypes.bool,
+    /** CSS class for the component. */
+    className: PropTypes.string,
+    /** Default image source to display when the specified source encounters an error. */
+    defaultSrc: PropTypes.string,
+    /** Height of the component. */
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** If `true`, enables lazy loading of the image. */
+    lazyLoading: PropTypes.bool,
+    /** Object-fit property for the image. */
+    objectFit: PropTypes.oneOf(['contain', 'cover', 'fill', 'none']),
+    /** Callback function fired when an error occurs while loading the image. */
+    onError: PropTypes.func,
+    /** If `true`, the image is displayed in a square shape. */
+    square: PropTypes.bool,
+    /** Path of the image source. */
+    src: PropTypes.string,
+    /** Inline style object for the component. */
+    style: PropTypes.object,
+    /** Width of the component. */
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+export { Image };
+export default OptionWrapper(Image);

package/src/components/image/index.stories.js

@@ -0,0 +1,53 @@
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+import { useTheme } from 'theme';
+import { refArgTypes } from 'utils/storybook';
+import { Image } from '.';
+
+const theme = useTheme();
+Image.defaultProps = theme?.components?.Image?.defaultProps || {};
+
+export default {
+    title: 'Components/Image',
+    component: Image,
+    parameters: {
+        componentSubtitle: 'Displays an image that represents a user or organization',
+    },
+    argTypes: {
+        ref: refArgTypes(),
+    },
+};
+
+const Template = args => {
+    return (
+        <>
+            <ImportComp components={'Image'} />
+            <Image {...args} />
+        </>
+    );
+};
+
+const Template2 = args => {
+    return (
+        <>
+            <ImportComp components={'Image'} />
+            {[...Array(200).keys()].map((_, idx) => {
+                return <Image key={idx} {...args} src={`https://via.placeholder.com/1200x1200&text=image${idx}`} />;
+            })}
+        </>
+    );
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+    defaultSrc: 'https://diginet.com.vn/wp-content/uploads/2020/05/oops-2.png',
+    src: 'https://diginet.com.vn/wp-content/uploads/2020/04/Group-18.png',
+};
+
+export const LazyLoading = Template2.bind({});
+LazyLoading.parameters = { controls: { exclude: ['src'] } };
+LazyLoading.args = {
+    width: 100,
+    height: 100,
+    lazyLoading: true,
+};

package/src/components/index.js

@@ -0,0 +1,157 @@
+import * as components from '.';
+
+//TOOLTIP
+export { default as Tooltip } from './tooltip/index';
+
+//TEXT
+export { default as Typography } from './typography';
+
+// PROGRESS
+export { default as CircularProgress } from './progress/circular';
+export { default as LinearProgress } from './progress/linear';
+
+// ACCORDION
+export { default as Accordion } from './accordion';
+export { default as AccordionSummary } from './accordion/summary';
+export { default as AccordionDetails } from './accordion/details';
+export { default as AccordionGroup } from './accordion/group';
+
+// ALERT
+export { default as Alert } from './alert';
+export { default as Notify } from './alert/notify';
+
+// AVATAR
+export { default as Avatar } from './avatar';
+
+// BADGE
+export { default as Badge } from './badge';
+
+// BUTTON
+export { default as Button } from './button';
+export { default as ButtonIcon } from './button/icon';
+export { default as ButtonMore } from './button/more';
+
+// BREADCRUMB
+export { default as Breadcrumb } from './breadcrumb';
+
+// CARD
+export { default as Card } from './card';
+export { default as CardHeader } from './card/header';
+export { default as CardBody } from './card/body';
+export { default as CardFooter } from './card/footer';
+export { default as CardExtra } from './card/extra';
+
+// CHART
+export { default as PieChart } from './chart/Pie';
+export { default as ColumnChart } from './chart/bar';
+export { default as LineChart } from './chart/line';
+
+// CHECK-TEXT
+export { default as CheckTextConfirmation } from './check-text/interview-confirmation';
+export { default as CheckTextStatus } from './check-text/interview-status';
+
+// CHIP
+export { default as Chip } from './chip';
+export { default as AttachChip } from './chip/attach';
+
+// COLLAPSE
+export { default as Collapse } from './collapse';
+
+// DIVIDER
+export { default as Divider } from './divider';
+
+// FORM CONTROL
+export { default as Attachment } from './form-control/attachment';
+export { default as Checkbox } from './form-control/checkbox';
+export { default as DateInput } from './form-control/date-input';
+export { default as DatePicker } from './form-control/date-picker';
+export { default as DatePickerV2 } from './form-control/date-picker';
+export { default as DateRangePicker } from './form-control/date-range-picker';
+export { default as TimePicker } from './form-control/time-picker/v2';
+export { default as Dropdown } from './form-control/dropdown';
+export { default as DropdownBox } from './form-control/dropdown-box';
+export { default as FormGroup } from './form-control/form-group';
+export { default as Radio } from './form-control/radio';
+export { default as InputBase } from './form-control/input-base';
+export { default as Label } from './form-control/label';
+export { default as HelperText } from './form-control/helper-text';
+export { default as PasswordInput } from './form-control/password-input';
+export { default as TextInput } from './form-control/text-input';
+export { default as MoneyInput } from './form-control/money-input';
+export { default as NumberInput } from './form-control/number-input/index2';
+export { default as Toggle } from './form-control/toggle';
+
+// Grid
+export { default as Grid } from './grid';
+export { default as Row } from './grid/Row';
+export { default as Col } from './grid/Col';
+export { default as Container } from './grid/Container';
+
+//Icon
+export { default as Icon } from '../icons/index';
+
+//Image
+export { default as Image } from './image';
+
+// List
+export { default as List } from './list/list';
+export { default as ListItem } from './list/list-item';
+export { default as ListItemIcon } from './list/list-item-icon';
+export { default as ListItemText } from './list/list-item-text';
+export { default as ListItemAction } from './list/list-item-action';
+
+// MODAL
+export { default as ModalSample } from './modal';
+export { default as Modal } from './modal/modal';
+export { default as ModalHeader } from './modal/header';
+export { default as ModalBody } from './modal/body';
+export { default as ModalFooter } from './modal/footer';
+
+// PAGING
+export { default as PagingInfo } from './paging/page-info';
+export { default as PagingSelector } from './paging/page-selector';
+
+// PAPER
+export { default as Paper } from './paper';
+
+// POPOVER
+export { default as Popover } from './popover';
+export { default as PopoverHeader } from './popover/header';
+export { default as PopoverBody } from './popover/body';
+export { default as PopoverFooter } from './popover/footer';
+
+// POPUP
+export { default as Popup } from './popup/v2';
+export { default as PopupV2 } from './popup/v2';
+export { default as DangerPopup } from './popup/danger_popup';
+
+// SLIDER
+export { default as Slider } from './slider/slider-container';
+export { default as SliderItem } from './slider/slider-item';
+
+// Rating
+export { default as Rating } from './rating';
+
+// STATUS
+export { default as Status } from './status';
+
+// TAB
+export { default as TabContainer } from './tab/tab-container';
+export { default as TabHeader } from './tab/tab-header';
+export { default as TabPanel } from './tab/tab-panel';
+export { default as TabItem } from './tab/tab';
+
+// TREE VIEW
+export { default as Transfer } from './transfer';
+
+// TREE VIEW
+export { default as TreeView } from './tree-view';
+
+// OTHERS
+export { default as Extra } from './others/extra';
+export { default as ScrollBar } from './others/scrollbar';
+
+//SKELETON
+export { default as Skeleton } from './skeleton';
+
+export default components;

package/src/components/list/index.stories.js

@@ -0,0 +1,261 @@
+import React, { useState } from 'react';
+import List from './list';
+import ListSubHeader from './sub-header';
+import ListItem from './list-item';
+import ListItemText from './list-item-text';
+import ListItemIcon from './list-item-icon';
+import ListItemAction from './list-item-action';
+import { Divider, Checkbox, Toggle, Collapse as CollapseComp } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+
+export default {
+    title: 'Components/List',
+    component: List,
+    subcomponents: { List, ListSubHeader, ListItem, ListItemText, ListItemIcon, ListItemAction },
+};
+
+const styles = {
+    container: {
+        display: 'grid',
+        fontFamily: 'sans-serif',
+        fontWeight: 700,
+        fontSize: '16px',
+        color: '#111D5E',
+        backgroundColor: 'gray',
+        gridGap: '5px',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
+        gridTemplateRows: 'repeat(auto-fit, minmax(100px, 1fr))',
+        alignItems: 'center',
+        textAlign: 'center',
+        justifyItems: 'center',
+    },
+    type: {
+        margin: '10px 50px',
+    },
+    title: {
+        fontSize: '16px',
+        marginTop: '10px',
+        minWidth: 100,
+        wordBreak: 'break-word',
+    },
+    content: {
+        display: 'contents',
+        margin: '10px 30px',
+        width: '300px',
+        justifyContent: 'space-between',
+    },
+};
+
+const Template = args => (
+    <>
+        <ImportComp components={'List, ListSubHeader, ListItem, ListItemIcon, ListItemText, ListItemAction'} />
+        <List {...args}>
+            <ListSubHeader>This is list sub header</ListSubHeader>
+            <ListItem>
+                <ListItemIcon name={'Account'} />
+                <ListItemText>This is list item text</ListItemText>
+                <ListItemAction name={'Account'} />
+            </ListItem>
+            <Divider />
+            <ListItem>
+                <ListItemIcon name={'Account'} />
+                <ListItemText>This is list item text</ListItemText>
+                <ListItemAction name={'Account'} />
+            </ListItem>
+            <Divider />
+            <ListSubHeader>This is list sub header (level List)</ListSubHeader>
+            <List level={1}>
+                <ListItem>
+                    <ListItemIcon>
+                        <Checkbox />
+                    </ListItemIcon>
+                    <ListItemText>List level 1</ListItemText>
+                    <ListItemAction>
+                        <Toggle />
+                    </ListItemAction>
+                </ListItem>
+            </List>
+            <List level={2}>
+                <ListItem onClick={() => console.log('click item checkbox 2')}>
+                    <ListItemIcon>
+                        <Checkbox />
+                    </ListItemIcon>
+                    <ListItemText>List level 2</ListItemText>
+                    <ListItemAction>
+                        <Toggle />
+                    </ListItemAction>
+                </ListItem>
+            </List>
+            <List level={3}>
+                <ListItem onClick={() => console.log('click item checkbox 3')}>
+                    <ListItemIcon>
+                        <Checkbox />
+                    </ListItemIcon>
+                    <ListItemText>List level 3</ListItemText>
+                    <ListItemAction>
+                        <Toggle />
+                    </ListItemAction>
+                </ListItem>
+            </List>
+            <List level={4}>
+                <ListItem>
+                    <ListItemIcon>
+                        <Checkbox />
+                    </ListItemIcon>
+                    <ListItemText>List level 4</ListItemText>
+                    <ListItemAction>
+                        <Toggle />
+                    </ListItemAction>
+                </ListItem>
+            </List>
+            <List level={5}>
+                <ListItem>
+                    <ListItemIcon>
+                        <Checkbox />
+                    </ListItemIcon>
+                    <ListItemText>List level 5</ListItemText>
+                    <ListItemAction>
+                        <Toggle />
+                    </ListItemAction>
+                </ListItem>
+            </List>
+            <List level={4}>
+                <ListItem>
+                    <ListItemIcon>
+                        <Checkbox />
+                    </ListItemIcon>
+                    <ListItemText>List level 4</ListItemText>
+                    <ListItemAction>
+                        <Toggle />
+                    </ListItemAction>
+                </ListItem>
+            </List>
+            <List level={3}>
+                <ListItem>
+                    <ListItemIcon>
+                        <Checkbox />
+                    </ListItemIcon>
+                    <ListItemText>List level 3</ListItemText>
+                    <ListItemAction>
+                        <Toggle />
+                    </ListItemAction>
+                </ListItem>
+            </List>
+            <List level={2}>
+                <ListItem>
+                    <ListItemIcon>
+                        <Checkbox />
+                    </ListItemIcon>
+                    <ListItemText>List level 2</ListItemText>
+                    <ListItemAction>
+                        <Toggle />
+                    </ListItemAction>
+                </ListItem>
+            </List>
+            <List level={1}>
+                <ListItem>
+                    <ListItemIcon>
+                        <Checkbox />
+                    </ListItemIcon>
+                    <ListItemText>List level 1</ListItemText>
+                    <ListItemAction>
+                        <Toggle />
+                    </ListItemAction>
+                </ListItem>
+            </List>
+        </List>
+    </>
+);
+const Template2 = args => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <ImportComp components={'List, ListSubHeader, ListItem, ListItemIcon, ListItemText, ListItemAction'} />
+            <div style={styles.container}>
+                <div style={styles.type}>
+                    <div style={styles.content}>
+                        <List {...args}>
+                            <ListSubHeader>This is list sub header</ListSubHeader>
+                            <ListItem>
+                                <ListItemIcon name={'Account'} />
+                                <ListItemText>This is</ListItemText>
+                                <ListItemAction name={'ArrowDown'} />
+                            </ListItem>
+                            <Divider />
+                            <ListItem>
+                                <ListItemIcon name={'Account'} />
+                                <ListItemText>list item text</ListItemText>
+                                <ListItemAction name={'ArrowDown'} />
+                            </ListItem>
+                            <Divider />
+                            <ListItem>
+                                <ListItemText>List no icon</ListItemText>
+                                <ListItemAction name={'ArrowDown'} />
+                            </ListItem>
+                            <Divider />
+                            <ListItem inset>
+                                <ListItemText>List no icon + inset</ListItemText>
+                                <ListItemAction name={'ArrowDown'} />
+                            </ListItem>
+                            <Divider />
+                            <ListItem>
+                                <ListItemIcon name={'Account'} />
+                                <ListItemText>This is list item text</ListItemText>
+                                <ListItemAction name={'ArrowDown'} />
+                            </ListItem>
+                            <Divider />
+                            <ListItem onClick={() => setOpen(!open)} button>
+                                <ListItemIcon name={'Account'} />
+                                <ListItemText>This is list item text has onClick</ListItemText>
+                                <ListItemAction name={'ArrowDown'} />
+                            </ListItem>
+                            <CollapseComp open={open}>
+                                <List level={2}>
+                                    <ListItem>
+                                        <ListItemIcon>
+                                            <Checkbox />
+                                        </ListItemIcon>
+                                        <ListItemText>Collapse level 2 - 1</ListItemText>
+                                        <ListItemAction>
+                                            <Toggle />
+                                        </ListItemAction>
+                                    </ListItem>
+                                    <ListItem>
+                                        <ListItemIcon>
+                                            <Checkbox />
+                                        </ListItemIcon>
+                                        <ListItemText>Collapse level 2 - 2</ListItemText>
+                                        <ListItemAction>
+                                            <Toggle />
+                                        </ListItemAction>
+                                    </ListItem>
+                                    <ListItem>
+                                        <ListItemIcon>
+                                            <Checkbox />
+                                        </ListItemIcon>
+                                        <ListItemText>Collapse level 2 - 3</ListItemText>
+                                        <ListItemAction>
+                                            <Toggle />
+                                        </ListItemAction>
+                                    </ListItem>
+                                </List>
+                            </CollapseComp>
+                        </List>
+                    </div>
+                    <p style={styles.title}>scrollAble: {String(args.scrollAble || !!args.maxHeight)}</p>
+                    <p style={styles.title}>onClick: unset</p>
+                    <p style={styles.title}>disabled: false</p>
+                    <p style={styles.title}>readOnly: true</p>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export const Simple = Template.bind({});
+Simple.args = {
+    maxHeight: '300px',
+};
+
+export const Collapse = Template2.bind({});