diginet-core-ui 1.4.14-beta.2 → 1.4.14-beta.3

package/theme/settings.js

@@ -1,8 +1,9 @@
 import { color } from "../styles/colors";
 import { font } from "../styles/font";
-import { getSpacing, setZIndex, zIndex } from "../styles/general";
 import { typography as typographies } from "../styles/typography";
-import createBreakpoints from "./createBreakpoints";
+import createTheme from "./createTheme";
+import locale from "../locale";
+import { getGlobal } from "../global";
 const {
   fontSize,
   fontFamily,
@@ -10,6 +11,8 @@ const {
   fontFamilyMedium,
   fontFamilySecurity
 } = font;
+delete color.lightMode;
+delete color.lightMode;
 const settings = {
   border: {
     radius: '4px',
@@ -23,7 +26,7 @@ const settings = {
     ...color,
     disabled: color.system.disabled,
     hover: color.fill.hover,
-    label: color.text.normal_label,
+    label: color.text.label,
     placeholder: color.text.sub,
     primary: color.system.active,
     secondary: color.system.rest,
@@ -52,7 +55,7 @@ const settings = {
     },
     ...typographies
   },
-  breakpoints: createBreakpoints({
+  breakpoints: {
     values: {
       xs: 0,
       // extra-small
@@ -64,10 +67,698 @@ const settings = {
       // large
       xl: 1536 // extra-large
     }
-  }),
+  },
 
-  spacing: vl => getSpacing(vl),
-  zIndex: vl => zIndex(vl),
-  setZIndex: vl => setZIndex(vl)
+  mode: 'light',
+  components: {
+    Accordion: {
+      defaultProps: {
+        boxShadow: true,
+        className: '',
+        disabled: false,
+        expand: false,
+        fullHeight: false,
+        style: {}
+      }
+    },
+    AccordionDetails: {
+      defaultProps: {
+        className: '',
+        id: '',
+        style: {}
+      }
+    },
+    AccordionGroup: {
+      defaultProps: {
+        className: '',
+        id: '',
+        style: {}
+      }
+    },
+    AccordionSummary: {
+      defaultProps: {
+        background: 'system/standard',
+        className: '',
+        expandIcon: 'ArrowRight',
+        expandIconAt: 'start',
+        expandIconProps: {},
+        style: {}
+      }
+    },
+    Alert: {
+      defaultProps: {
+        autoDisappear: false,
+        className: '',
+        clearAble: true,
+        color: 'semantic/info',
+        duration: 2000,
+        progressing: false,
+        size: 'medium'
+      }
+    },
+    Avatar: {
+      defaultProps: {
+        actionIconHeight: 24,
+        actionIconWidth: 24,
+        allowEdit: false,
+        className: '',
+        clearAble: true,
+        data: {},
+        direction: 'bottom',
+        disabled: false,
+        height: 48,
+        hoverAble: false,
+        lazyLoading: false,
+        matchType: /^image\/(gif|jpe?g|tiff?|png|webp|bmp|svg(\+xml)?)$/i,
+        maxSizeError: `File ${getGlobal(['errorDefault', 'maxSize'])}`,
+        outlined: false,
+        readOnly: false,
+        style: {},
+        width: 48,
+        wrongTypeError: `File ${getGlobal(['errorDefault', 'fileType'])}`
+      }
+    },
+    Attachment: {
+      defaultProps: {
+        allowSort: true,
+        className: '',
+        data: [],
+        deleteNotifyText: getGlobal('deleteNotifyText'),
+        disabled: false,
+        height: 280,
+        hintText: getGlobal('dropFileHere'),
+        label: getGlobal('attachText'),
+        maxSize: getGlobal('maxSizeUpload'),
+        maxFile: Infinity,
+        multiple: true,
+        style: {},
+        uploadErrorInfo: {
+          maxFile: getGlobal(['errorDefault', 'maxFile']),
+          maxSize: getGlobal(['errorDefault', 'maxSize']),
+          fileType: getGlobal(['errorDefault', 'fileType']),
+          existingFile: getGlobal(['errorDefault', 'existingFile'])
+        },
+        viewType: 'detail'
+      }
+    },
+    Badge: {
+      defaultProps: {
+        anchorOrigin: {
+          vertical: 'top',
+          horizontal: 'right'
+        },
+        className: '',
+        color: 'default',
+        content: null,
+        contentDirection: 'left',
+        invisible: false,
+        max: 99,
+        showZero: false,
+        size: 'medium',
+        style: {}
+      }
+    },
+    Breadcrumb: {
+      defaultProps: {
+        className: '',
+        color: 'default',
+        itemsAfterCollapse: 1,
+        itemsBeforeCollapse: 1,
+        maxItems: 8,
+        separator: 'ArrowRight',
+        size: 'medium',
+        style: {}
+      }
+    },
+    Button: {
+      defaultProps: {
+        className: '',
+        color: 'default',
+        disabled: false,
+        label: '',
+        loading: false,
+        size: 'medium',
+        stopPropagation: true,
+        viewType: 'text'
+      }
+    },
+    ButtonIcon: {
+      defaultProps: {
+        circular: false,
+        className: '',
+        color: 'default',
+        colorHover: 'system/active',
+        disabled: false,
+        size: 'medium',
+        viewBox: true,
+        viewType: 'outlined'
+      }
+    },
+    ButtonMore: {
+      defaultProps: {
+        buttonProps: {},
+        className: '',
+        disabled: false,
+        options: [],
+        optionType: 'full',
+        style: {}
+      }
+    },
+    Calendar: {
+      defaultProps: {
+        actions: null,
+        defaultValue: new Date(),
+        displayAnotherMonth: true
+      }
+    },
+    CalendarRange: {
+      defaultProps: {
+        actions: null,
+        displayAnotherMonth: true
+      }
+    },
+    Card: {
+      defaultProps: {
+        bodyStyle: {},
+        className: '',
+        dividerColor: 'line/category',
+        direction: 'vertical',
+        footerDivider: false,
+        footerStyle: {},
+        headerDivider: true,
+        headerStyle: {},
+        style: {},
+        width: 258,
+        height: 'max-content'
+      }
+    },
+    CardBody: {
+      defaultProps: {
+        className: '',
+        style: {}
+      }
+    },
+    CardExtra: {
+      defaultProps: {
+        className: '',
+        style: {}
+      }
+    },
+    CardFooter: {
+      defaultProps: {
+        className: '',
+        style: {}
+      }
+    },
+    CardHeader: {
+      defaultProps: {
+        className: '',
+        style: {}
+      }
+    },
+    Checkbox: {
+      defaultProps: {
+        className: '',
+        color: 'primary',
+        defaultChecked: false,
+        determinate: true,
+        disabled: false,
+        inputProps: {},
+        label: '',
+        labelProps: {},
+        readOnly: false,
+        stopPropagation: true,
+        width: 18
+      }
+    },
+    Chip: {
+      defaultProps: {
+        viewType: 'outlined',
+        size: 'medium',
+        color: 'default'
+      }
+    },
+    Col: {
+      defaultProps: {
+        className: '',
+        columns: 12,
+        lg: false,
+        md: false,
+        sm: false,
+        style: {},
+        verticalAlign: 'auto',
+        wrap: 'wrap',
+        xl: false,
+        xs: true,
+        zeroMinWidth: false
+      }
+    },
+    Container: {
+      defaultProps: {
+        className: '',
+        columns: 12,
+        columnSpacing: {
+          xs: 4,
+          sm: 4,
+          md: 4,
+          lg: 4,
+          xl: 6
+        },
+        direction: 'row',
+        lg: false,
+        md: false,
+        rowSpacing: {
+          xs: 4,
+          sm: 4,
+          md: 4,
+          lg: 4,
+          xl: 4
+        },
+        sm: false,
+        spacing: 0,
+        style: {},
+        topSpacing: {
+          xs: 2,
+          sm: 2,
+          md: 2,
+          lg: 2,
+          xl: 2
+        },
+        wrap: 'wrap',
+        xl: false,
+        xs: false,
+        zeroMinWidth: false
+      }
+    },
+    DatePicker: {
+      defaultProps: {
+        actionIconAt: 'end',
+        clearAble: false,
+        controls: false,
+        disabled: false,
+        displayAnotherMonth: true,
+        displayFormat: locale.get() === 'vi' ? 'DD/MM/YYYY' : 'MM/DD/YYYY',
+        pressESCToClose: true,
+        readOnly: false,
+        required: false,
+        returnFormat: 'YYYY-MM-DD',
+        textAlign: 'start',
+        viewType: 'underlined'
+      }
+    },
+    DateRangePicker: {
+      defaultProps: {
+        actionIconAt: 'end',
+        clearAble: false,
+        controls: false,
+        disabled: false,
+        displayFormat: 'DD/MM/YY',
+        onShowTooltip: true,
+        pressESCToClose: true,
+        readOnly: false,
+        required: false,
+        returnFormat: 'YYYY-MM-DD',
+        showUnitCount: true,
+        startFromZero: false,
+        textAlign: 'start',
+        unitCount: 'day',
+        viewType: 'underlined'
+      }
+    },
+    Divider: {
+      defaultProps: {
+        className: '',
+        color: 'system/disabled',
+        direction: 'horizontal',
+        style: {}
+      }
+    },
+    Dropdown: {
+      defaultProps: {
+        allowSearch: true,
+        className: '',
+        clearAble: false,
+        dataSource: [],
+        disabled: false,
+        displayExpr: 'name',
+        error: '',
+        iconExpr: 'none',
+        inputProps: {},
+        itemMode: 'normal',
+        label: '',
+        limit: 50,
+        loading: false,
+        multilineSelectedItem: false,
+        multiple: false,
+        noDataText: getGlobal('noDataText'),
+        placeholder: getGlobal('dropdownPlaceholder'),
+        readOnly: false,
+        required: false,
+        searchDelayTime: getGlobal('delayOnInput'),
+        searchMode: 'contains',
+        total: Number.MAX_SAFE_INTEGER,
+        valueExpr: 'id',
+        viewType: 'underlined'
+      }
+    },
+    DropdownBox: {
+      defaultProps: {
+        className: '',
+        label: '',
+        placeholder: '',
+        startIcon: 'Search',
+        endIcon: 'ArrowDown',
+        openOnClickAt: 'icon',
+        viewType: 'underlined',
+        inputProps: {},
+        delayOnInput: 700
+      }
+    },
+    Grid: {
+      defaultProps: {
+        className: '',
+        columns: 12,
+        container: false,
+        direction: 'row',
+        item: false,
+        lg: false,
+        md: false,
+        sm: false,
+        spacing: 0,
+        style: {},
+        verticalAlign: 'auto',
+        wrap: 'wrap',
+        xl: false,
+        xs: false,
+        zeroMinWidth: false
+      }
+    },
+    HelperText: {
+      defaultProps: {
+        disabled: false,
+        status: 'default',
+        className: '',
+        style: {},
+        children: ''
+      }
+    },
+    Image: {
+      defaultProps: {
+        circular: false,
+        className: '',
+        height: 200,
+        lazyLoading: false,
+        objectFit: 'cover',
+        style: {},
+        width: 200
+      }
+    },
+    InputBase: {
+      defaultProps: {
+        autoComplete: 'off',
+        autoFocus: false,
+        className: '',
+        defaultValue: '',
+        delayOnChange: getGlobal('delayOnInput'),
+        disabled: false,
+        endIconProps: {},
+        hoverTooltip: false,
+        iconStyle: {},
+        inputProps: {},
+        inputStyle: {},
+        multiline: false,
+        nonStyle: false,
+        placeholder: getGlobal('inputPlaceholder'),
+        readOnly: false,
+        required: false,
+        resize: 'none',
+        startIconProps: {},
+        status: 'default',
+        type: 'text',
+        viewType: 'underlined'
+      }
+    },
+    Label: {
+      defaultProps: {
+        children: '',
+        className: '',
+        color: 'text/label',
+        disabled: false,
+        lineClamp: 1,
+        readOnly: false,
+        required: false,
+        type: 'h6'
+      }
+    },
+    Modal: {
+      defaultProps: {
+        alignment: 'top',
+        autoFocus: true,
+        className: '',
+        dragAnyWhere: false,
+        moveable: false,
+        moveOutScreen: false,
+        open: false,
+        pressESCToClose: true,
+        style: {},
+        width: '80%'
+      }
+    },
+    ModalBody: {
+      defaultProps: {
+        className: '',
+        style: {}
+      }
+    },
+    ModalFooter: {
+      defaultProps: {
+        boxShadow: '0px -1px 1px rgba(0, 0, 0, 0.25)',
+        className: '',
+        style: {}
+      }
+    },
+    ModalHeader: {
+      defaultProps: {
+        className: '',
+        showClose: true,
+        style: {},
+        title: ''
+      }
+    },
+    MoneyInput: {
+      defaultProps: {
+        allowZero: false,
+        autoFocus: false,
+        className: '',
+        convertToWords: false,
+        disabled: false,
+        disabledNegative: false,
+        endIcon: '',
+        error: '',
+        inputProps: {},
+        label: '',
+        multiline: false,
+        nonStyle: false,
+        readOnly: false,
+        required: false,
+        startIcon: '',
+        thousandSeparator: false,
+        valueTypeReturn: 'number',
+        viewType: 'underlined'
+      }
+    },
+    Notify: {
+      defaultProps: {
+        className: '',
+        position: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        style: {}
+      }
+    },
+    NumberInput: {
+      defaultProps: {
+        autoFocus: false,
+        className: '',
+        decimalDigit: Infinity,
+        decimalSymbol: locale.get() === 'vi' ? ',' : '.',
+        disabled: false,
+        disabledNegative: false,
+        endIcon: '',
+        error: '',
+        fixedDecimalDigit: false,
+        label: '',
+        max: Infinity,
+        min: -Infinity,
+        readOnly: false,
+        required: false,
+        startIcon: '',
+        step: 1,
+        style: {},
+        thousandSeparator: false,
+        viewType: 'underlined'
+      }
+    },
+    PasswordInput: {
+      defaultProps: {
+        autoComplete: 'new-password',
+        autoFocus: false,
+        autoWidth: false,
+        className: '',
+        defaultValue: '',
+        disabled: false,
+        error: '',
+        label: '',
+        readOnly: false,
+        required: false,
+        status: 'default',
+        viewType: 'underlined',
+        visibilityToggle: true
+      }
+    },
+    Popover: {
+      defaultProps: {
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        arrow: false,
+        bgColor: 'system/standard',
+        className: '',
+        clickOutsideToClose: true,
+        fullScreen: true,
+        height: 'max-content',
+        pressESCToClose: true,
+        style: {},
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        },
+        trigger: 'click',
+        width: 'max-content'
+      }
+    },
+    Radio: {
+      defaultProps: {
+        disabled: false,
+        readOnly: false,
+        defaultChecked: false,
+        className: '',
+        width: 20,
+        labelProps: {}
+      }
+    },
+    Row: {
+      defaultProps: {
+        className: '',
+        columns: 12,
+        columnSpacing: {
+          xs: 4,
+          sm: 4,
+          md: 4,
+          lg: 4,
+          xl: 6
+        },
+        direction: 'row',
+        lg: false,
+        md: false,
+        rowSpacing: {
+          xs: 4,
+          sm: 4,
+          md: 4,
+          lg: 4,
+          xl: 4
+        },
+        sm: false,
+        spacing: 0,
+        style: {},
+        wrap: 'wrap',
+        xl: false,
+        xs: false,
+        zeroMinWidth: false
+      }
+    },
+    TextInput: {
+      defaultProps: {
+        autoComplete: 'off',
+        autoFocus: false,
+        autoWidth: false,
+        className: '',
+        defaultValue: '',
+        disabled: false,
+        hoverTooltip: false,
+        error: '',
+        label: '',
+        multiline: false,
+        readOnly: false,
+        required: false,
+        status: 'default',
+        type: 'text',
+        viewType: 'underlined'
+      }
+    },
+    Toggle: {
+      defaultProps: {
+        disabled: false,
+        readOnly: false,
+        defaultChecked: false,
+        label: '',
+        value: '',
+        id: '',
+        width: 40,
+        height: 20,
+        lineClamp: null,
+        required: false
+      }
+    },
+    TreeView: {
+      defaultProps: {
+        allowSearch: false,
+        autoExpandToResult: true,
+        className: '',
+        dataSource: [],
+        disabled: false,
+        disabledBoldResult: false,
+        disabledRelevantValue: false,
+        displayExpr: 'name',
+        expand: false,
+        expandIcon: 'ArrowDown',
+        id: 'id',
+        multiple: false,
+        multipleValueMode: 'multiple',
+        parentID: 'parentID',
+        renderAsyncFromLevel: 2,
+        renderAsyncWithLength: 200,
+        searchMode: 'contains',
+        searchProps: {},
+        selectAll: false,
+        selectAllLabel: getGlobal('selectAll'),
+        selectBox: false,
+        showChildrenOfResult: false,
+        showSelectedItems: false,
+        value: [],
+        valueExpr: ''
+      }
+    },
+    Typography: {
+      defaultProps: {
+        center: false,
+        className: '',
+        color: 'default',
+        format: [],
+        fullWidth: true,
+        hoverTooltip: false,
+        mapping: 'span',
+        tooltipDirection: 'bottom',
+        type: 'p1'
+      }
+    }
+  },
+  spacing: 4,
+  zIndex: 1500
 };
+export const useTheme = () => createTheme(settings);
+export const useColor = settings.colors;
+export const useTypography = settings.typography;
 export default settings;