dinocollab-core 1.1.10 → 1.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/data-view/create.view-mode.js +1 -1
- package/dist/data-view/create.view-mode.js.map +1 -1
- package/dist/data-view/types.js.map +1 -1
- package/dist/data-view/view-mode.content.js +1 -1
- package/dist/data-view/view-mode.content.js.map +1 -1
- package/dist/data-view/view-mode.types.js.map +1 -1
- package/dist/data-view/view-mode.units.js +1 -1
- package/dist/data-view/view-mode.units.js.map +1 -1
- package/dist/types/data-view/create.view-mode.d.ts +4 -0
- package/dist/types/data-view/types.d.ts +2 -3
- package/dist/types/data-view/view-mode.content.d.ts +1 -2
- package/dist/types/data-view/view-mode.types.d.ts +3 -2
- package/package.json +66 -66
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as
|
|
1
|
+
import{slicedToArray as o,objectSpread2 as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,jsx as n,Fragment as e}from"react/jsx-runtime";import l,{useState as r,useCallback as a,useMemo as d,useEffect as s}from"react";import{styled as u,Typography as v}from"@mui/material";import{motion as c,AnimatePresence as m}from"framer-motion";import{createViewModeModule as f,createViewModeList as p}from"./view-mode.content.js";import{EViewMode as g}from"./view-mode.types.js";import{LoadingError as y,LoadingWaiting as h,LoadingNoData as w,LoadingOverlay as b}from"./view-mode.units.js";var k={hidden:{opacity:0,y:8,scale:.98},visible:{opacity:1,y:0,scale:1},exit:{opacity:0,y:-8,scale:.98}},j={duration:.25,ease:[.25,.1,.25,1]};function x(u){var x=f(),M=p(),S=function(l){var f=r(l.viewMode||g.Module),p=o(f,2),S=p[0],C=p[1],E=a((function(){var o,i,t,n,e,r,a,d,s,v,c,m,f,p=Object.assign({},null==u||null===(o=u.list)||void 0===o?void 0:o.columns,null===(i=l.slots)||void 0===i||null===(i=i.list)||void 0===i?void 0:i.columns),g=Object.assign({},null==u?void 0:u.list,null===(t=l.slots)||void 0===t?void 0:t.list,{columns:p});return{NoData:null!==(n=null!==(e=null===(r=l.slots)||void 0===r?void 0:r.NoData)&&void 0!==e?e:null==u?void 0:u.NoData)&&void 0!==n?n:w,Skeleton:null!==(a=null!==(d=null===(s=l.slots)||void 0===s?void 0:s.Skeleton)&&void 0!==d?d:null==u?void 0:u.Skeleton)&&void 0!==a?a:h,ErrorData:null!==(v=null!==(c=null===(m=l.slots)||void 0===m?void 0:m.ErrorData)&&void 0!==c?c:null==u?void 0:u.ErrorData)&&void 0!==v?v:y,listConfigs:g,moduleConfigs:Object.assign({},null==u?void 0:u.module,null===(f=l.slots)||void 0===f?void 0:f.module)}}),[l.slots]),N=a((function(){var o;return Object.assign({},null==u?void 0:u.wrapProps,null===(o=l.slots)||void 0===o?void 0:o.wrapProps)}),[l.slots]),O=a((function(o){var i=E();switch(o){case g.List:return n(M,{value:l.data,configs:i.listConfigs});case g.Module:return n(x,{data:l.data,configs:i.moduleConfigs});default:return t(v,{variant:"subtitle1",children:["Unsupported view mode: ",o]})}}),[l.data,E]),P=a((function(o){var i=E(),r=i.NoData,a=i.ErrorData,d=i.Skeleton;return l.error?{key:"error",content:n(a,{error:l.error})}:l.loading&&0===l.data.length&&d?{key:"skeleton",content:n(d,{mode:o})}:0!==l.data.length||l.loading?l.data.length>0?{key:"content-".concat(o,"-").concat(l.data.length),content:t(e,{children:[l.loading&&n(b,{}),n(m,{mode:"wait",children:n(c.div,{variants:k,initial:"hidden",animate:"visible",exit:"exit",transition:j,children:O(o)},o)})]})}:{key:"loading",content:n(b,{})}:{key:"no-data",content:n(r,{mode:o})}}),[l.error,l.loading,l.data,E,O]),_=a((function(o){var i=P(o),t=i.key,e=i.content;return n(m,{mode:"wait",children:n(c.div,{variants:k,initial:"hidden",animate:"visible",exit:"exit",transition:j,layout:!0,children:e},t)})}),[P]),z=d((function(){return N()}),[N]);return s((function(){l.viewMode&&C(l.viewMode)}),[l.viewMode]),n(D,i(i({layout:"size",transition:{layout:{duration:.3,ease:[.4,0,.2,1]},opacity:{duration:.2}}},z),{},{children:_(S)}))};return l.memo(S)}var D=u(c.div,{shouldForwardProp:function(o){return"color"!==o&&"bgcolor"!==o&&"sx"!==o}})({position:"relative",display:"flex",flexDirection:"column"});export{x as createViewMode};
|
|
2
2
|
//# sourceMappingURL=create.view-mode.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.view-mode.js","sources":["../../src/data-view/create.view-mode.tsx"],"sourcesContent":["import React, { ComponentType, useState, useEffect, useMemo } from 'react'\r\nimport { Box, styled, Typography } from '@mui/material'\r\nimport { motion, AnimatePresence, Variants } from 'framer-motion'\r\nimport { createViewModeList, createViewModeModule } from './view-mode.content'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { defaultViewMode, LoadingError, LoadingMissingConfig, LoadingNoData, LoadingOverlay, LoadingWaiting } from './view-mode.units'\r\n\r\ninterface IViewModeSlots<T extends IViewModeValidModel> extends IViewModeConfigs<T> {}\r\n\r\ninterface IViewModeProps<T extends IViewModeValidModel> {\r\n data: T[]\r\n viewMode?: EViewMode\r\n ready?: boolean\r\n loading?: boolean\r\n error?: string\r\n slots?: IViewModeSlots<T>\r\n}\r\n\r\nconst animationVariants: Variants = {\r\n hidden: { opacity: 0, y: 5, scale: 0.985 },\r\n visible: { opacity: 1, y: 0, scale: 1 },\r\n exit: { opacity: 0, y: -5, scale: 0.985 }\r\n}\r\n\r\nconst animationTransition = {\r\n duration: 0.25,\r\n ease: 'easeInOut'\r\n}\r\n\r\nexport function createViewMode<T extends IViewModeValidModel>(configs?: IViewModeConfigs<T>): ComponentType<IViewModeProps<T>> {\r\n const isModuleConfigs = configs?.module && Object.keys(configs.module).length > 0\r\n const isListConfigs = configs?.list && Object.keys(configs.list).length > 0\r\n if (!configs || (!isModuleConfigs && !isListConfigs)) return LoadingMissingConfig\r\n\r\n const MemoizedContentModeModule = createViewModeModule<T>()\r\n const MemoizedContentModeList = createViewModeList<T>()\r\n\r\n const ViewMode: React.FC<IViewModeProps<T>> = (props) => {\r\n const [currentMode, setCurrentMode] = useState<EViewMode>(props.viewMode || configs.defaultValue || defaultViewMode)\r\n\r\n // Merge configs from props and default\r\n const internalConfigs = useMemo(() => {\r\n const columns = Object.assign({}, configs.list?.columns, props.slots?.list?.columns)\r\n const listConfigs = Object.assign({}, configs.list, props.slots?.list, { columns })\r\n return {\r\n NoData: props.slots?.NoData ?? configs.NoData ?? LoadingNoData,\r\n Skeleton: props.slots?.Skeleton ?? configs.Skeleton ?? LoadingWaiting,\r\n ErrorData: props.slots?.ErrorData ?? configs.ErrorData ?? LoadingError,\r\n listConfigs,\r\n moduleConfigs: Object.assign({}, configs.module, props.slots?.module),\r\n wrapProps: Object.assign({}, configs.wrapProps, props.slots?.wrapProps)\r\n }\r\n }, [props.slots, configs])\r\n\r\n useEffect(() => {\r\n if (props.viewMode) {\r\n setCurrentMode(props.viewMode)\r\n }\r\n }, [props.viewMode])\r\n\r\n const renderContentByMode = () => {\r\n switch (currentMode) {\r\n case EViewMode.List:\r\n return (\r\n <motion.div\r\n key={EViewMode.List}\r\n variants={animationVariants}\r\n initial='hidden'\r\n animate='visible'\r\n exit='exit'\r\n transition={animationTransition}\r\n >\r\n <MemoizedContentModeList value={props.data} configs={internalConfigs.listConfigs} />\r\n </motion.div>\r\n )\r\n case EViewMode.Module:\r\n return (\r\n <motion.div\r\n key={EViewMode.Module}\r\n variants={animationVariants}\r\n initial='hidden'\r\n animate='visible'\r\n exit='exit'\r\n transition={animationTransition}\r\n >\r\n <MemoizedContentModeModule data={props.data} configs={internalConfigs.moduleConfigs} />\r\n </motion.div>\r\n )\r\n default:\r\n return (\r\n <motion.div\r\n key='unsupported'\r\n variants={animationVariants}\r\n initial='hidden'\r\n animate='visible'\r\n exit='exit'\r\n transition={animationTransition}\r\n >\r\n <Typography variant='subtitle1'>Unsupported view mode: {currentMode}</Typography>\r\n </motion.div>\r\n )\r\n }\r\n }\r\n\r\n const renderFinalContent = () => {\r\n const { NoData, ErrorData, Skeleton } = internalConfigs\r\n\r\n if (props.loading && props.data.length === 0) return <Skeleton mode={currentMode} />\r\n if (props.error) return <ErrorData error={props.error} />\r\n if (props.data.length === 0 && !props.loading) return <NoData mode={currentMode} />\r\n\r\n return (\r\n <>\r\n {props.loading && <LoadingOverlay />}\r\n <AnimatePresence mode='wait'>{renderContentByMode()}</AnimatePresence>\r\n </>\r\n )\r\n }\r\n\r\n return (\r\n <Wrap {...internalConfigs.wrapProps}>\r\n <ContentWrap layout='position' transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}>\r\n {renderFinalContent()}\r\n </ContentWrap>\r\n </Wrap>\r\n )\r\n }\r\n\r\n return React.memo(ViewMode)\r\n}\r\n\r\nconst ContentWrap = styled(motion.div, {\r\n shouldForwardProp: (prop) => prop !== 'color' && prop !== 'bgcolor' && prop !== 'sx'\r\n})({\r\n position: 'relative'\r\n // overflow: 'hidden'\r\n})\r\n\r\nconst Wrap = styled(Box)(({ theme }) => ({\r\n marginLeft: theme.spacing(-2),\r\n marginRight: theme.spacing(-2),\r\n padding: theme.spacing(0, 2, 2)\r\n}))\r\n"],"names":["animationVariants","hidden","opacity","y","scale","visible","exit","animationTransition","duration","ease","createViewMode","configs","isModuleConfigs","module","Object","keys","length","isListConfigs","list","LoadingMissingConfig","MemoizedContentModeModule","createViewModeModule","MemoizedContentModeList","createViewModeList","ViewMode","props","_useState","useState","viewMode","defaultValue","defaultViewMode","_useState2","_slicedToArray","currentMode","setCurrentMode","internalConfigs","useMemo","_configs$list","_props$slots","_props$slots2","_ref","_props$slots$NoData","_props$slots3","_ref2","_props$slots$Skeleton","_props$slots4","_ref3","_props$slots$ErrorDat","_props$slots5","_props$slots6","_props$slots7","columns","assign","slots","listConfigs","NoData","LoadingNoData","Skeleton","LoadingWaiting","ErrorData","LoadingError","moduleConfigs","wrapProps","useEffect","renderContentByMode","EViewMode","List","_jsx","motion","div","variants","initial","animate","transition","children","value","data","Module","_jsxs","Typography","variant","Wrap","_objectSpread","ContentWrap","layout","loading","mode","error","LoadingOverlay","AnimatePresence","React","memo","styled","shouldForwardProp","prop","position","Box","_ref4","theme","marginLeft","spacing","marginRight","padding"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.view-mode.js","sources":["../../src/data-view/create.view-mode.tsx"],"sourcesContent":["import React, { ComponentType, useState, useEffect, useMemo, useCallback } from 'react'\r\nimport { styled, Typography } from '@mui/material'\r\nimport { motion, AnimatePresence, Variants } from 'framer-motion'\r\nimport { createViewModeList, createViewModeModule, IViewModeListProps, IViewModeModuleProps } from './view-mode.content'\r\nimport { EViewMode, IViewModeConfigs, IViewModeElementProps, IViewModeValidModel } from './view-mode.types'\r\nimport { LoadingError, LoadingNoData, LoadingOverlay, LoadingWaiting } from './view-mode.units'\r\n\r\ninterface IViewModeSlots<T extends IViewModeValidModel> extends IViewModeConfigs<T> {}\r\n\r\n/**\r\n * Props for ViewMode component\r\n * @template T - Type extending IViewModeValidModel\r\n */\r\ninterface IViewModeProps<T extends IViewModeValidModel> {\r\n data: T[]\r\n viewMode?: EViewMode\r\n ready?: boolean\r\n loading?: boolean\r\n error?: string\r\n slots?: IViewModeSlots<T>\r\n}\r\n\r\n// Animation variants for smooth transitions between states\r\nconst animationVariants: Variants = {\r\n hidden: { opacity: 0, y: 8, scale: 0.98 },\r\n visible: { opacity: 1, y: 0, scale: 1 },\r\n exit: { opacity: 0, y: -8, scale: 0.98 }\r\n}\r\n\r\n// Optimized animation timing for better UX\r\nconst animationTransition = {\r\n duration: 0.25,\r\n ease: [0.25, 0.1, 0.25, 1] // cubic-bezier for smoother animation\r\n}\r\n\r\nexport function createViewMode<T extends IViewModeValidModel>(configs?: IViewModeConfigs<T>): ComponentType<IViewModeProps<T>> {\r\n // Pre-memoized components for better performance\r\n const MemoizedContentModeModule = createViewModeModule<T>()\r\n const MemoizedContentModeList = createViewModeList<T>()\r\n\r\n const ViewMode: React.FC<IViewModeProps<T>> = (props) => {\r\n const [currentMode, setCurrentMode] = useState<EViewMode>(props.viewMode || EViewMode.Module)\r\n\r\n // Merge configs from props and default configs to allow customization\r\n const getInternalConfigs = useCallback(() => {\r\n const columns = Object.assign({}, configs?.list?.columns, props.slots?.list?.columns)\r\n const listConfigs = Object.assign({}, configs?.list, props.slots?.list, { columns })\r\n return {\r\n NoData: props.slots?.NoData ?? configs?.NoData ?? LoadingNoData,\r\n Skeleton: props.slots?.Skeleton ?? configs?.Skeleton ?? LoadingWaiting,\r\n ErrorData: props.slots?.ErrorData ?? configs?.ErrorData ?? LoadingError,\r\n listConfigs,\r\n moduleConfigs: Object.assign({}, configs?.module, props.slots?.module)\r\n }\r\n }, [props.slots])\r\n\r\n // Extract wrapper props separately\r\n const getWrapperProps = useCallback(() => {\r\n return Object.assign({}, configs?.wrapProps, props.slots?.wrapProps)\r\n }, [props.slots])\r\n\r\n // Render content based on current view mode (List/Module)\r\n const renderContentByMode = useCallback(\r\n (currentMode: EViewMode) => {\r\n const internalConfigs = getInternalConfigs()\r\n\r\n switch (currentMode) {\r\n case EViewMode.List:\r\n return <MemoizedContentModeList value={props.data} configs={internalConfigs.listConfigs} />\r\n case EViewMode.Module:\r\n return <MemoizedContentModeModule data={props.data} configs={internalConfigs.moduleConfigs} />\r\n default:\r\n return <Typography variant='subtitle1'>Unsupported view mode: {currentMode}</Typography>\r\n }\r\n },\r\n [props.data, getInternalConfigs]\r\n )\r\n\r\n // State management with clear priority order to prevent multiple renders\r\n const getContentState = useCallback(\r\n (currentMode: EViewMode) => {\r\n const { NoData, ErrorData, Skeleton } = getInternalConfigs()\r\n\r\n // 1. Error state - highest priority\r\n if (props.error) {\r\n return { key: 'error', content: <ErrorData error={props.error} /> }\r\n }\r\n\r\n // 2. Loading state with empty data (skeleton)\r\n if (props.loading && props.data.length === 0 && Skeleton) {\r\n return { key: 'skeleton', content: <Skeleton mode={currentMode} /> }\r\n }\r\n\r\n // 3. No data state (not loading and no data)\r\n if (props.data.length === 0 && !props.loading) {\r\n return { key: 'no-data', content: <NoData mode={currentMode} /> }\r\n }\r\n\r\n // 4. Content state with data (might be loading additional data)\r\n if (props.data.length > 0) {\r\n return {\r\n key: `content-${currentMode}-${props.data.length}`,\r\n content: (\r\n <>\r\n {props.loading && <LoadingOverlay />}\r\n <AnimatePresence mode='wait'>\r\n <motion.div\r\n key={currentMode}\r\n variants={animationVariants}\r\n initial='hidden'\r\n animate='visible'\r\n exit='exit'\r\n transition={animationTransition}\r\n >\r\n {renderContentByMode(currentMode)}\r\n </motion.div>\r\n </AnimatePresence>\r\n </>\r\n )\r\n }\r\n }\r\n\r\n // 5. Fallback - loading without skeleton\r\n return { key: 'loading', content: <LoadingOverlay /> }\r\n },\r\n [props.error, props.loading, props.data, getInternalConfigs, renderContentByMode]\r\n )\r\n\r\n // Main render method\r\n const renderContent = useCallback(\r\n (currentMode: EViewMode) => {\r\n const { key, content } = getContentState(currentMode)\r\n\r\n // Single AnimatePresence wrapper for smooth state transitions\r\n return (\r\n <AnimatePresence mode='wait'>\r\n <motion.div key={key} variants={animationVariants} initial='hidden' animate='visible' exit='exit' transition={animationTransition} layout>\r\n {content}\r\n </motion.div>\r\n </AnimatePresence>\r\n )\r\n },\r\n [getContentState]\r\n )\r\n\r\n const wrapperProps = useMemo(() => getWrapperProps(), [getWrapperProps])\r\n\r\n useEffect(() => {\r\n if (props.viewMode) {\r\n setCurrentMode(props.viewMode)\r\n }\r\n }, [props.viewMode])\r\n\r\n return (\r\n <Wrap\r\n layout='size'\r\n transition={{\r\n layout: { duration: 0.3, ease: [0.4, 0, 0.2, 1] },\r\n opacity: { duration: 0.2 }\r\n }}\r\n {...wrapperProps}\r\n >\r\n {renderContent(currentMode)}\r\n </Wrap>\r\n )\r\n }\r\n\r\n // Memoize component to prevent unnecessary re-renders\r\n return React.memo(ViewMode)\r\n}\r\n\r\nconst Wrap = styled(motion.div, {\r\n // Only forward specific props to prevent MUI system props from being passed to DOM\r\n shouldForwardProp: (prop) => prop !== 'color' && prop !== 'bgcolor' && prop !== 'sx'\r\n})({\r\n position: 'relative',\r\n // Remove overflow hidden to allow natural animations\r\n display: 'flex',\r\n flexDirection: 'column'\r\n})\r\n"],"names":["animationVariants","hidden","opacity","y","scale","visible","exit","animationTransition","duration","ease","createViewMode","configs","MemoizedContentModeModule","createViewModeModule","MemoizedContentModeList","createViewModeList","ViewMode","props","_useState","useState","viewMode","EViewMode","Module","_useState2","_slicedToArray","currentMode","setCurrentMode","getInternalConfigs","useCallback","_configs$list","_props$slots","_props$slots2","_ref","_props$slots$NoData","_props$slots3","_ref2","_props$slots$Skeleton","_props$slots4","_ref3","_props$slots$ErrorDat","_props$slots5","_props$slots6","columns","Object","assign","list","slots","listConfigs","NoData","LoadingNoData","Skeleton","LoadingWaiting","ErrorData","LoadingError","moduleConfigs","module","getWrapperProps","_props$slots7","wrapProps","renderContentByMode","internalConfigs","List","_jsx","value","data","_jsxs","Typography","variant","children","getContentState","_getInternalConfigs","error","key","content","loading","length","mode","concat","_Fragment","LoadingOverlay","AnimatePresence","motion","div","variants","initial","animate","transition","renderContent","_getContentState","layout","wrapperProps","useMemo","useEffect","Wrap","_objectSpread","React","memo","styled","shouldForwardProp","prop","position","display","flexDirection"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../src/data-view/types.ts"],"sourcesContent":["import type { ReactNode } from 'react'\r\nimport type { ButtonProps } from '@mui/material'\r\nimport type { IFilterNotesProps } from './ui.units'\r\n\r\nexport type SingleOrArray<T> = T | T[]\r\n\r\nexport type IRelativePosition = 'above' | 'below' | 'left' | 'right'\r\n\r\nexport type
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../src/data-view/types.ts"],"sourcesContent":["import type { ReactNode } from 'react'\r\nimport type { ButtonProps } from '@mui/material'\r\nimport type { IFilterNotesProps } from './ui.units'\r\n\r\nexport type SingleOrArray<T> = T | T[]\r\n\r\nexport type IRelativePosition = 'above' | 'below' | 'left' | 'right'\r\n\r\nexport type IPositionElement<K extends IRelativePosition = IRelativePosition> = { [key in K]?: ReactNode }\r\n\r\nexport enum EViewStatus {\r\n Loading = 'Loading',\r\n Loaded = 'Loaded',\r\n Error = 'Error'\r\n}\r\n\r\nexport type IFilterArea = 'input' | 'filterButton' | 'sortButton'\r\nexport type IFilterReason = 'filter' | 'quickSearch' | 'pagination' | 'sort'\r\nexport type IFilterAction = 'add' | 'remove' | 'change' | 'reset'\r\nexport type IFilterType = 'string' | 'select' | 'select-multi' | 'date' | 'date-range'\r\n\r\nexport type IFilterLogic = 'and' | 'or'\r\nexport type IFilterDateLogic = 'before' | 'after'\r\nexport type IFilterDateRangeLogic = 'between' | 'not-between'\r\n\r\nexport interface IItemBase {\r\n value: string\r\n label?: string\r\n}\r\n\r\n//#region Validation Result\r\nexport interface IValidationResult {\r\n hasError: boolean\r\n message?: string\r\n}\r\n//#endregion\r\n\r\n//#region Field Match Config\r\nexport enum EFieldMatch {\r\n AlwaysVisible = 'AlwaysVisible',\r\n MatchOnly = 'MatchOnly',\r\n LinkYoutube = 'LinkYoutube',\r\n Link = 'Link',\r\n Guid = 'Guid'\r\n}\r\n\r\nexport interface IFieldMatchDef {\r\n rule: EFieldMatch\r\n}\r\n\r\nexport interface IFieldMatchMatchOnly extends IFieldMatchDef {\r\n rule: EFieldMatch.MatchOnly\r\n match: (value: string) => boolean\r\n}\r\n\r\nexport interface IFieldMatchBasic extends IFieldMatchDef {\r\n rule: EFieldMatch.AlwaysVisible | EFieldMatch.LinkYoutube | EFieldMatch.Link | EFieldMatch.Guid\r\n}\r\n\r\nexport type IFieldMatchConfig = IFieldMatchMatchOnly | IFieldMatchBasic\r\n\r\nexport type IFieldMatchConfigs = {\r\n rules: SingleOrArray<IFieldMatchConfig>\r\n notes?: IFilterNotesProps\r\n}\r\n//#endregion\r\n\r\n//#region Field Validate Config\r\nexport enum EFieldValidate {\r\n Required = 'Required',\r\n LinkYoutube = 'LinkYoutube',\r\n Link = 'Link',\r\n Custom = 'Custom'\r\n}\r\n\r\nexport interface IFieldValidateDef {\r\n rule: EFieldValidate\r\n}\r\n\r\nexport interface IFieldValidateCustom extends IFieldValidateDef {\r\n rule: EFieldValidate.Custom\r\n validator: (value: string) => boolean\r\n}\r\n\r\nexport interface IFieldValidateBasic extends IFieldValidateDef {\r\n rule: EFieldValidate.Required | EFieldValidate.Link | EFieldValidate.LinkYoutube\r\n}\r\n\r\nexport type IFieldValidateConfig = IFieldValidateCustom | IFieldValidateBasic\r\n\r\nexport type IFieldValidateConfigs = {\r\n rules: SingleOrArray<IFieldValidateConfig>\r\n notes?: IFilterNotesProps\r\n}\r\n//#endregion\r\n\r\n//#region Pagination\r\nexport interface IPagination {\r\n page?: number\r\n pageSize?: number\r\n}\r\n//#endregion\r\n\r\n//#region Sort\r\nexport interface ISort<T> {\r\n field: keyof T\r\n direction: 'asc' | 'desc'\r\n}\r\n//#endregion\r\n\r\n//#region Quick Search Config\r\nexport interface IQuickSearchConfig<T> {\r\n fields: SingleOrArray<keyof T>\r\n label?: string\r\n notes?: IFilterNotesProps\r\n logic?: IFilterLogic\r\n}\r\n//#endregion\r\n\r\n//#region Filter Config\r\ninterface IFilterDef {\r\n /** Display label for the filter field */\r\n label?: string\r\n /**\r\n * Filter input type\r\n * @default 'string'\r\n */\r\n type?: IFilterType\r\n /**\r\n * Configuration for quick search matching behavior.\r\n * Determines how the quick search should match against field values.\r\n */\r\n quickSearchMatch?: IFieldMatchConfigs\r\n /**\r\n * Notes for the filter field.\r\n */\r\n notes?: IFilterNotesProps\r\n /**\r\n * Validation rules for the filter menu input.\r\n * @default\r\n * { rules: [{ rule: EFieldValidate.Required }] }\r\n */\r\n validation?: IFieldValidateConfigs\r\n /**\r\n * Notes to display in the filter menu.\r\n * Useful for providing additional context or instructions.\r\n */\r\n filterable?: boolean\r\n /**\r\n * Whether the filter field is sortable.\r\n * If true, the field can be used for sorting in the filter menu.\r\n * @default true\r\n */\r\n sortable?: boolean\r\n}\r\n\r\nexport interface IFilterBasicDef extends IFilterDef {\r\n type?: 'string'\r\n}\r\n\r\nexport interface IFilterSelectDef extends IFilterDef {\r\n type: 'select' | 'select-multi'\r\n options: { value: string; label?: string }[]\r\n}\r\n\r\nexport interface IFilterDateDef extends IFilterDef {\r\n type: 'date' | 'date-range'\r\n /**\r\n * Date format for display and validation\r\n * @default 'YYYY-MM-DD'\r\n */\r\n format?: string\r\n /**\r\n * Minimum date allowed\r\n */\r\n minDate?: string | Date\r\n /**\r\n * Maximum date allowed\r\n */\r\n maxDate?: string | Date\r\n}\r\n\r\nexport type IFilterConfig = IFilterBasicDef | IFilterSelectDef | IFilterDateDef\r\n\r\nexport type IFilterConfigs<T> = { [key in keyof T]?: IFilterConfig }\r\n//#endregion\r\n\r\n//#region Filter State\r\nexport interface IFilterItem {\r\n type?: IFilterType\r\n value?: string | number | boolean\r\n label?: string\r\n logic?: IFilterLogic\r\n dateLogic?: IFilterDateLogic\r\n dateRangeLogic?: IFilterDateRangeLogic\r\n // For date-range, we store start and end dates\r\n startDate?: string\r\n endDate?: string\r\n}\r\n\r\nexport type IFilterMap<T> = { [key in keyof T]?: IFilterItem[] }\r\n\r\nexport interface IFilterChangeDetails {\r\n reason?: IFilterReason\r\n area?: IFilterArea\r\n action?: IFilterAction\r\n isChanged?: boolean\r\n}\r\n\r\nexport interface IFilterState<T> {\r\n filter?: IFilterMap<T>\r\n quickSearch?: SingleOrArray<string>\r\n quickSearchLogic?: IFilterLogic\r\n pagination?: IPagination\r\n sort?: ISort<T>\r\n details?: IFilterChangeDetails\r\n}\r\n\r\nexport type IFilterStateChangeHandler<T> = (filterState: IFilterState<T>) => void\r\n//#endregion\r\n\r\n//#region Filter Bar\r\n\r\nexport interface ISortButtonConfigs {\r\n text?: string\r\n icon?: ReactNode\r\n wrapProps?: ButtonProps\r\n}\r\n\r\nexport interface IFilterBarConfigBase {\r\n /** @default false */\r\n enableSticky?: boolean\r\n /** @default false */\r\n enableSort?: boolean\r\n}\r\n\r\nexport interface IFilterBarConfigs<T> extends IFilterBarConfigBase {\r\n id?: string\r\n placeholder?: string\r\n notes?: IFilterNotesProps\r\n fields?: IFilterConfigs<T>\r\n quickSearch?: IQuickSearchConfig<T>\r\n defaultValue?: IFilterState<T>\r\n sortButton?: ISortButtonConfigs\r\n}\r\n//#endregion\r\n\r\n// #region View Data\r\nexport interface IViewData<T> {\r\n items: T[]\r\n totalItems?: number\r\n hasPreviousPage?: boolean\r\n hasNextPage?: boolean\r\n}\r\n//#endregion\r\n"],"names":["EViewStatus","EFieldMatch","EFieldValidate"],"mappings":"IAUYA,EA4BAC,EA8BAC,GA1DZ,SAAYF,GACVA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAwBD,SAAYC,GACVA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,YAAA,cACAA,EAAA,KAAA,OACAA,EAAA,KAAA,MACD,CAND,CAAYA,IAAAA,EAMX,CAAA,IAwBD,SAAYC,GACVA,EAAA,SAAA,WACAA,EAAA,YAAA,cACAA,EAAA,KAAA,OACAA,EAAA,OAAA,QACD,CALD,CAAYA,IAAAA,EAKX,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as r,createClass as o,objectWithoutProperties as e,objectSpread2 as t,classCallCheck as i,callSuper as n,defineProperty as a}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s}from"react/jsx-runtime";import{memo as l,Component as
|
|
1
|
+
import{inherits as r,createClass as o,objectWithoutProperties as e,objectSpread2 as t,classCallCheck as i,callSuper as n,defineProperty as a}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s}from"react/jsx-runtime";import{memo as l,Component as u}from"react";import{styled as d,colors as c,Grid as p,Typography as m}from"@mui/material";import{DataGrid as f}from"@mui/x-data-grid";var g=["Element"],b=["Element"],h=function(){return s(m,{variant:"subtitle1",color:"textSecondary",children:"No items to display"})};function v(){return l(function(){function a(r){var o;return i(this,a),(o=n(this,a,[r])).ElementComponent=r.configs.Element||h,o}return r(a,u),o(a,[{key:"shouldComponentUpdate",value:function(r){var o=this.props.configs,t=o.Element,i=e(o,g),n=r.configs,a=n.Element,s=e(n,b);t!==a&&(this.ElementComponent=r.configs.Element||h);var l=JSON.stringify(i)!==JSON.stringify(s);return JSON.stringify(this.props.data)!==JSON.stringify(r.data)||l}},{key:"render",value:function(){var r=this.ElementComponent,o=this.props,e=o.data,i=o.configs,n=i.size||{xs:12,sm:6,md:4,lg:3};return s(p,t(t({container:!0,spacing:i.spacing||0},i.wrapProps),{},{children:e.map((function(o,e){var a=i.getElementId?i.getElementId(o):e.toString(),l=i.elementWrapPropsGetter?i.elementWrapPropsGetter({data:o,index:e}):i.elementWrapProps||{};return s(p,t(t(t({item:!0},n),l),{},{children:s(r,{data:o,index:e})}),a)}))}))}}])}())}function x(){var e=function(r){var o,e=null!==(o=null==r?void 0:r.columns)&&void 0!==o?o:{};return Object.keys(e).map((function(r){var o=e[r];return t({field:String(r),sortable:!1},o)}))};return l(function(){function l(r){var o;return i(this,l),o=n(this,l,[r]),a(o,"columns",[]),o.columns=e(r.configs),o}return r(l,u),o(l,[{key:"shouldComponentUpdate",value:function(r){var o=JSON.stringify(this.props.value)!==JSON.stringify(r.value),t=JSON.stringify(this.props.configs)!==JSON.stringify(r.configs);return t&&(this.columns=e()),o||t}},{key:"render",value:function(){var r,o,e,i,n;if(this.props.configs&&Object.keys(null!==(r=null===(o=this.props.configs)||void 0===o?void 0:o.columns)&&void 0!==r?r:{}).length>0){var a=this.props.value;return s(y,t({hideFooter:!0,disableColumnFilter:!0,disableColumnMenu:!0,getRowId:null===(e=this.props.configs)||void 0===e?void 0:e.getRowId,rows:a,rowHeight:null===(i=this.props.configs)||void 0===i?void 0:i.rowHeight,columnHeaderHeight:48,getRowSpacing:function(r){return{top:r.isFirstVisible?8:4,bottom:4}},columns:this.columns,disableColumnSelector:!0},null===(n=this.props.slots)||void 0===n?void 0:n.dataGridProps))}}}])}())}var y=d(f)((function(r){var o=r.theme;return{"*":{boxSizing:"border-box"},"--custom-border-color":"rgba(145, 158, 171, 0.16)","--custom-bg-color":o.palette.background.paper,"--DataGrid-rowBorderColor":"transparent",borderColor:"transparent",".MuiDataGrid-cell":{"--rowBorderColor":"transparent",display:"flex",alignItems:"center"},".MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus":{outline:"none"},".MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within":{outline:"none"},".MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible":{outline:"none"},".MuiDataGrid-columnHeaders":{backgroundColor:c.grey[50],borderColor:"transparent",borderRadius:"6px"},".MuiDataGrid-virtualScrollerContent":{".MuiDataGrid-row":{borderRadius:"6px",border:"none",transition:"all 0.2s ease",backgroundColor:"var(--custom-bg-color)",".MuiDataGrid-cell":{backgroundColor:"var(--custom-bg-color)",border:"none",borderTop:"1px dashed var(--custom-border-color)",borderBottom:"1px dashed var(--custom-border-color)","&:first-of-type":{borderLeft:"1px dashed var(--custom-border-color)",borderRadius:"6px 0 0 6px"},"&:last-of-type":{borderRight:"1px dashed var(--custom-border-color)",borderRadius:"0 6px 6px 0"}},"&:hover":{"--custom-border-color":o.palette.divider,"--custom-bg-color":c.grey[50],transform:"translateY(-1px)",boxShadow:"rgba(99, 99, 99, 0.1) 0px 2px 8px 0px",".MuiDataGrid-cell":{borderTopStyle:"solid",borderBottomStyle:"solid","&:first-child":{borderLeftStyle:"solid"},"&:last-child":{borderRightStyle:"solid"}}}}}}}));export{x as createViewModeList,v as createViewModeModule};
|
|
2
2
|
//# sourceMappingURL=view-mode.content.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"view-mode.content.js","sources":["../../src/data-view/view-mode.content.tsx"],"sourcesContent":["import React, { Component, ComponentType, FC, memo } from 'react'\r\nimport { Typography, Grid, styled, colors } from '@mui/material'\r\nimport { DataGrid, DataGridProps, GridColDef, GridRowIdGetter, GridValidRowModel } from '@mui/x-data-grid'\r\nimport { GridColsDef, IViewModeListConfig, IViewModeModuleConfig, IViewModeValidModel } from './view-mode.types'\r\n\r\n//#region Mode Module\r\nconst EmptyModule: FC = () => (\r\n <Typography variant='subtitle1' color='textSecondary'>\r\n No items to display\r\n </Typography>\r\n)\r\n\r\ninterface IViewModeModuleProps<T extends IViewModeValidModel> {\r\n data: T[]\r\n configs: IViewModeModuleConfig<T>\r\n}\r\n\r\nexport function createViewModeModule<T extends IViewModeValidModel>(): ComponentType<IViewModeModuleProps<T>> {\r\n class ViewModeModule extends Component<IViewModeModuleProps<T>> {\r\n private ElementComponent\r\n constructor(props: IViewModeModuleProps<T>) {\r\n super(props)\r\n this.ElementComponent = props.configs.Element || EmptyModule\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IViewModeModuleProps<T>>): boolean {\r\n const { Element: currentElement, ...currentConfig } = this.props.configs\r\n const { Element: nextElement, ...nextConfigs } = nextProps.configs\r\n const checkElementDiff = currentElement !== nextElement\r\n if (checkElementDiff) {\r\n this.ElementComponent = nextProps.configs.Element || EmptyModule\r\n }\r\n\r\n const checkConfigsDiff = JSON.stringify(currentConfig) !== JSON.stringify(nextConfigs)\r\n const checkDataDiff = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)\r\n return checkDataDiff || checkConfigsDiff\r\n }\r\n\r\n render() {\r\n const { ElementComponent } = this\r\n const { data, configs } = this.props\r\n const size = configs.size || { xs: 12, sm: 6, md: 4, lg: 3 }\r\n return (\r\n <Grid container spacing={configs.spacing || 0} {...configs.wrapProps}>\r\n {data.map((item, index) => {\r\n const key = configs.getElementId ? configs.getElementId(item) : index.toString()\r\n const itemProps = configs.elementWrapPropsGetter ? configs.elementWrapPropsGetter({ data: item, index }) : configs.elementWrapProps || {}\r\n return (\r\n <Grid item key={key} {...size} {...itemProps}>\r\n <ElementComponent data={item} index={index} />\r\n </Grid>\r\n )\r\n })}\r\n </Grid>\r\n )\r\n }\r\n }\r\n\r\n return memo(ViewModeModule)\r\n}\r\n//#endregion\r\n\r\n//#region View Mode List\r\nexport interface IViewModeListProps<T extends IViewModeValidModel> {\r\n value: T[]\r\n configs: IViewModeListConfig<T>\r\n slots?: {\r\n dataGridProps?: Partial<Omit<DataGridProps, 'columns' | 'rows'>>\r\n }\r\n}\r\n\r\nexport function createViewModeList<T extends IViewModeValidModel>(): ComponentType<IViewModeListProps<T>> {\r\n const genarateColumns = (configs?: IViewModeListConfig<T>): GridColDef[] => {\r\n const cols: GridColsDef<T> = configs?.columns ?? {}\r\n const fields = Object.keys(cols) as (keyof T)[]\r\n return fields.map((field) => {\r\n const config = cols[field]\r\n return { field: String(field), sortable: false, ...config }\r\n })\r\n }\r\n\r\n class ViewModeList extends Component<IViewModeListProps<T>> {\r\n private columns: GridColDef[] = []\r\n constructor(props: IViewModeListProps<T>) {\r\n super(props)\r\n this.columns = genarateColumns(props.configs)\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IViewModeListProps<T>>): boolean {\r\n const checkValueDiff = JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)\r\n const checkListConfigsDiff = JSON.stringify(this.props.configs) !== JSON.stringify(nextProps.configs)\r\n if (checkListConfigsDiff) {\r\n this.columns = genarateColumns()\r\n }\r\n return checkValueDiff || checkListConfigsDiff\r\n }\r\n\r\n render() {\r\n const isRender = this.props.configs && Object.keys(this.props.configs?.columns ?? {}).length > 0\r\n if (!isRender) {\r\n return\r\n }\r\n const rows = this.props.value as GridValidRowModel[]\r\n return (\r\n <DataGridCustom\r\n hideFooter\r\n // disableColumnSorting\r\n disableColumnFilter\r\n disableColumnMenu\r\n getRowId={this.props.configs?.getRowId as GridRowIdGetter<GridValidRowModel>}\r\n rows={rows}\r\n rowHeight={this.props.configs?.rowHeight}\r\n columnHeaderHeight={48}\r\n getRowSpacing={({ isFirstVisible }) => ({ top: isFirstVisible ? 8 : 4, bottom: 4 })}\r\n columns={this.columns}\r\n disableColumnSelector\r\n {...this.props.slots?.dataGridProps}\r\n />\r\n )\r\n }\r\n }\r\n\r\n return memo(ViewModeList)\r\n}\r\n\r\nconst DataGridCustom = styled(DataGrid)(({ theme }) => ({\r\n '*': {\r\n boxSizing: 'border-box'\r\n },\r\n '--custom-border-color': 'rgba(145, 158, 171, 0.16)',\r\n '--custom-bg-color': theme.palette.background.paper,\r\n '--DataGrid-rowBorderColor': 'transparent',\r\n borderColor: 'transparent',\r\n '.MuiDataGrid-cell': {\r\n '--rowBorderColor': 'transparent',\r\n display: 'flex',\r\n alignItems: 'center'\r\n },\r\n '.MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus': {\r\n outline: 'none'\r\n },\r\n '.MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within': {\r\n outline: 'none'\r\n },\r\n '.MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible': {\r\n outline: 'none'\r\n },\r\n '.MuiDataGrid-columnHeaders': {\r\n backgroundColor: colors.grey[50],\r\n borderColor: 'transparent',\r\n borderRadius: '6px'\r\n },\r\n '.MuiDataGrid-virtualScrollerContent': {\r\n '.MuiDataGrid-row': {\r\n borderRadius: '6px',\r\n border: 'none',\r\n transition: 'all 0.2s ease',\r\n backgroundColor: 'var(--custom-bg-color)',\r\n '.MuiDataGrid-cell': {\r\n backgroundColor: 'var(--custom-bg-color)',\r\n border: 'none',\r\n borderTop: '1px dashed var(--custom-border-color)',\r\n borderBottom: '1px dashed var(--custom-border-color)',\r\n '&:first-child': {\r\n borderLeft: '1px dashed var(--custom-border-color)',\r\n borderRadius: '6px 0 0 6px'\r\n },\r\n '&:last-child': {\r\n borderRight: '1px dashed var(--custom-border-color)',\r\n borderRadius: '0 6px 6px 0'\r\n }\r\n },\r\n '&:hover': {\r\n '--custom-border-color': theme.palette.divider,\r\n '--custom-bg-color': colors.grey[50],\r\n transform: 'translateY(-1px)',\r\n boxShadow: 'rgba(99, 99, 99, 0.1) 0px 2px 8px 0px',\r\n '.MuiDataGrid-cell': {\r\n borderTopStyle: 'solid',\r\n borderBottomStyle: 'solid',\r\n '&:first-child': {\r\n borderLeftStyle: 'solid'\r\n },\r\n '&:last-child': {\r\n borderRightStyle: 'solid'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}))\r\n//#endregion\r\n"],"names":["EmptyModule","_jsx","Typography","variant","color","children","createViewModeModule","memo","ViewModeModule","props","_this","_classCallCheck","_callSuper","ElementComponent","configs","Element","_inherits","Component","_createClass","key","value","nextProps","_this$props$configs","this","currentElement","currentConfig","_objectWithoutProperties","_excluded","_nextProps$configs","nextElement","nextConfigs","_excluded2","checkConfigsDiff","JSON","stringify","data","_this$props","size","xs","sm","md","lg","Grid","_objectSpread","container","spacing","wrapProps","map","item","index","getElementId","toString","itemProps","elementWrapPropsGetter","elementWrapProps","createViewModeList","genarateColumns","_configs$columns","cols","columns","Object","keys","field","config","String","sortable","ViewModeList","_this2","_defineProperty","checkValueDiff","checkListConfigsDiff","_this$props$configs$c","_this$props$configs2","_this$props$configs3","_this$props$configs4","_this$props$slots","length","rows","DataGridCustom","hideFooter","disableColumnFilter","disableColumnMenu","getRowId","rowHeight","columnHeaderHeight","getRowSpacing","_ref","top","isFirstVisible","bottom","disableColumnSelector","slots","dataGridProps","styled","DataGrid","_ref2","theme","boxSizing","palette","background","paper","borderColor","display","alignItems","outline","backgroundColor","colors","grey","borderRadius","border","transition","borderTop","borderBottom","borderLeft","borderRight","divider","transform","boxShadow","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle"],"mappings":"yaAMMA,EAAkB,WAAP,OACfC,EAACC,EAAU,CAACC,QAAQ,YAAYC,MAAM,gBAAeC,SAAA,uBAExC,WAQCC,IAyCd,OAAOC,aAtCL,SAAAC,EAAYC,GAA8B,IAAAC,EAEoB,OAFpBC,OAAAH,IACxCE,EAAAE,EAAAJ,KAAAA,GAAMC,KACDI,iBAAmBJ,EAAMK,QAAQC,SAAWf,EAAWU,CAC9D,CAAC,OAAAM,EAAAR,EAL0BS,GAK1BC,EAAAV,EAAA,CAAA,CAAAW,IAAA,wBAAAC,MAED,SAAsBC,GACpB,IAAAC,EAAsDC,KAAKd,MAAMK,QAAhDU,EAAcF,EAAvBP,QAA4BU,EAAaC,EAAAJ,EAAAK,GACjDC,EAAiDP,EAAUP,QAA1Ce,EAAWD,EAApBb,QAAyBe,EAAWJ,EAAAE,EAAAG,GACnBP,IAAmBK,IAE1CN,KAAKV,iBAAmBQ,EAAUP,QAAQC,SAAWf,GAGvD,IAAMgC,EAAmBC,KAAKC,UAAUT,KAAmBQ,KAAKC,UAAUJ,GAE1E,OADsBG,KAAKC,UAAUX,KAAKd,MAAM0B,QAAUF,KAAKC,UAAUb,EAAUc,OAC3DH,CAC1B,GAAC,CAAAb,IAAA,SAAAC,MAED,WACE,IAAQP,EAAqBU,KAArBV,iBACRuB,EAA0Bb,KAAKd,MAAvB0B,EAAIC,EAAJD,KAAMrB,EAAOsB,EAAPtB,QACRuB,EAAOvB,EAAQuB,MAAQ,CAAEC,GAAI,GAAIC,GAAI,EAAGC,GAAI,EAAGC,GAAI,GACzD,OACExC,EAACyC,EAAIC,EAAAA,EAAA,CAACC,WAAU,EAAAC,QAAS/B,EAAQ+B,SAAW,GAAO/B,EAAQgC,WAAS,GAAA,CACjEzC,SAAA8B,EAAKY,KAAI,SAACC,EAAMC,GACf,IAAM9B,EAAML,EAAQoC,aAAepC,EAAQoC,aAAaF,GAAQC,EAAME,WAChEC,EAAYtC,EAAQuC,uBAAyBvC,EAAQuC,uBAAuB,CAAElB,KAAMa,EAAMC,MAAAA,IAAWnC,EAAQwC,kBAAoB,CAAE,EACzI,OACErD,EAACyC,EAAIC,EAAAA,EAAAA,EAAA,CAACK,SAAmBX,GAAUe,GAAS,GAAA,CAAA/C,SAC1CJ,EAACY,GAAiBsB,KAAMa,EAAMC,MAAOA,MADvB9B,EAInB,MAGP,IAAC,IAIL,UAYgBoC,IACd,IAAMC,EAAkB,SAAC1C,GAAkD,IAAA2C,EACnEC,EAAuCD,QAAnCA,EAAmB3C,aAAO,EAAPA,EAAS6C,mBAAOF,EAAAA,EAAI,CAAE,EAEnD,OADeG,OAAOC,KAAKH,GACbX,KAAI,SAACe,GACjB,IAAMC,EAASL,EAAKI,GACpB,OAAAnB,EAAA,CAASmB,MAAOE,OAAOF,GAAQG,UAAU,GAAUF,EACrD,GACD,EA2CD,OAAOxD,aAvCL,SAAA2D,EAAYzD,GAA4B,IAAA0D,EAEO,OAFPxD,OAAAuD,GACtCC,EAAAvD,EAAAsD,KAAAA,GAAMzD,IAAM2D,EAAAD,EAAA,UAFkB,IAG9BA,EAAKR,QAAUH,EAAgB/C,EAAMK,SAAQqD,CAC/C,CAAC,OAAAnD,EAAAkD,EALwBjD,GAKxBC,EAAAgD,EAAA,CAAA,CAAA/C,IAAA,wBAAAC,MAED,SAAsBC,GACpB,IAAMgD,EAAiBpC,KAAKC,UAAUX,KAAKd,MAAMW,SAAWa,KAAKC,UAAUb,EAAUD,OAC/EkD,EAAuBrC,KAAKC,UAAUX,KAAKd,MAAMK,WAAamB,KAAKC,UAAUb,EAAUP,SAI7F,OAHIwD,IACF/C,KAAKoC,QAAUH,KAEVa,GAAkBC,CAC3B,GAAC,CAAAnD,IAAA,SAAAC,MAED,WAAM,IAAAmD,EAAAC,EAAAC,EAAAC,EAAAC,EAEJ,GADiBpD,KAAKd,MAAMK,SAAW8C,OAAOC,KAAgCU,QAA5BA,UAAAC,EAACjD,KAAKd,MAAMK,eAAO,IAAA0D,OAAA,EAAlBA,EAAoBb,eAAOY,IAAAA,EAAAA,EAAI,IAAIK,OAAS,EAC/F,CAGA,IAAMC,EAAOtD,KAAKd,MAAMW,MACxB,OACEnB,EAAC6E,EAAcnC,EAAA,CACboC,YAAU,EAEVC,uBACAC,mBAAiB,EACjBC,SAA4BT,QAApBA,EAAElD,KAAKd,MAAMK,eAAX2D,IAAkBA,OAAlBA,EAAAA,EAAoBS,SAC9BL,KAAMA,EACNM,UAA6BT,QAApBA,EAAEnD,KAAKd,MAAMK,eAAX4D,IAAkBA,OAAlBA,EAAAA,EAAoBS,UAC/BC,mBAAoB,GACpBC,cAAe,SAAFC,GAAmB,MAAQ,CAAEC,IAAVD,EAAdE,eAA8C,EAAI,EAAGC,OAAQ,EAAI,EACnF9B,QAASpC,KAAKoC,QACd+B,uBAAqB,GACDf,QADCA,EACjBpD,KAAKd,MAAMkF,aAAXhB,IAAgBA,OAAhBA,EAAAA,EAAkBiB,eAfzB,CAkBH,IAAC,IAIL,CAEA,IAAMd,EAAiBe,EAAOC,EAAPD,EAAiB,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CACtD,IAAK,CACHC,UAAW,cAEb,wBAAyB,4BACzB,oBAAqBD,EAAME,QAAQC,WAAWC,MAC9C,4BAA6B,cAC7BC,YAAa,cACb,oBAAqB,CACnB,mBAAoB,cACpBC,QAAS,OACTC,WAAY,UAEd,2DAA4D,CAC1DC,QAAS,QAEX,yEAA0E,CACxEA,QAAS,QAEX,iFAAkF,CAChFA,QAAS,QAEX,6BAA8B,CAC5BC,gBAAiBC,EAAOC,KAAK,IAC7BN,YAAa,cACbO,aAAc,OAEhB,sCAAuC,CACrC,mBAAoB,CAClBA,aAAc,MACdC,OAAQ,OACRC,WAAY,gBACZL,gBAAiB,yBACjB,oBAAqB,CACnBA,gBAAiB,yBACjBI,OAAQ,OACRE,UAAW,wCACXC,aAAc,wCACd,gBAAiB,CACfC,WAAY,wCACZL,aAAc,eAEhB,eAAgB,CACdM,YAAa,wCACbN,aAAc,gBAGlB,UAAW,CACT,wBAAyBZ,EAAME,QAAQiB,QACvC,oBAAqBT,EAAOC,KAAK,IACjCS,UAAW,mBACXC,UAAW,wCACX,oBAAqB,CACnBC,eAAgB,QAChBC,kBAAmB,QACnB,gBAAiB,CACfC,gBAAiB,SAEnB,eAAgB,CACdC,iBAAkB,aAM7B"}
|
|
1
|
+
{"version":3,"file":"view-mode.content.js","sources":["../../src/data-view/view-mode.content.tsx"],"sourcesContent":["import React, { Component, ComponentType, FC, memo } from 'react'\r\nimport { Typography, Grid, styled, colors } from '@mui/material'\r\nimport { DataGrid, DataGridProps, GridColDef, GridRowIdGetter, GridValidRowModel } from '@mui/x-data-grid'\r\nimport { GridColsDef, IViewModeListConfig, IViewModeModuleConfig, IViewModeValidModel } from './view-mode.types'\r\n\r\n//#region Mode Module\r\nconst EmptyModule: FC = () => (\r\n <Typography variant='subtitle1' color='textSecondary'>\r\n No items to display\r\n </Typography>\r\n)\r\n\r\nexport interface IViewModeModuleProps<T extends IViewModeValidModel> {\r\n data: T[]\r\n configs: IViewModeModuleConfig<T>\r\n}\r\n\r\nexport function createViewModeModule<T extends IViewModeValidModel>(): ComponentType<IViewModeModuleProps<T>> {\r\n class ViewModeModule extends Component<IViewModeModuleProps<T>> {\r\n private ElementComponent\r\n constructor(props: IViewModeModuleProps<T>) {\r\n super(props)\r\n this.ElementComponent = props.configs.Element || EmptyModule\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IViewModeModuleProps<T>>): boolean {\r\n const { Element: currentElement, ...currentConfig } = this.props.configs\r\n const { Element: nextElement, ...nextConfigs } = nextProps.configs\r\n const checkElementDiff = currentElement !== nextElement\r\n if (checkElementDiff) {\r\n this.ElementComponent = nextProps.configs.Element || EmptyModule\r\n }\r\n\r\n const checkConfigsDiff = JSON.stringify(currentConfig) !== JSON.stringify(nextConfigs)\r\n const checkDataDiff = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)\r\n return checkDataDiff || checkConfigsDiff\r\n }\r\n\r\n render() {\r\n const { ElementComponent } = this\r\n const { data, configs } = this.props\r\n const size = configs.size || { xs: 12, sm: 6, md: 4, lg: 3 }\r\n return (\r\n <Grid container spacing={configs.spacing || 0} {...configs.wrapProps}>\r\n {data.map((item, index) => {\r\n const key = configs.getElementId ? configs.getElementId(item) : index.toString()\r\n const itemProps = configs.elementWrapPropsGetter ? configs.elementWrapPropsGetter({ data: item, index }) : configs.elementWrapProps || {}\r\n return (\r\n <Grid item key={key} {...size} {...itemProps}>\r\n <ElementComponent data={item} index={index} />\r\n </Grid>\r\n )\r\n })}\r\n </Grid>\r\n )\r\n }\r\n }\r\n\r\n return memo(ViewModeModule)\r\n}\r\n//#endregion\r\n\r\n//#region View Mode List\r\nexport interface IViewModeListProps<T extends IViewModeValidModel> {\r\n value: T[]\r\n configs: IViewModeListConfig<T>\r\n slots?: {\r\n dataGridProps?: Partial<Omit<DataGridProps, 'columns' | 'rows'>>\r\n }\r\n}\r\n\r\nexport function createViewModeList<T extends IViewModeValidModel>(): ComponentType<IViewModeListProps<T>> {\r\n const genarateColumns = (configs?: IViewModeListConfig<T>): GridColDef[] => {\r\n const cols: GridColsDef<T> = configs?.columns ?? {}\r\n const fields = Object.keys(cols) as (keyof T)[]\r\n return fields.map((field) => {\r\n const config = cols[field]\r\n return { field: String(field), sortable: false, ...config }\r\n })\r\n }\r\n\r\n class ViewModeList extends Component<IViewModeListProps<T>> {\r\n private columns: GridColDef[] = []\r\n constructor(props: IViewModeListProps<T>) {\r\n super(props)\r\n this.columns = genarateColumns(props.configs)\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IViewModeListProps<T>>): boolean {\r\n const checkValueDiff = JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)\r\n const checkListConfigsDiff = JSON.stringify(this.props.configs) !== JSON.stringify(nextProps.configs)\r\n if (checkListConfigsDiff) {\r\n this.columns = genarateColumns()\r\n }\r\n return checkValueDiff || checkListConfigsDiff\r\n }\r\n\r\n render() {\r\n const isRender = this.props.configs && Object.keys(this.props.configs?.columns ?? {}).length > 0\r\n if (!isRender) {\r\n return\r\n }\r\n const rows = this.props.value as GridValidRowModel[]\r\n return (\r\n <DataGridCustom\r\n hideFooter\r\n // disableColumnSorting\r\n disableColumnFilter\r\n disableColumnMenu\r\n getRowId={this.props.configs?.getRowId as GridRowIdGetter<GridValidRowModel>}\r\n rows={rows}\r\n rowHeight={this.props.configs?.rowHeight}\r\n columnHeaderHeight={48}\r\n getRowSpacing={({ isFirstVisible }) => ({ top: isFirstVisible ? 8 : 4, bottom: 4 })}\r\n columns={this.columns}\r\n disableColumnSelector\r\n {...this.props.slots?.dataGridProps}\r\n />\r\n )\r\n }\r\n }\r\n\r\n return memo(ViewModeList)\r\n}\r\n\r\nconst DataGridCustom = styled(DataGrid)(({ theme }) => ({\r\n '*': {\r\n boxSizing: 'border-box'\r\n },\r\n '--custom-border-color': 'rgba(145, 158, 171, 0.16)',\r\n '--custom-bg-color': theme.palette.background.paper,\r\n '--DataGrid-rowBorderColor': 'transparent',\r\n borderColor: 'transparent',\r\n '.MuiDataGrid-cell': {\r\n '--rowBorderColor': 'transparent',\r\n display: 'flex',\r\n alignItems: 'center'\r\n },\r\n '.MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus': {\r\n outline: 'none'\r\n },\r\n '.MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within': {\r\n outline: 'none'\r\n },\r\n '.MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible': {\r\n outline: 'none'\r\n },\r\n '.MuiDataGrid-columnHeaders': {\r\n backgroundColor: colors.grey[50],\r\n borderColor: 'transparent',\r\n borderRadius: '6px'\r\n },\r\n '.MuiDataGrid-virtualScrollerContent': {\r\n '.MuiDataGrid-row': {\r\n borderRadius: '6px',\r\n border: 'none',\r\n transition: 'all 0.2s ease',\r\n backgroundColor: 'var(--custom-bg-color)',\r\n '.MuiDataGrid-cell': {\r\n backgroundColor: 'var(--custom-bg-color)',\r\n border: 'none',\r\n borderTop: '1px dashed var(--custom-border-color)',\r\n borderBottom: '1px dashed var(--custom-border-color)',\r\n '&:first-of-type': {\r\n borderLeft: '1px dashed var(--custom-border-color)',\r\n borderRadius: '6px 0 0 6px'\r\n },\r\n '&:last-of-type': {\r\n borderRight: '1px dashed var(--custom-border-color)',\r\n borderRadius: '0 6px 6px 0'\r\n }\r\n },\r\n '&:hover': {\r\n '--custom-border-color': theme.palette.divider,\r\n '--custom-bg-color': colors.grey[50],\r\n transform: 'translateY(-1px)',\r\n boxShadow: 'rgba(99, 99, 99, 0.1) 0px 2px 8px 0px',\r\n '.MuiDataGrid-cell': {\r\n borderTopStyle: 'solid',\r\n borderBottomStyle: 'solid',\r\n '&:first-child': {\r\n borderLeftStyle: 'solid'\r\n },\r\n '&:last-child': {\r\n borderRightStyle: 'solid'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}))\r\n//#endregion\r\n"],"names":["EmptyModule","_jsx","Typography","variant","color","children","createViewModeModule","memo","ViewModeModule","props","_this","_classCallCheck","_callSuper","ElementComponent","configs","Element","_inherits","Component","_createClass","key","value","nextProps","_this$props$configs","this","currentElement","currentConfig","_objectWithoutProperties","_excluded","_nextProps$configs","nextElement","nextConfigs","_excluded2","checkConfigsDiff","JSON","stringify","data","_this$props","size","xs","sm","md","lg","Grid","_objectSpread","container","spacing","wrapProps","map","item","index","getElementId","toString","itemProps","elementWrapPropsGetter","elementWrapProps","createViewModeList","genarateColumns","_configs$columns","cols","columns","Object","keys","field","config","String","sortable","ViewModeList","_this2","_defineProperty","checkValueDiff","checkListConfigsDiff","_this$props$configs$c","_this$props$configs2","_this$props$configs3","_this$props$configs4","_this$props$slots","length","rows","DataGridCustom","hideFooter","disableColumnFilter","disableColumnMenu","getRowId","rowHeight","columnHeaderHeight","getRowSpacing","_ref","top","isFirstVisible","bottom","disableColumnSelector","slots","dataGridProps","styled","DataGrid","_ref2","theme","boxSizing","palette","background","paper","borderColor","display","alignItems","outline","backgroundColor","colors","grey","borderRadius","border","transition","borderTop","borderBottom","borderLeft","borderRight","divider","transform","boxShadow","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"view-mode.types.js","sources":["../../src/data-view/view-mode.types.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"view-mode.types.js","sources":["../../src/data-view/view-mode.types.ts"],"sourcesContent":["import { MotionProps } from 'framer-motion'\r\nimport { Breakpoint, GridProps } from '@mui/material'\r\nimport { GridColDef, GridRowIdGetter } from '@mui/x-data-grid'\r\n\r\nexport type IViewModeValidModel = {\r\n [key: string | symbol]: any\r\n}\r\n\r\nexport enum EViewMode {\r\n List = 'list',\r\n Module = 'module'\r\n}\r\n\r\nexport type IResponsiveSize = { [key in Breakpoint]?: number }\r\n\r\nexport interface IViewModeElementProps {\r\n mode?: EViewMode\r\n}\r\n\r\nexport interface IViewModeItemProps<T> {\r\n data: T\r\n index: number\r\n}\r\n\r\nexport type GridColsDef<T extends IViewModeValidModel> = { [key in keyof T]?: Omit<GridColDef<T>, 'field'> }\r\n\r\nexport interface IViewModeListConfig<T extends IViewModeValidModel> {\r\n getRowId?: GridRowIdGetter<T>\r\n columns?: GridColsDef<T>\r\n rowHeight?: number\r\n}\r\n\r\nexport type IViewModeModuleConfig<T> = {\r\n getElementId?: (value: T) => string | number\r\n Element?: React.ComponentType<IViewModeItemProps<T>>\r\n elementWrapProps?: Omit<GridProps, 'size' | 'children'>\r\n elementWrapPropsGetter?: (props: IViewModeItemProps<T>) => Omit<GridProps, 'size' | 'children'>\r\n spacing?: GridProps['spacing']\r\n size?: IResponsiveSize\r\n wrapProps?: Omit<GridProps, 'size' | 'children'>\r\n}\r\n\r\nexport interface IViewModeConfigs<T extends IViewModeValidModel> {\r\n list?: IViewModeListConfig<T>\r\n module?: IViewModeModuleConfig<T>\r\n NoData?: React.ComponentType<IViewModeElementProps>\r\n ErrorData?: React.ComponentType<IViewModeElementProps>\r\n Skeleton?: React.ComponentType<IViewModeElementProps>\r\n wrapProps?: MotionProps\r\n defaultValue?: EViewMode\r\n}\r\n"],"names":["EViewMode"],"mappings":"IAQYA,GAAZ,SAAYA,GACVA,EAAA,KAAA,OACAA,EAAA,OAAA,QACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as r,objectSpread2 as o}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useCallback as
|
|
1
|
+
import{defineProperty as r,objectSpread2 as o}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useCallback as n}from"react";import{styled as t,ToggleButtonGroup as i,colors as l,Box as c,Tooltip as d,ToggleButton as s,Typography as p}from"@mui/material";import u from"@mui/icons-material/ViewList";import g from"@mui/icons-material/ViewModule";import{EViewMode as h}from"./view-mode.types.js";var m=h.List,b=[{value:h.Module,icon:e(g,{}),label:"Card Grid"},{value:h.List,icon:e(u,{}),label:"Detailed List"}],f=function(r){var o=r.value,a=r.onChange,t=void 0===a?function(){}:a,i=o&&Object.values(h).includes(o)?o:m,l=n((function(r){null!==r&&r!==i&&t(r)}),[i,t]);return e(y,{size:"small",value:i,exclusive:!0,onChange:function(r,o){return l(o)},children:b.map((function(r){return e(d,{title:r.label,arrow:!0,children:e(s,{size:"small",value:r.value,"aria-label":r.label,sx:{p:"5px"},children:r.icon})},r.value)}))})},v=function(){return f},y=t(i)((function(o){var e=o.theme;return r({flex:"0 0 auto",".MuiToggleButtonGroup-grouped":{"&.Mui-selected":{color:l.common.white,backgroundColor:"var(--color-orange, ".concat(l.blue[600],")"),borderColor:"var(--color-orange, ".concat(l.blue[600],")"),"&.MuiToggleButtonGroup-lastButton":{borderColor:"var(--color-orange, ".concat(l.blue[600],")")},"&:hover":{backgroundColor:"var(--color-orange, ".concat(l.blue[600],")")}}}},e.breakpoints.down("md"),{display:"none"})})),x=function(r){return e(w,o(o({},r),{},{children:a(c,{className:"loading-overlay__content",children:[e(c,{className:"loading-overlay__spinner"}),e(p,{variant:"body2",color:"primary",children:"Loading..."})]})}))},w=t(c)({position:"absolute",top:0,left:0,right:0,bottom:0,bgcolor:"rgba(255, 255, 255, 0.7)",display:"flex",alignItems:"flex-start",justifyContent:"center",zIndex:1e3,paddingTop:"20vh",backdropFilter:"blur(2px)",".loading-overlay__content":{display:"flex",alignItems:"center",gap:"10px"},".loading-overlay__spinner":{width:24,height:24,border:"3px solid",borderColor:l.grey[300],borderTopColor:"var(--color-orange, ".concat(l.blue[600],")"),borderRadius:"50%","@keyframes spin":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}},animation:"spin 1s linear infinite"},".MuiTypography-root":{color:"var(--color-orange, ".concat(l.blue[600],")")}}),C=function(r){var o=r.error;return a(M,{children:[e(p,{variant:"h6",gutterBottom:!0,children:"An error occurred"}),e(p,{variant:"body2",children:o})]})},M=t(c)({marginTop:3,padding:3,border:"1px solid",borderColor:"error.main",borderRadius:1,bgcolor:"error.light",color:"error.contrastText"}),T=t("div")((function(r){var e=r.theme;return{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%","& .no-rows-primary":o({fill:"#3D4751"},e.applyStyles("light",{fill:"#AEB8C2"})),"& .no-rows-secondary":o({fill:"#1D2126"},e.applyStyles("light",{fill:"#E8EAED"}))}})),Z=function(){return a(_,{children:[a(T,{children:[a("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",width:96,viewBox:"0 0 452 257","aria-hidden":!0,focusable:"false",children:[e("path",{className:"no-rows-primary",d:"M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z"}),e("path",{className:"no-rows-primary",d:"M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z"}),e("path",{className:"no-rows-primary",d:"M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z"}),e("path",{className:"no-rows-secondary",d:"M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z"})]}),e(p,{variant:"h6",color:"text.secondary",gutterBottom:!0,children:"No data available"})]}),e(p,{variant:"body2",color:"text.secondary",children:"Try changing the filter or search keyword"})]})},_=t(c)({marginTop:"8px",padding:"24px 12px",textAlign:"center",border:"1px dashed",borderColor:l.grey[400],borderRadius:"6px"}),B=function(){return a(j,{children:[e(p,{variant:"h6",color:"text.primary",sx:{fontWeight:"bold"},children:"Waiting for data..."}),e(p,{variant:"body2",color:"text.secondary",children:"Please wait while we fetch the data."})]})},j=t(c)({marginTop:"8px",padding:"24px 12px",textAlign:"center",border:"1px dashed",borderColor:l.grey[400],borderRadius:"6px"});t(c)({marginTop:3,padding:4,textAlign:"center",border:"1px dashed",borderColor:l.red[700],borderRadius:1});export{C as LoadingError,Z as LoadingNoData,x as LoadingOverlay,B as LoadingWaiting,f as ViewModeButtons,v as createViewModeButtons,m as defaultViewMode};
|
|
2
2
|
//# sourceMappingURL=view-mode.units.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"view-mode.units.js","sources":["../../src/data-view/view-mode.units.tsx"],"sourcesContent":["import { FC, useCallback } from 'react'\r\nimport { Box, BoxProps, colors, styled, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material'\r\nimport ViewListIcon from '@mui/icons-material/ViewList'\r\nimport ViewModuleIcon from '@mui/icons-material/ViewModule'\r\nimport { EViewMode, IResponsiveSize, IViewModeElementProps } from './view-mode.types'\r\n\r\nexport const defaultSize: IResponsiveSize = { xs: 12, sm: 6, md: 4, lg: 3 }\r\n\r\nexport const defaultViewMode = EViewMode.List\r\n\r\nconst viewModes = [\r\n { value: EViewMode.Module, icon: <ViewModuleIcon />, label: 'Card Grid' },\r\n { value: EViewMode.List, icon: <ViewListIcon />, label: 'Detailed List' }\r\n]\r\n\r\nexport interface IViewModeProps {\r\n value?: EViewMode\r\n onChange?: (value: EViewMode) => void\r\n}\r\n\r\nexport const ViewModeButtons: FC<IViewModeProps> = (props) => {\r\n const { value, onChange = () => {} } = props\r\n const normalizedValue = value && Object.values(EViewMode).includes(value as EViewMode) ? value : defaultViewMode\r\n\r\n const handleChange = useCallback(\r\n (newValue: EViewMode | null) => {\r\n if (newValue !== null && newValue !== normalizedValue) {\r\n onChange(newValue)\r\n }\r\n },\r\n [normalizedValue, onChange]\r\n )\r\n\r\n return (\r\n <ToggleButtonGroupCustom size='small' value={normalizedValue} exclusive onChange={(_, v) => handleChange(v)}>\r\n {viewModes.map((mode) => (\r\n <Tooltip key={mode.value} title={mode.label} arrow>\r\n <ToggleButton size='small' value={mode.value} aria-label={mode.label} sx={{ p: '5px' }}>\r\n {mode.icon}\r\n </ToggleButton>\r\n </Tooltip>\r\n ))}\r\n </ToggleButtonGroupCustom>\r\n )\r\n}\r\n\r\nexport const createViewModeButtons = () => ViewModeButtons\r\n\r\nconst ToggleButtonGroupCustom = styled(ToggleButtonGroup)(({ theme }) => ({\r\n flex: '0 0 auto',\r\n '.MuiToggleButtonGroup-grouped': {\r\n '&.Mui-selected': {\r\n color: colors.common.white,\r\n backgroundColor: `var(--color-orange, ${colors.blue[600]})`,\r\n borderColor: `var(--color-orange, ${colors.blue[600]})`,\r\n '&.MuiToggleButtonGroup-lastButton': {\r\n borderColor: `var(--color-orange, ${colors.blue[600]})`\r\n },\r\n '&:hover': {\r\n backgroundColor: `var(--color-orange, ${colors.blue[600]})`\r\n }\r\n }\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n display: 'none'\r\n }\r\n}))\r\n\r\nexport const LoadingOverlay: FC<BoxProps> = (props) => (\r\n <LoadingOverlayWrap {...props}>\r\n <Box className='loading-overlay__content'>\r\n <Box className='loading-overlay__spinner' />\r\n <Typography variant='body2' color='primary'>\r\n Loading...\r\n </Typography>\r\n </Box>\r\n </LoadingOverlayWrap>\r\n)\r\n\r\nconst LoadingOverlayWrap = styled(Box)({\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n bgcolor: 'rgba(255, 255, 255, 0.7)',\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n justifyContent: 'center',\r\n zIndex: 1,\r\n paddingTop: '20vh',\r\n backdropFilter: 'blur(2px)',\r\n '.loading-overlay__content': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '10px'\r\n },\r\n '.loading-overlay__spinner': {\r\n width: 24,\r\n height: 24,\r\n border: '3px solid',\r\n borderColor: colors.grey[300],\r\n borderTopColor: `var(--color-orange, ${colors.blue[600]})`,\r\n borderRadius: '50%',\r\n '@keyframes spin': {\r\n '0%': { transform: 'rotate(0deg)' },\r\n '100%': { transform: 'rotate(360deg)' }\r\n },\r\n animation: 'spin 1s linear infinite'\r\n },\r\n '.MuiTypography-root': {\r\n color: `var(--color-orange, ${colors.blue[600]})`\r\n }\r\n})\r\n\r\nexport const LoadingError: FC<{ error: string }> = ({ error }) => (\r\n <LoadingErrorWrap>\r\n <Typography variant='h6' gutterBottom>\r\n An error occurred\r\n </Typography>\r\n <Typography variant='body2'>{error}</Typography>\r\n </LoadingErrorWrap>\r\n)\r\n\r\nconst LoadingErrorWrap = styled(Box)({\r\n marginTop: 3,\r\n padding: 3,\r\n border: '1px solid',\r\n borderColor: 'error.main',\r\n borderRadius: 1,\r\n bgcolor: 'error.light',\r\n color: 'error.contrastText'\r\n})\r\n\r\nconst StyledGridOverlay = styled('div')(({ theme }) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n height: '100%',\r\n '& .no-rows-primary': {\r\n fill: '#3D4751',\r\n ...theme.applyStyles('light', {\r\n fill: '#AEB8C2'\r\n })\r\n },\r\n '& .no-rows-secondary': {\r\n fill: '#1D2126',\r\n ...theme.applyStyles('light', {\r\n fill: '#E8EAED'\r\n })\r\n }\r\n}))\r\n\r\nexport const LoadingNoData: FC<IViewModeElementProps> = () => (\r\n <LoadingNoDataWrap>\r\n <StyledGridOverlay>\r\n <svg xmlns='http://www.w3.org/2000/svg' fill='none' width={96} viewBox='0 0 452 257' aria-hidden focusable='false'>\r\n <path\r\n className='no-rows-primary'\r\n d='M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z'\r\n />\r\n <path\r\n className='no-rows-primary'\r\n d='M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z'\r\n />\r\n <path\r\n className='no-rows-primary'\r\n d='M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z'\r\n />\r\n <path\r\n className='no-rows-secondary'\r\n d='M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z'\r\n />\r\n </svg>\r\n <Typography variant='h6' color='text.secondary' gutterBottom>\r\n No data available\r\n </Typography>\r\n </StyledGridOverlay>\r\n <Typography variant='body2' color='text.secondary'>\r\n Try changing the filter or search keyword\r\n </Typography>\r\n </LoadingNoDataWrap>\r\n)\r\n\r\nconst LoadingNoDataWrap = styled(Box)({\r\n marginTop: '8px',\r\n padding: '24px 12px',\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.grey[400],\r\n borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingWaiting: FC = () => (\r\n <LoadingWaitingWrap>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Waiting for data...\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please wait while we fetch the data.\r\n </Typography>\r\n </LoadingWaitingWrap>\r\n)\r\n\r\nconst LoadingWaitingWrap = styled(Box)({\r\n marginTop: '8px',\r\n padding: '24px 12px',\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.grey[400],\r\n borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingMissingConfig: React.FC = () => (\r\n <LoadingMissingConfigWrap>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Missing Configuration\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n We're sorry, but it looks like there's a missing configuration required for this feature to work correctly.\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please contact support for assistance.\r\n </Typography>\r\n </LoadingMissingConfigWrap>\r\n)\r\n\r\nconst LoadingMissingConfigWrap = styled(Box)({\r\n marginTop: 3,\r\n padding: 4,\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.red[700],\r\n borderRadius: 1\r\n})\r\n"],"names":["defaultViewMode","EViewMode","List","viewModes","value","Module","icon","_jsx","ViewModuleIcon","label","ViewListIcon","ViewModeButtons","props","_props$onChange","onChange","normalizedValue","Object","values","includes","handleChange","useCallback","newValue","ToggleButtonGroupCustom","size","exclusive","_","v","children","map","mode","Tooltip","title","arrow","ToggleButton","sx","p","createViewModeButtons","styled","ToggleButtonGroup","_ref","theme","_defineProperty","flex","color","colors","common","white","backgroundColor","concat","blue","borderColor","breakpoints","down","display","LoadingOverlay","LoadingOverlayWrap","_objectSpread","_jsxs","Box","className","Typography","variant","position","top","left","right","bottom","bgcolor","alignItems","justifyContent","zIndex","paddingTop","backdropFilter","gap","width","height","border","grey","borderTopColor","borderRadius","transform","animation","LoadingError","_ref3","error","LoadingErrorWrap","gutterBottom","marginTop","padding","StyledGridOverlay","_ref4","flexDirection","fill","applyStyles","LoadingNoData","LoadingNoDataWrap","xmlns","viewBox","focusable","d","textAlign","LoadingWaiting","LoadingWaitingWrap","fontWeight","LoadingMissingConfig","LoadingMissingConfigWrap","red"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"view-mode.units.js","sources":["../../src/data-view/view-mode.units.tsx"],"sourcesContent":["import { FC, useCallback } from 'react'\r\nimport { Box, BoxProps, colors, styled, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material'\r\nimport ViewListIcon from '@mui/icons-material/ViewList'\r\nimport ViewModuleIcon from '@mui/icons-material/ViewModule'\r\nimport { EViewMode, IResponsiveSize, IViewModeElementProps } from './view-mode.types'\r\n\r\nexport const defaultSize: IResponsiveSize = { xs: 12, sm: 6, md: 4, lg: 3 }\r\n\r\nexport const defaultViewMode = EViewMode.List\r\n\r\nconst viewModes = [\r\n { value: EViewMode.Module, icon: <ViewModuleIcon />, label: 'Card Grid' },\r\n { value: EViewMode.List, icon: <ViewListIcon />, label: 'Detailed List' }\r\n]\r\n\r\nexport interface IViewModeProps {\r\n value?: EViewMode\r\n onChange?: (value: EViewMode) => void\r\n}\r\n\r\nexport const ViewModeButtons: FC<IViewModeProps> = (props) => {\r\n const { value, onChange = () => {} } = props\r\n const normalizedValue = value && Object.values(EViewMode).includes(value as EViewMode) ? value : defaultViewMode\r\n\r\n const handleChange = useCallback(\r\n (newValue: EViewMode | null) => {\r\n if (newValue !== null && newValue !== normalizedValue) {\r\n onChange(newValue)\r\n }\r\n },\r\n [normalizedValue, onChange]\r\n )\r\n\r\n return (\r\n <ToggleButtonGroupCustom size='small' value={normalizedValue} exclusive onChange={(_, v) => handleChange(v)}>\r\n {viewModes.map((mode) => (\r\n <Tooltip key={mode.value} title={mode.label} arrow>\r\n <ToggleButton size='small' value={mode.value} aria-label={mode.label} sx={{ p: '5px' }}>\r\n {mode.icon}\r\n </ToggleButton>\r\n </Tooltip>\r\n ))}\r\n </ToggleButtonGroupCustom>\r\n )\r\n}\r\n\r\nexport const createViewModeButtons = () => ViewModeButtons\r\n\r\nconst ToggleButtonGroupCustom = styled(ToggleButtonGroup)(({ theme }) => ({\r\n flex: '0 0 auto',\r\n '.MuiToggleButtonGroup-grouped': {\r\n '&.Mui-selected': {\r\n color: colors.common.white,\r\n backgroundColor: `var(--color-orange, ${colors.blue[600]})`,\r\n borderColor: `var(--color-orange, ${colors.blue[600]})`,\r\n '&.MuiToggleButtonGroup-lastButton': {\r\n borderColor: `var(--color-orange, ${colors.blue[600]})`\r\n },\r\n '&:hover': {\r\n backgroundColor: `var(--color-orange, ${colors.blue[600]})`\r\n }\r\n }\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n display: 'none'\r\n }\r\n}))\r\n\r\nexport const LoadingOverlay: FC<BoxProps> = (props) => (\r\n <LoadingOverlayWrap {...props}>\r\n <Box className='loading-overlay__content'>\r\n <Box className='loading-overlay__spinner' />\r\n <Typography variant='body2' color='primary'>\r\n Loading...\r\n </Typography>\r\n </Box>\r\n </LoadingOverlayWrap>\r\n)\r\n\r\nconst LoadingOverlayWrap = styled(Box)({\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n bgcolor: 'rgba(255, 255, 255, 0.7)',\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n justifyContent: 'center',\r\n zIndex: 1000,\r\n paddingTop: '20vh',\r\n backdropFilter: 'blur(2px)',\r\n '.loading-overlay__content': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '10px'\r\n },\r\n '.loading-overlay__spinner': {\r\n width: 24,\r\n height: 24,\r\n border: '3px solid',\r\n borderColor: colors.grey[300],\r\n borderTopColor: `var(--color-orange, ${colors.blue[600]})`,\r\n borderRadius: '50%',\r\n '@keyframes spin': {\r\n '0%': { transform: 'rotate(0deg)' },\r\n '100%': { transform: 'rotate(360deg)' }\r\n },\r\n animation: 'spin 1s linear infinite'\r\n },\r\n '.MuiTypography-root': {\r\n color: `var(--color-orange, ${colors.blue[600]})`\r\n }\r\n})\r\n\r\nexport const LoadingError: FC<{ error: string }> = ({ error }) => (\r\n <LoadingErrorWrap>\r\n <Typography variant='h6' gutterBottom>\r\n An error occurred\r\n </Typography>\r\n <Typography variant='body2'>{error}</Typography>\r\n </LoadingErrorWrap>\r\n)\r\n\r\nconst LoadingErrorWrap = styled(Box)({\r\n marginTop: 3,\r\n padding: 3,\r\n border: '1px solid',\r\n borderColor: 'error.main',\r\n borderRadius: 1,\r\n bgcolor: 'error.light',\r\n color: 'error.contrastText'\r\n})\r\n\r\nconst StyledGridOverlay = styled('div')(({ theme }) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n height: '100%',\r\n '& .no-rows-primary': {\r\n fill: '#3D4751',\r\n ...theme.applyStyles('light', {\r\n fill: '#AEB8C2'\r\n })\r\n },\r\n '& .no-rows-secondary': {\r\n fill: '#1D2126',\r\n ...theme.applyStyles('light', {\r\n fill: '#E8EAED'\r\n })\r\n }\r\n}))\r\n\r\nexport const LoadingNoData: FC<IViewModeElementProps> = () => (\r\n <LoadingNoDataWrap>\r\n <StyledGridOverlay>\r\n <svg xmlns='http://www.w3.org/2000/svg' fill='none' width={96} viewBox='0 0 452 257' aria-hidden focusable='false'>\r\n <path\r\n className='no-rows-primary'\r\n d='M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z'\r\n />\r\n <path\r\n className='no-rows-primary'\r\n d='M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z'\r\n />\r\n <path\r\n className='no-rows-primary'\r\n d='M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z'\r\n />\r\n <path\r\n className='no-rows-secondary'\r\n d='M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z'\r\n />\r\n </svg>\r\n <Typography variant='h6' color='text.secondary' gutterBottom>\r\n No data available\r\n </Typography>\r\n </StyledGridOverlay>\r\n <Typography variant='body2' color='text.secondary'>\r\n Try changing the filter or search keyword\r\n </Typography>\r\n </LoadingNoDataWrap>\r\n)\r\n\r\nconst LoadingNoDataWrap = styled(Box)({\r\n marginTop: '8px',\r\n padding: '24px 12px',\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.grey[400],\r\n borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingWaiting: FC = () => (\r\n <LoadingWaitingWrap>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Waiting for data...\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please wait while we fetch the data.\r\n </Typography>\r\n </LoadingWaitingWrap>\r\n)\r\n\r\nconst LoadingWaitingWrap = styled(Box)({\r\n marginTop: '8px',\r\n padding: '24px 12px',\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.grey[400],\r\n borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingMissingConfig: React.FC = () => (\r\n <LoadingMissingConfigWrap>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Missing Configuration\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n We're sorry, but it looks like there's a missing configuration required for this feature to work correctly.\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please contact support for assistance.\r\n </Typography>\r\n </LoadingMissingConfigWrap>\r\n)\r\n\r\nconst LoadingMissingConfigWrap = styled(Box)({\r\n marginTop: 3,\r\n padding: 4,\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.red[700],\r\n borderRadius: 1\r\n})\r\n"],"names":["defaultViewMode","EViewMode","List","viewModes","value","Module","icon","_jsx","ViewModuleIcon","label","ViewListIcon","ViewModeButtons","props","_props$onChange","onChange","normalizedValue","Object","values","includes","handleChange","useCallback","newValue","ToggleButtonGroupCustom","size","exclusive","_","v","children","map","mode","Tooltip","title","arrow","ToggleButton","sx","p","createViewModeButtons","styled","ToggleButtonGroup","_ref","theme","_defineProperty","flex","color","colors","common","white","backgroundColor","concat","blue","borderColor","breakpoints","down","display","LoadingOverlay","LoadingOverlayWrap","_objectSpread","_jsxs","Box","className","Typography","variant","position","top","left","right","bottom","bgcolor","alignItems","justifyContent","zIndex","paddingTop","backdropFilter","gap","width","height","border","grey","borderTopColor","borderRadius","transform","animation","LoadingError","_ref3","error","LoadingErrorWrap","gutterBottom","marginTop","padding","StyledGridOverlay","_ref4","flexDirection","fill","applyStyles","LoadingNoData","LoadingNoDataWrap","xmlns","viewBox","focusable","d","textAlign","LoadingWaiting","LoadingWaitingWrap","fontWeight","red"],"mappings":"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"}
|
|
@@ -2,6 +2,10 @@ import { ComponentType } from 'react';
|
|
|
2
2
|
import { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types';
|
|
3
3
|
interface IViewModeSlots<T extends IViewModeValidModel> extends IViewModeConfigs<T> {
|
|
4
4
|
}
|
|
5
|
+
/**
|
|
6
|
+
* Props for ViewMode component
|
|
7
|
+
* @template T - Type extending IViewModeValidModel
|
|
8
|
+
*/
|
|
5
9
|
interface IViewModeProps<T extends IViewModeValidModel> {
|
|
6
10
|
data: T[];
|
|
7
11
|
viewMode?: EViewMode;
|
|
@@ -3,10 +3,9 @@ import type { ButtonProps } from '@mui/material';
|
|
|
3
3
|
import type { IFilterNotesProps } from './ui.units';
|
|
4
4
|
export type SingleOrArray<T> = T | T[];
|
|
5
5
|
export type IRelativePosition = 'above' | 'below' | 'left' | 'right';
|
|
6
|
-
export type
|
|
7
|
-
[key in
|
|
6
|
+
export type IPositionElement<K extends IRelativePosition = IRelativePosition> = {
|
|
7
|
+
[key in K]?: ReactNode;
|
|
8
8
|
};
|
|
9
|
-
export type IPositionElement<K extends IRelativePosition = IRelativePosition> = Pick<IPositionElementDef, K>;
|
|
10
9
|
export declare enum EViewStatus {
|
|
11
10
|
Loading = "Loading",
|
|
12
11
|
Loaded = "Loaded",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentType } from 'react';
|
|
2
2
|
import { DataGridProps } from '@mui/x-data-grid';
|
|
3
3
|
import { IViewModeListConfig, IViewModeModuleConfig, IViewModeValidModel } from './view-mode.types';
|
|
4
|
-
interface IViewModeModuleProps<T extends IViewModeValidModel> {
|
|
4
|
+
export interface IViewModeModuleProps<T extends IViewModeValidModel> {
|
|
5
5
|
data: T[];
|
|
6
6
|
configs: IViewModeModuleConfig<T>;
|
|
7
7
|
}
|
|
@@ -14,4 +14,3 @@ export interface IViewModeListProps<T extends IViewModeValidModel> {
|
|
|
14
14
|
};
|
|
15
15
|
}
|
|
16
16
|
export declare function createViewModeList<T extends IViewModeValidModel>(): ComponentType<IViewModeListProps<T>>;
|
|
17
|
-
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { MotionProps } from 'framer-motion';
|
|
3
|
+
import { Breakpoint, GridProps } from '@mui/material';
|
|
3
4
|
import { GridColDef, GridRowIdGetter } from '@mui/x-data-grid';
|
|
4
5
|
export type IViewModeValidModel = {
|
|
5
6
|
[key: string | symbol]: any;
|
|
@@ -41,6 +42,6 @@ export interface IViewModeConfigs<T extends IViewModeValidModel> {
|
|
|
41
42
|
NoData?: React.ComponentType<IViewModeElementProps>;
|
|
42
43
|
ErrorData?: React.ComponentType<IViewModeElementProps>;
|
|
43
44
|
Skeleton?: React.ComponentType<IViewModeElementProps>;
|
|
44
|
-
wrapProps?:
|
|
45
|
+
wrapProps?: MotionProps;
|
|
45
46
|
defaultValue?: EViewMode;
|
|
46
47
|
}
|
package/package.json
CHANGED
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "dinocollab-core",
|
|
3
|
-
"version": "1.1.
|
|
4
|
-
"description": "",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"module": "dist/index.js",
|
|
7
|
-
"types": "dist/types/index.d.ts",
|
|
8
|
-
"exports": {
|
|
9
|
-
".": {
|
|
10
|
-
"import": "./dist/index.js",
|
|
11
|
-
"types": "./dist/types/index.d.ts"
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
"files": [
|
|
15
|
-
"dist"
|
|
16
|
-
],
|
|
17
|
-
"scripts": {
|
|
18
|
-
"build": "npx rimraf dist && rollup -c",
|
|
19
|
-
"build:watch": "rollup -c -w"
|
|
20
|
-
},
|
|
21
|
-
"keywords": [],
|
|
22
|
-
"author": "",
|
|
23
|
-
"license": "ISC",
|
|
24
|
-
"peerDependencies": {
|
|
25
|
-
"@emotion/react": "11.14.0",
|
|
26
|
-
"@emotion/styled": "11.14.0",
|
|
27
|
-
"@mui/icons-material": "5.17.1",
|
|
28
|
-
"@mui/material": "5.17.1",
|
|
29
|
-
"@mui/x-data-grid": "6.20.4",
|
|
30
|
-
"@mui/x-date-pickers": "6.20.2",
|
|
31
|
-
"axios": "1.8.3",
|
|
32
|
-
"clipboard-copy": "4.0.1",
|
|
33
|
-
"dayjs": "1.11.5",
|
|
34
|
-
"dinocollab-http-service": "1.1.5",
|
|
35
|
-
"dotenv": "16.4.7",
|
|
36
|
-
"framer-motion": "12.12.1",
|
|
37
|
-
"query-string": "9.1.1",
|
|
38
|
-
"react": "18.3.1",
|
|
39
|
-
"react-dom": "18.3.1",
|
|
40
|
-
"react-quill": "2.0.0",
|
|
41
|
-
"react-router-dom": "6.30.0"
|
|
42
|
-
},
|
|
43
|
-
"devDependencies": {
|
|
44
|
-
"@babel/core": "7.27.1",
|
|
45
|
-
"@babel/preset-env": "7.27.2",
|
|
46
|
-
"@babel/preset-react": "7.27.1",
|
|
47
|
-
"@babel/preset-typescript": "7.27.1",
|
|
48
|
-
"@rollup/plugin-babel": "6.0.4",
|
|
49
|
-
"@rollup/plugin-commonjs": "28.0.3",
|
|
50
|
-
"@rollup/plugin-node-resolve": "16.0.1",
|
|
51
|
-
"@rollup/plugin-typescript": "12.1.2",
|
|
52
|
-
"@rollup/plugin-url": "8.0.2",
|
|
53
|
-
"@types/node": "16.18.126",
|
|
54
|
-
"@types/react": "18.3.20",
|
|
55
|
-
"@types/react-dom": "18.3.5",
|
|
56
|
-
"babel-preset-react": "6.24.1",
|
|
57
|
-
"babel-preset-typescript": "7.0.0-alpha.19",
|
|
58
|
-
"rollup": "4.41.0",
|
|
59
|
-
"rollup-plugin-copy": "3.5.0",
|
|
60
|
-
"rollup-plugin-peer-deps-external": "2.2.4",
|
|
61
|
-
"rollup-plugin-postcss": "4.0.2",
|
|
62
|
-
"rollup-plugin-terser": "7.0.2",
|
|
63
|
-
"tslib": "2.8.1",
|
|
64
|
-
"typescript": "4.9.5"
|
|
65
|
-
}
|
|
66
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "dinocollab-core",
|
|
3
|
+
"version": "1.1.12",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
|
+
"types": "dist/types/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/index.js",
|
|
11
|
+
"types": "./dist/types/index.d.ts"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "npx rimraf dist && rollup -c",
|
|
19
|
+
"build:watch": "rollup -c -w"
|
|
20
|
+
},
|
|
21
|
+
"keywords": [],
|
|
22
|
+
"author": "",
|
|
23
|
+
"license": "ISC",
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"@emotion/react": "11.14.0",
|
|
26
|
+
"@emotion/styled": "11.14.0",
|
|
27
|
+
"@mui/icons-material": "5.17.1",
|
|
28
|
+
"@mui/material": "5.17.1",
|
|
29
|
+
"@mui/x-data-grid": "6.20.4",
|
|
30
|
+
"@mui/x-date-pickers": "6.20.2",
|
|
31
|
+
"axios": "1.8.3",
|
|
32
|
+
"clipboard-copy": "4.0.1",
|
|
33
|
+
"dayjs": "1.11.5",
|
|
34
|
+
"dinocollab-http-service": "1.1.5",
|
|
35
|
+
"dotenv": "16.4.7",
|
|
36
|
+
"framer-motion": "12.12.1",
|
|
37
|
+
"query-string": "9.1.1",
|
|
38
|
+
"react": "18.3.1",
|
|
39
|
+
"react-dom": "18.3.1",
|
|
40
|
+
"react-quill": "2.0.0",
|
|
41
|
+
"react-router-dom": "6.30.0"
|
|
42
|
+
},
|
|
43
|
+
"devDependencies": {
|
|
44
|
+
"@babel/core": "7.27.1",
|
|
45
|
+
"@babel/preset-env": "7.27.2",
|
|
46
|
+
"@babel/preset-react": "7.27.1",
|
|
47
|
+
"@babel/preset-typescript": "7.27.1",
|
|
48
|
+
"@rollup/plugin-babel": "6.0.4",
|
|
49
|
+
"@rollup/plugin-commonjs": "28.0.3",
|
|
50
|
+
"@rollup/plugin-node-resolve": "16.0.1",
|
|
51
|
+
"@rollup/plugin-typescript": "12.1.2",
|
|
52
|
+
"@rollup/plugin-url": "8.0.2",
|
|
53
|
+
"@types/node": "16.18.126",
|
|
54
|
+
"@types/react": "18.3.20",
|
|
55
|
+
"@types/react-dom": "18.3.5",
|
|
56
|
+
"babel-preset-react": "6.24.1",
|
|
57
|
+
"babel-preset-typescript": "7.0.0-alpha.19",
|
|
58
|
+
"rollup": "4.41.0",
|
|
59
|
+
"rollup-plugin-copy": "3.5.0",
|
|
60
|
+
"rollup-plugin-peer-deps-external": "2.2.4",
|
|
61
|
+
"rollup-plugin-postcss": "4.0.2",
|
|
62
|
+
"rollup-plugin-terser": "7.0.2",
|
|
63
|
+
"tslib": "2.8.1",
|
|
64
|
+
"typescript": "4.9.5"
|
|
65
|
+
}
|
|
66
|
+
}
|