dinocollab-core 1.0.17 → 1.0.19
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/filter-bar/create.filter-menu.js +1 -1
- package/dist/filter-bar/create.filter-menu.js.map +1 -1
- package/dist/form/create.autocomplete.chips.js +1 -1
- package/dist/form/create.autocomplete.chips.js.map +1 -1
- package/dist/form/create.date-expired.js +1 -1
- package/dist/form/create.date-expired.js.map +1 -1
- package/dist/form/create.date-picker.js +1 -1
- package/dist/form/create.date-picker.js.map +1 -1
- package/dist/form/create.form-base.js +1 -1
- package/dist/form/create.form-base.js.map +1 -1
- package/dist/form/create.input-file.csv-local-parser.js +2 -0
- package/dist/form/create.input-file.csv-local-parser.js.map +1 -0
- package/dist/form/create.input.file.js +1 -1
- package/dist/form/create.input.file.js.map +1 -1
- package/dist/form/create.input.js +1 -1
- package/dist/form/create.input.js.map +1 -1
- package/dist/form/create.select-simple.js +1 -1
- package/dist/form/create.select-simple.js.map +1 -1
- package/dist/form/create.select-with-api.js +1 -1
- package/dist/form/create.select-with-api.js.map +1 -1
- package/dist/form/create.text-editor.js +1 -1
- package/dist/form/create.text-editor.js.map +1 -1
- package/dist/form/dino-form.js +1 -1
- package/dist/form/dino-form.js.map +1 -1
- package/dist/form/helpers.js +2 -0
- package/dist/form/helpers.js.map +1 -0
- package/dist/index.js +1 -1
- package/dist/table/ui.units.js +1 -1
- package/dist/table/ui.units.js.map +1 -1
- package/dist/types/form/create.input-file.csv-local-parser.d.ts +52 -0
- package/dist/types/form/dino-form.d.ts +3 -1
- package/dist/types/form/{helper.d.ts → helpers.d.ts} +18 -1
- package/dist/types/form/index.d.ts +1 -1
- package/dist/types/table/ui.units.d.ts +1 -0
- package/dist/types/utils/helpers.d.ts +5 -4
- package/dist/utils/helpers.js +1 -1
- package/dist/utils/helpers.js.map +1 -1
- package/package.json +1 -1
- package/dist/form/helper.js +0 -2
- package/dist/form/helper.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.input.js","sources":["../../src/form/create.input.tsx"],"sourcesContent":["import React, { Component, ComponentType, FC } from 'react'\r\nimport { Box, CircularProgress, Collapse, IconButton, InputAdornment, styled, TextField, TextFieldProps } from '@mui/material'\r\nimport ContentPasteIcon from '@mui/icons-material/ContentPaste'\r\nimport { mergeObjects } from '../utils'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helper'\r\nimport { ImageWithFallback, IImageWithFallbackPropsOwner } from '../components'\r\n\r\nexport interface InputBaseImage<T> extends Partial<IImageWithFallbackPropsOwner> {\r\n srcGetter?: (value: any, model?: Partial<T>) => string\r\n element?: React.ComponentType<{ value: any; model?: Partial<T> }>\r\n mirror?: boolean\r\n}\r\n\r\nexport interface IInputSlots<T> {\r\n maxLength?: number\r\n textFieldProps?: TextFieldProps\r\n pastenable?: boolean\r\n imageLeft?: InputBaseImage<T>\r\n imageRight?: InputBaseImage<T>\r\n}\r\n\r\nexport interface IInputProps<T> extends IFormInputBase<T> {\r\n slots?: IInputSlots<T>\r\n}\r\n\r\nexport interface IInputState {\r\n value?: string\r\n}\r\n\r\nexport interface IInputParams<T> extends IInputSlots<T> {}\r\n\r\nconst CreateInput = function <T>(params?: IInputParams<T>): ComponentType<IInputProps<T>> {\r\n class InputBase extends Component<IInputProps<T>, IInputState> {\r\n private _cachedSlots: IInputSlots<T> = {}\r\n constructor(props: IInputProps<T>) {\r\n super(props)\r\n this._cachedSlots = this.mergeSlots(props.slots) ?? {}\r\n this.state = { value: this.defaulValue }\r\n }\r\n\r\n get slots() {\r\n return this._cachedSlots\r\n }\r\n\r\n get defaulValue(): string {\r\n const { data, name } = this.props\r\n return this.props.defaultValue ?? (!!data && !!name ? data[name]?.toString() : undefined)\r\n }\r\n\r\n componentDidUpdate(prevProps: IInputProps<T>) {\r\n if (prevProps.slots !== this.props.slots) {\r\n this._cachedSlots = this.mergeSlots(this.props.slots)\r\n }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IInputProps<T>>): boolean {\r\n const { name, slots } = this.props\r\n if (!!name) {\r\n const currentDataValue = this.props.data?.[name]?.toString() ?? ''\r\n const nextDataValue = nextProps.data?.[name]?.toString() ?? ''\r\n if (currentDataValue !== nextDataValue) {\r\n this.setState({ value: nextDataValue })\r\n return false\r\n }\r\n }\r\n\r\n if (slots !== nextProps.slots) {\r\n return true\r\n }\r\n return true\r\n }\r\n\r\n mapTextFieldProps = (): TextFieldProps => {\r\n const errorMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n const tfp: TextFieldProps = {\r\n fullWidth: true,\r\n variant: 'outlined',\r\n name: this.props.name?.toString(),\r\n error: errorMessage.error,\r\n helperText: errorMessage.message,\r\n disabled: this.props.disabled,\r\n onBlur: () => {\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n },\r\n label: this.getLabel(),\r\n placeholder: this.props.placeholder,\r\n InputLabelProps: !!this.state.value ? { shrink: true } : {},\r\n value: this.state.value ?? '',\r\n onChange: this.handleChange\r\n }\r\n if (this.slots.pastenable === true) {\r\n tfp.InputProps = {\r\n endAdornment: (\r\n <InputAdornment position='end'>\r\n <IconButton onClick={this.handlePaste} edge='end'>\r\n <ContentPasteIcon />\r\n </IconButton>\r\n </InputAdornment>\r\n )\r\n }\r\n }\r\n if (this.slots?.maxLength) tfp.inputProps = { ...tfp.inputProps, maxLength: this.slots.maxLength }\r\n return mergeObjects<TextFieldProps>({}, tfp, this.slots?.textFieldProps)\r\n }\r\n\r\n //#region Render\r\n render() {\r\n return (\r\n <Box sx={{ display: 'flex', alignItems: 'center' }}>\r\n {!!this.props.disabled && <input hidden name={this.props.name?.toString()} defaultValue={this.defaulValue} />}\r\n {this.renderImageSide('left')}\r\n <TextField {...this.mapTextFieldProps()} />\r\n {this.renderImageSide('right')}\r\n </Box>\r\n )\r\n }\r\n\r\n renderImageSide = (side: 'left' | 'right') => {\r\n const image = side === 'left' ? this.slots.imageLeft : this.slots.imageRight\r\n if (!image) return <></>\r\n const { srcGetter, element, alt = 'input-image', fallbackSrc = '', debounceDelay = 700, ...imageOther } = image\r\n if (element) {\r\n const Element = element\r\n return (\r\n <WrapImage>\r\n <Element value={this.state.value} model={this.props.data} />\r\n </WrapImage>\r\n )\r\n }\r\n const src = srcGetter ? srcGetter(this.state.value, this.props.data) : imageOther.src ?? this.state.value\r\n const imageProps: IImageWithFallbackPropsOwner = { src, alt, fallbackSrc, debounceDelay }\r\n return (\r\n <Collapse sx={{ mx: '10px' }} in={!!src} unmountOnExit orientation='horizontal'>\r\n <WrapImage>\r\n <ImageWithFallback {...imageOther} {...imageProps} loading={<LoadingCircularProgress />} />\r\n </WrapImage>\r\n </Collapse>\r\n )\r\n }\r\n //#endregion\r\n\r\n private mergeSlots = (currentSlots?: IInputSlots<T>): IInputSlots<T> => {\r\n const base = mergeObjects<IInputSlots<T>>({}, params, currentSlots)\r\n const { imageLeft, imageRight } = base\r\n\r\n // mirror from left to right\r\n if (imageLeft?.mirror && !imageRight) {\r\n base.imageRight = { ...imageLeft }\r\n delete base.imageRight.mirror\r\n }\r\n // mirror from right to left\r\n else if (imageRight?.mirror && !imageLeft) {\r\n base.imageLeft = { ...imageRight }\r\n delete base.imageLeft.mirror\r\n }\r\n\r\n return base\r\n }\r\n\r\n getLabel = () => {\r\n if (!this.props.label) return\r\n if (!this.slots?.maxLength) return this.props.label\r\n return `${this.props.label} (${this.state.value?.length ?? 0}/${this.slots.maxLength})`\r\n }\r\n\r\n handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n this.setState((st) => ({ ...st, value: event.target.value }))\r\n }\r\n\r\n handlePaste = async () => {\r\n try {\r\n const clipboardText = await navigator.clipboard.readText()\r\n this.setState({ value: clipboardText })\r\n } catch (error) {\r\n console.error('Error clipboard:', error)\r\n }\r\n }\r\n }\r\n return InputBase\r\n}\r\n\r\nexport default CreateInput\r\n\r\n// export type InputTextType<T> = ReturnType<typeof CreateInputBase<T>>\r\n\r\nconst LoadingCircularProgress: FC = () => (\r\n <div>\r\n <CircularProgress size={24} />\r\n </div>\r\n)\r\n\r\nconst WrapImage = styled(Box)({\r\n fontSize: '1rem',\r\n height: 'var(--input-base-image-size, 54px)',\r\n width: 'var(--input-base-image-size, 54px)',\r\n position: 'relative',\r\n borderRadius: '8px',\r\n boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',\r\n overflow: 'hidden',\r\n '& > img': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n backgroundRepeat: 'no-repeat',\r\n height: '100%',\r\n width: '100%',\r\n backgroundSize: 'contain'\r\n },\r\n '& > div': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n height: '100%',\r\n width: '100%',\r\n background: '#fafafa',\r\n zIndex: 1,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center'\r\n }\r\n})\r\n"],"names":["CreateInput","params","InputBase","props","_this$mergeSlots","_this","_classCallCheck","_callSuper","_defineProperty","_this$props$name","_this$state$value","_this$slots","_this$slots2","errorMessage","getErrorMessage","messageErrors","name","tfp","fullWidth","variant","toString","error","helperText","message","disabled","onBlur","label","getLabel","placeholder","InputLabelProps","state","value","shrink","onChange","handleChange","slots","pastenable","InputProps","endAdornment","_jsx","InputAdornment","position","children","IconButton","onClick","handlePaste","edge","ContentPasteIcon","maxLength","inputProps","_objectSpread","mergeObjects","textFieldProps","side","_imageOther$src","image","imageLeft","imageRight","srcGetter","element","_image$alt","alt","_image$fallbackSrc","fallbackSrc","_image$debounceDelay","debounceDelay","imageOther","_objectWithoutProperties","_excluded","WrapImage","model","data","src","imageProps","Collapse","sx","mx","in","unmountOnExit","orientation","ImageWithFallback","loading","LoadingCircularProgress","currentSlots","base","mirror","_this$slots3","_this$state$value$len","_this$state$value2","concat","length","event","setState","st","target","_asyncToGenerator","_regeneratorRuntime","mark","_callee","clipboardText","wrap","_context","prev","next","navigator","clipboard","readText","sent","t0","console","stop","_cachedSlots","mergeSlots","defaulValue","_inherits","Component","_createClass","key","get","this","_this$props$defaultVa","_data$name","_this$props","defaultValue","undefined","prevProps","nextProps","_this$props2","_this$props$data$name","_this$props$data","_nextProps$data$name$","_nextProps$data","currentDataValue","nextDataValue","_this$props$name2","_jsxs","Box","display","alignItems","hidden","renderImageSide","TextField","mapTextFieldProps","CircularProgress","size","styled","fontSize","height","width","borderRadius","boxShadow","overflow","top","left","backgroundRepeat","backgroundSize","background","zIndex","justifyContent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.input.js","sources":["../../src/form/create.input.tsx"],"sourcesContent":["import React, { Component, ComponentType, FC } from 'react'\r\nimport { Box, CircularProgress, Collapse, IconButton, InputAdornment, styled, TextField, TextFieldProps } from '@mui/material'\r\nimport ContentPasteIcon from '@mui/icons-material/ContentPaste'\r\nimport { mergeObjects } from '../utils'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { ImageWithFallback, IImageWithFallbackPropsOwner } from '../components'\r\n\r\nexport interface InputBaseImage<T> extends Partial<IImageWithFallbackPropsOwner> {\r\n srcGetter?: (value: any, model?: Partial<T>) => string\r\n element?: React.ComponentType<{ value: any; model?: Partial<T> }>\r\n mirror?: boolean\r\n}\r\n\r\nexport interface IInputSlots<T> {\r\n maxLength?: number\r\n textFieldProps?: TextFieldProps\r\n pastenable?: boolean\r\n imageLeft?: InputBaseImage<T>\r\n imageRight?: InputBaseImage<T>\r\n}\r\n\r\nexport interface IInputProps<T> extends IFormInputBase<T> {\r\n slots?: IInputSlots<T>\r\n}\r\n\r\nexport interface IInputState {\r\n value?: string\r\n}\r\n\r\nexport interface IInputParams<T> extends IInputSlots<T> {}\r\n\r\nconst CreateInput = function <T>(params?: IInputParams<T>): ComponentType<IInputProps<T>> {\r\n class InputBase extends Component<IInputProps<T>, IInputState> {\r\n private _cachedSlots: IInputSlots<T> = {}\r\n constructor(props: IInputProps<T>) {\r\n super(props)\r\n this._cachedSlots = this.mergeSlots(props.slots) ?? {}\r\n this.state = { value: this.defaulValue }\r\n }\r\n\r\n get slots() {\r\n return this._cachedSlots\r\n }\r\n\r\n get defaulValue(): string {\r\n const { data, name } = this.props\r\n return this.props.defaultValue ?? (!!data && !!name ? data[name]?.toString() : undefined)\r\n }\r\n\r\n componentDidUpdate(prevProps: IInputProps<T>) {\r\n if (prevProps.slots !== this.props.slots) {\r\n this._cachedSlots = this.mergeSlots(this.props.slots)\r\n }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IInputProps<T>>): boolean {\r\n const { name, slots } = this.props\r\n if (!!name) {\r\n const currentDataValue = this.props.data?.[name]?.toString() ?? ''\r\n const nextDataValue = nextProps.data?.[name]?.toString() ?? ''\r\n if (currentDataValue !== nextDataValue) {\r\n this.setState({ value: nextDataValue })\r\n return false\r\n }\r\n }\r\n\r\n if (slots !== nextProps.slots) {\r\n return true\r\n }\r\n return true\r\n }\r\n\r\n mapTextFieldProps = (): TextFieldProps => {\r\n const errorMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n const tfp: TextFieldProps = {\r\n fullWidth: true,\r\n variant: 'outlined',\r\n name: this.props.name?.toString(),\r\n error: errorMessage.error,\r\n helperText: errorMessage.message,\r\n disabled: this.props.disabled,\r\n onBlur: () => {\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n },\r\n label: this.getLabel(),\r\n placeholder: this.props.placeholder,\r\n InputLabelProps: !!this.state.value ? { shrink: true } : {},\r\n value: this.state.value ?? '',\r\n onChange: this.handleChange\r\n }\r\n if (this.slots.pastenable === true) {\r\n tfp.InputProps = {\r\n endAdornment: (\r\n <InputAdornment position='end'>\r\n <IconButton onClick={this.handlePaste} edge='end'>\r\n <ContentPasteIcon />\r\n </IconButton>\r\n </InputAdornment>\r\n )\r\n }\r\n }\r\n if (this.slots?.maxLength) tfp.inputProps = { ...tfp.inputProps, maxLength: this.slots.maxLength }\r\n return mergeObjects<TextFieldProps>({}, tfp, this.slots?.textFieldProps)\r\n }\r\n\r\n //#region Render\r\n render() {\r\n return (\r\n <Box sx={{ display: 'flex', alignItems: 'center' }}>\r\n {!!this.props.disabled && <input hidden name={this.props.name?.toString()} defaultValue={this.defaulValue} />}\r\n {this.renderImageSide('left')}\r\n <TextField {...this.mapTextFieldProps()} />\r\n {this.renderImageSide('right')}\r\n </Box>\r\n )\r\n }\r\n\r\n renderImageSide = (side: 'left' | 'right') => {\r\n const image = side === 'left' ? this.slots.imageLeft : this.slots.imageRight\r\n if (!image) return <></>\r\n const { srcGetter, element, alt = 'input-image', fallbackSrc = '', debounceDelay = 700, ...imageOther } = image\r\n if (element) {\r\n const Element = element\r\n return (\r\n <WrapImage>\r\n <Element value={this.state.value} model={this.props.data} />\r\n </WrapImage>\r\n )\r\n }\r\n const src = srcGetter ? srcGetter(this.state.value, this.props.data) : imageOther.src ?? this.state.value\r\n const imageProps: IImageWithFallbackPropsOwner = { src, alt, fallbackSrc, debounceDelay }\r\n return (\r\n <Collapse sx={{ mx: '10px' }} in={!!src} unmountOnExit orientation='horizontal'>\r\n <WrapImage>\r\n <ImageWithFallback {...imageOther} {...imageProps} loading={<LoadingCircularProgress />} />\r\n </WrapImage>\r\n </Collapse>\r\n )\r\n }\r\n //#endregion\r\n\r\n private mergeSlots = (currentSlots?: IInputSlots<T>): IInputSlots<T> => {\r\n const base = mergeObjects<IInputSlots<T>>({}, params, currentSlots)\r\n const { imageLeft, imageRight } = base\r\n\r\n // mirror from left to right\r\n if (imageLeft?.mirror && !imageRight) {\r\n base.imageRight = { ...imageLeft }\r\n delete base.imageRight.mirror\r\n }\r\n // mirror from right to left\r\n else if (imageRight?.mirror && !imageLeft) {\r\n base.imageLeft = { ...imageRight }\r\n delete base.imageLeft.mirror\r\n }\r\n\r\n return base\r\n }\r\n\r\n getLabel = () => {\r\n if (!this.props.label) return\r\n if (!this.slots?.maxLength) return this.props.label\r\n return `${this.props.label} (${this.state.value?.length ?? 0}/${this.slots.maxLength})`\r\n }\r\n\r\n handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n this.setState((st) => ({ ...st, value: event.target.value }))\r\n }\r\n\r\n handlePaste = async () => {\r\n try {\r\n const clipboardText = await navigator.clipboard.readText()\r\n this.setState({ value: clipboardText })\r\n } catch (error) {\r\n console.error('Error clipboard:', error)\r\n }\r\n }\r\n }\r\n return InputBase\r\n}\r\n\r\nexport default CreateInput\r\n\r\n// export type InputTextType<T> = ReturnType<typeof CreateInputBase<T>>\r\n\r\nconst LoadingCircularProgress: FC = () => (\r\n <div>\r\n <CircularProgress size={24} />\r\n </div>\r\n)\r\n\r\nconst WrapImage = styled(Box)({\r\n fontSize: '1rem',\r\n height: 'var(--input-base-image-size, 54px)',\r\n width: 'var(--input-base-image-size, 54px)',\r\n position: 'relative',\r\n borderRadius: '8px',\r\n boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',\r\n overflow: 'hidden',\r\n '& > img': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n backgroundRepeat: 'no-repeat',\r\n height: '100%',\r\n width: '100%',\r\n backgroundSize: 'contain'\r\n },\r\n '& > div': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n height: '100%',\r\n width: '100%',\r\n background: '#fafafa',\r\n zIndex: 1,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center'\r\n }\r\n})\r\n"],"names":["CreateInput","params","InputBase","props","_this$mergeSlots","_this","_classCallCheck","_callSuper","_defineProperty","_this$props$name","_this$state$value","_this$slots","_this$slots2","errorMessage","getErrorMessage","messageErrors","name","tfp","fullWidth","variant","toString","error","helperText","message","disabled","onBlur","label","getLabel","placeholder","InputLabelProps","state","value","shrink","onChange","handleChange","slots","pastenable","InputProps","endAdornment","_jsx","InputAdornment","position","children","IconButton","onClick","handlePaste","edge","ContentPasteIcon","maxLength","inputProps","_objectSpread","mergeObjects","textFieldProps","side","_imageOther$src","image","imageLeft","imageRight","srcGetter","element","_image$alt","alt","_image$fallbackSrc","fallbackSrc","_image$debounceDelay","debounceDelay","imageOther","_objectWithoutProperties","_excluded","WrapImage","model","data","src","imageProps","Collapse","sx","mx","in","unmountOnExit","orientation","ImageWithFallback","loading","LoadingCircularProgress","currentSlots","base","mirror","_this$slots3","_this$state$value$len","_this$state$value2","concat","length","event","setState","st","target","_asyncToGenerator","_regeneratorRuntime","mark","_callee","clipboardText","wrap","_context","prev","next","navigator","clipboard","readText","sent","t0","console","stop","_cachedSlots","mergeSlots","defaulValue","_inherits","Component","_createClass","key","get","this","_this$props$defaultVa","_data$name","_this$props","defaultValue","undefined","prevProps","nextProps","_this$props2","_this$props$data$name","_this$props$data","_nextProps$data$name$","_nextProps$data","currentDataValue","nextDataValue","_this$props$name2","_jsxs","Box","display","alignItems","hidden","renderImageSide","TextField","mapTextFieldProps","CircularProgress","size","styled","fontSize","height","width","borderRadius","boxShadow","overflow","top","left","backgroundRepeat","backgroundSize","background","zIndex","justifyContent"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as e,createClass as r,objectSpread2 as o,classCallCheck as t,callSuper as l,defineProperty as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as n,jsx as a}from"react/jsx-runtime";import s,{Component as p}from"react";import{FormControl as u,InputLabel as d,Select as v,MenuItem as m,Collapse as f,FormHelperText as c}from"@mui/material";import{mergeObjects as g}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"react-router-dom";import"../utils/query-param.js";import{getErrorMessage as h}from"./
|
|
1
|
+
import{inherits as e,createClass as r,objectSpread2 as o,classCallCheck as t,callSuper as l,defineProperty as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as n,jsx as a}from"react/jsx-runtime";import s,{Component as p}from"react";import{FormControl as u,InputLabel as d,Select as v,MenuItem as m,Collapse as f,FormHelperText as c}from"@mui/material";import{mergeObjects as g}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"react-router-dom";import"../utils/query-param.js";import{getErrorMessage as h}from"./helpers.js";function b(b){return function(){function S(e){var r,o;return t(this,S),o=l(this,S,[e]),i(o,"mapProps",(function(){var e,r,t,l,i,n=o.getLabel(),a={id:null===(e=o.props.name)||void 0===e?void 0:e.toString(),labelId:(null===(r=o.props.name)||void 0===r?void 0:r.toString())+n,name:null===(t=o.props.name)||void 0===t?void 0:t.toString(),label:n,defaultValue:o.getDefaultValue(),value:o.state.value,onChange:function(e){var r=e.target.value+"";o.setState({value:r},(function(){o.props.name&&o.props.onBlur&&o.props.onBlur(o.props.name);var e=o.getOptions().find((function(e){var o;return(null===(o=e.value)||void 0===o?void 0:o.toString())===r}));e&&o.props.onChange&&o.props.onChange(e)}))},disabled:o.props.disabled,fullWidth:void 0===o.props.fullWidth||o.props.fullWidth},s=null!==(l=null===(i=o.props.slots)||void 0===i?void 0:i.selectProps)&&void 0!==l?l:null==b?void 0:b.selectProps;return g({},a,s)})),i(o,"getLabel",(function(){var e,r;return o.props.label&&"string"==typeof o.props.label?o.props.label:null!==(e=null===(r=o.props.name)||void 0===r?void 0:r.toString())&&void 0!==e?e:""})),i(o,"getDefaultValue",(function(){var e,r,t,l,i=o.props,n=i.data,a=i.name,s=o.getOptions();return null!==(e=null!==(r=null===(t=o.props.defaultValue)||void 0===t?void 0:t.toString())&&void 0!==r?r:n&&a?n[a]:void 0)&&void 0!==e?e:null===(l=s[0])||void 0===l?void 0:l.value})),i(o,"getOptions",(function(){var e,r;return null!==(e=null!==(r=null==b?void 0:b.options)&&void 0!==r?r:o.props.options)&&void 0!==e?e:[]})),o.state={value:null===(r=o.getDefaultValue())||void 0===r?void 0:r.toString()},o}return e(S,p),r(S,[{key:"render",value:function(){var e,r,t=this.getOptions(),l=this.getLabel(),i=h(this.props.messageErrors,this.props.name);return n(s.Fragment,{children:[!!this.props.disabled&&a("input",{hidden:!0,name:null===(e=this.props.name)||void 0===e?void 0:e.toString(),defaultValue:this.getDefaultValue()}),n(u,{fullWidth:!0,disabled:this.props.disabled,error:i.error,children:[a(d,{id:(null===(r=this.props.name)||void 0===r?void 0:r.toString())+l,children:l}),a(v,o(o({},this.mapProps()),{},{children:t.map((function(e){return a(m,{value:e.value,children:e.name},e.value)}))})),a(f,{in:i.error,children:a(c,{children:i.message})})]})]})}}])}()}export{b as default};
|
|
2
2
|
//# sourceMappingURL=create.select-simple.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.select-simple.js","sources":["../../src/form/create.select-simple.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Collapse, FormControl, FormHelperText, InputLabel, MenuItem, Select, SelectProps } from '@mui/material'\r\nimport { mergeObjects } from '../utils'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './
|
|
1
|
+
{"version":3,"file":"create.select-simple.js","sources":["../../src/form/create.select-simple.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Collapse, FormControl, FormHelperText, InputLabel, MenuItem, Select, SelectProps } from '@mui/material'\r\nimport { mergeObjects } from '../utils'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\n\r\nexport interface ISelectSimpleOption<T extends string = string> {\r\n name: string\r\n value: T\r\n}\r\n\r\nexport interface ISelectSimpleSlots {\r\n selectProps?: Omit<SelectProps, 'variant'>\r\n}\r\n\r\nexport interface ISelectSimpleProps<T> extends Partial<IFormInputBase<T>> {\r\n options?: ISelectSimpleOption[]\r\n onChange?: (value: ISelectSimpleOption) => void\r\n slots?: ISelectSimpleSlots\r\n fullWidth?: boolean\r\n}\r\n\r\nexport interface ISelectSimpleState {\r\n value?: string\r\n}\r\n\r\nexport interface ISelectSimpleParams extends ISelectSimpleSlots {\r\n options?: ISelectSimpleOption[]\r\n}\r\n\r\nfunction CreateSelectSimple<T>(args?: ISelectSimpleParams): ComponentType<ISelectSimpleProps<T>> {\r\n class SelectSimple extends Component<ISelectSimpleProps<T>, ISelectSimpleState> {\r\n constructor(props: ISelectSimpleProps<T>) {\r\n super(props)\r\n this.state = { value: this.getDefaultValue()?.toString() }\r\n }\r\n mapProps = (): SelectProps => {\r\n const label = this.getLabel()\r\n const tfp: SelectProps = {\r\n id: this.props.name?.toString(),\r\n labelId: this.props.name?.toString() + label,\r\n name: this.props.name?.toString(),\r\n label: label,\r\n defaultValue: this.getDefaultValue(),\r\n value: this.state.value,\r\n onChange: (event) => {\r\n const value: string = event.target.value + ''\r\n this.setState({ value }, () => {\r\n if (!!this.props.name) {\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n }\r\n const options = this.getOptions()\r\n const temp = options.find((x) => x.value?.toString() === value)\r\n if (!temp) return\r\n this.props.onChange && this.props.onChange(temp)\r\n })\r\n },\r\n disabled: this.props.disabled,\r\n fullWidth: this.props.fullWidth !== undefined ? this.props.fullWidth : true\r\n }\r\n const selectProps = this.props.slots?.selectProps ?? args?.selectProps\r\n return mergeObjects({}, tfp, selectProps)\r\n }\r\n render() {\r\n const data = this.getOptions()\r\n const label = this.getLabel()\r\n const errorMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n return (\r\n <React.Fragment>\r\n {!!this.props.disabled && <input hidden name={this.props.name?.toString()} defaultValue={this.getDefaultValue()} />}\r\n <FormControl fullWidth disabled={this.props.disabled} error={errorMessage.error}>\r\n <InputLabel id={this.props.name?.toString() + label}>{label}</InputLabel>\r\n <Select {...this.mapProps()}>\r\n {data.map((item) => (\r\n <MenuItem key={item.value} value={item.value}>\r\n {item.name}\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n <Collapse in={errorMessage.error}>\r\n <FormHelperText>{errorMessage.message}</FormHelperText>\r\n </Collapse>\r\n </FormControl>\r\n </React.Fragment>\r\n )\r\n }\r\n getLabel = () => {\r\n if (!!this.props.label && typeof this.props.label === 'string') return this.props.label\r\n return this.props.name?.toString() ?? ''\r\n }\r\n getDefaultValue = () => {\r\n const { data, name } = this.props\r\n const options = this.getOptions()\r\n return this.props.defaultValue?.toString() ?? (!!data && !!name ? data[name] : undefined) ?? options[0]?.value\r\n }\r\n getOptions = (): ISelectSimpleOption[] => {\r\n return args?.options ?? this.props.options ?? []\r\n }\r\n }\r\n return SelectSimple\r\n}\r\nexport default CreateSelectSimple\r\n"],"names":["CreateSelectSimple","args","SelectSimple","props","_this$getDefaultValue","_this","_classCallCheck","_callSuper","_defineProperty","_this$props$name","_this$props$name2","_this$props$name3","_this$props$slots$sel","_this$props$slots","label","getLabel","tfp","id","name","toString","labelId","defaultValue","getDefaultValue","value","state","onChange","event","target","setState","onBlur","temp","getOptions","find","x","_x$value","disabled","fullWidth","undefined","selectProps","slots","mergeObjects","_this$props$name$toSt","_this$props$name4","_ref","_this$props$defaultVa","_this$props$defaultVa2","_options$","_this$props","data","options","_ref2","_args$options","_inherits","Component","_createClass","key","_this$props$name5","_this$props$name6","this","errorMessage","getErrorMessage","messageErrors","_jsxs","React","Fragment","children","_jsx","hidden","FormControl","error","InputLabel","Select","_objectSpread","mapProps","map","item","MenuItem","Collapse","in","FormHelperText","message"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as t,createClass as e,objectSpread2 as n,classCallCheck as r,callSuper as o,defineProperty as i,asyncToGenerator as a,regeneratorRuntime as l}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as s,Fragment as u,jsx as p}from"react/jsx-runtime";import{Component as d}from"react";import{Autocomplete as c,TextField as f}from"@mui/material";import{getErrorMessage as v}from"./
|
|
1
|
+
import{inherits as t,createClass as e,objectSpread2 as n,classCallCheck as r,callSuper as o,defineProperty as i,asyncToGenerator as a,regeneratorRuntime as l}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as s,Fragment as u,jsx as p}from"react/jsx-runtime";import{Component as d}from"react";import{Autocomplete as c,TextField as f}from"@mui/material";import{getErrorMessage as v}from"./helpers.js";import{ApiAlertContext as h}from"../api-context/alert-global.js";import"../api-context/drawer-global.js";import"../api-context/global-modal.js";var m=function(m){var g=function(){function g(t){var e,n,s;return r(this,g),n=o(this,g,[t]),i(n,"abortController",{signalController:new AbortController}),i(n,"refInput",null),i(n,"existedIds",[]),i(n,"getFetchDataFunc",(function(){var t,e;return null!==(t=null!==(e=n.props.fetchData)&&void 0!==e?e:null==m?void 0:m.fetchData)&&void 0!==t?t:function(){return Promise.resolve([])}})),i(n,"timer",{_timer:0,_second:500,callback:(s=a(l().mark((function t(e){var r,o,i;return l().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,n.abortController.signalController=new AbortController,t.next=4,n.getFetchDataFunc()(e,n.abortController.signalController.signal);case 4:r=t.sent,o=n.getOptionsFilter(r,n.existedIds),n.setState({options:o}),t.next=12;break;case 9:t.prev=9,t.t0=t.catch(0),null===(i=h.ApiAlert)||void 0===i||i.PushError("Error from server!");case 12:return t.prev=12,n.setState({statusText:"no items"}),t.finish(12);case 15:case"end":return t.stop()}}),t,null,[[0,9,12,15]])}))),function(t){return s.apply(this,arguments)}),start:function(t){n.timer.clear(),n.timer._timer=window.setTimeout((function(){return n.timer.callback(t)}),n.timer._second)},clear:function(){n.abortController.signalController.abort(),clearTimeout(n.timer._timer)}}),i(n,"fetchData",a(l().mark((function t(){var e,r,o,i,a,s;return l().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,r=n.getDefaultValue(),t.next=4,n.getFetchDataFunc()(r,n.abortController.signalController.signal);case 4:if(o=t.sent,Array.isArray(o)){t.next=7;break}return t.abrupt("return");case 7:return i=n.getOptionsFilter(o,n.existedIds),a=null!==(e=i.find((function(t){return t.Id===r})))&&void 0!==e?e:null,n.setState({options:i,optionSelected:a,loading:!1}),t.abrupt("return");case 13:t.prev=13,t.t0=t.catch(0),null===(s=h.ApiAlert)||void 0===s||s.PushError("Error from server!");case 16:return t.prev=16,n.setState({statusText:"no items",loading:!1}),t.finish(16);case 19:case"end":return t.stop()}}),t,null,[[0,13,16,19]])})))),i(n,"handleChange",(function(t,e){var r;n.setState({optionSelected:e}),n.refInput&&(n.refInput.value=null!==(r=null==e?void 0:e.Id)&&void 0!==r?r:""),n.props.onChange&&n.props.onChange(e)})),i(n,"handleInputChange",(function(t,e){var r,o={inputValue:e};if(e!==(null===(r=n.state.optionSelected)||void 0===r?void 0:r.Name)){var i=e.trim().toLowerCase(),a=n.state.options.findIndex((function(t){var e;return null===(e=t.Name)||void 0===e?void 0:e.trim().toLowerCase().includes(i)}));(a<0||""===i)&&(o.statusText="loading..."),n.setState(o,(function(){(a<0||""===i)&&n.timer.start(i)}))}else n.setState(o)})),i(n,"fillterOptions",(function(t,e){return t.filter((function(t){var n,r=e.inputValue.toLowerCase();return t.Id.toLowerCase().includes(r)||(null===(n=t.Name)||void 0===n?void 0:n.toLowerCase().includes(r))}))})),i(n,"getLabel",(function(){var t,e;return null!==(t=n.props.label)&&void 0!==t?t:null===(e=n.props.name)||void 0===e?void 0:e.toString()})),i(n,"getDefaultValue",(function(){var t,e,r;if(n.props.name)return null===(t=null!==(e=n.props.defaultValue)&&void 0!==e?e:null===(r=n.props.data)||void 0===r?void 0:r[n.props.name])||void 0===t?void 0:t.toString()})),n.state={options:[],statusText:"no items",optionSelected:null,inputValue:"",loading:!0},n.existedIds=null!==(e=t.existedIds)&&void 0!==e?e:[],n}return t(g,d),e(g,[{key:"render",value:function(){var t,e,r,o,i=this,a=this.getDefaultValue(),l=v(this.props.messageErrors,this.props.name);return s(u,{children:[p(c,{disabled:this.state.loading||this.props.disabled,fullWidth:!0,noOptionsText:this.state.statusText,options:this.state.options,getOptionLabel:function(t){var e;return null!==(e=t.Name)&&void 0!==e?e:t.Id},getOptionKey:function(t){return JSON.stringify(t)},isOptionEqualToValue:function(t,e){return t.Id.toString()===e.Id.toString()&&t.Name===e.Name},filterOptions:this.fillterOptions,value:this.state.optionSelected,onChange:this.handleChange,inputValue:this.state.inputValue,onInputChange:this.handleInputChange,renderInput:function(t){var e;return p(f,n(n({},t),{},{label:i.getLabel(),error:l.error,helperText:l.message,onBlur:function(){i.props.name&&i.props.onBlur&&i.props.onBlur(i.props.name)}},null===(e=i.props.slots)||void 0===e?void 0:e.textFieldProps))}}),p("input",{ref:function(t){return i.refInput=t},hidden:!0,name:null===(t=this.props.name)||void 0===t?void 0:t.toString(),defaultValue:a}),(null===(e=this.state.optionSelected)||void 0===e?void 0:e.Other)&&p("input",{hidden:!0,name:"".concat(null===(r=this.props.name)||void 0===r?void 0:r.toString(),"Other"),defaultValue:JSON.stringify(this.state.optionSelected.Other)},null!==(o=this.state.optionSelected.Id)&&void 0!==o?o:"key")]})}},{key:"componentDidMount",value:function(){this.fetchData()}},{key:"componentWillUnmount",value:function(){this.timer.clear()}},{key:"componentDidUpdate",value:function(t){var e;JSON.stringify(t.existedIds)!==JSON.stringify(this.props.existedIds)&&(this.existedIds=null!==(e=this.props.existedIds)&&void 0!==e?e:[])}},{key:"getOptionsFilter",value:function(t){var e=new Set(arguments.length>1&&void 0!==arguments[1]?arguments[1]:[]);return t.reduce((function(t,n){return e.has(n.Id)||(t.push(n),e.add(n.Id)),t}),[])}}])}();return g};export{m as default};
|
|
2
2
|
//# sourceMappingURL=create.select-with-api.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.select-with-api.js","sources":["../../src/form/create.select-with-api.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Autocomplete, FilterOptionsState, TextField, TextFieldProps } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helper'\r\nimport { ApiAlertContext } from '../api-context'\r\n\r\nexport interface ISelectWithApiOption<TOther = any> {\r\n Id: string\r\n Name?: string\r\n Other?: TOther\r\n}\r\n\r\nexport interface ISelectWithApiPropsSlots {\r\n textFieldProps: TextFieldProps\r\n}\r\n\r\nexport type ISelectWithApiFetchData<O extends ISelectWithApiOption> = (value?: string, signal?: AbortSignal) => Promise<O[]>\r\n\r\nexport interface ISelectWithApiProps<T, O extends ISelectWithApiOption> extends IFormInputBase<T>, ISelectWithApiParams<O> {\r\n onChange?: (value: O | null) => void\r\n existedIds?: string[]\r\n slots?: ISelectWithApiPropsSlots\r\n}\r\n\r\nexport interface ISelectWithApiState<O extends ISelectWithApiOption> {\r\n options: O[]\r\n statusText?: string\r\n optionSelected: O | null\r\n inputValue: string\r\n loading?: boolean\r\n}\r\n\r\nexport interface ISelectWithApiParams<O extends ISelectWithApiOption> {\r\n fetchData?: ISelectWithApiFetchData<O>\r\n}\r\n\r\nconst CreateSelectWithApi = function <T, O extends ISelectWithApiOption = ISelectWithApiOption>(\r\n params?: ISelectWithApiParams<O>\r\n): ComponentType<ISelectWithApiProps<T, O>> {\r\n class SelectWithApi extends Component<ISelectWithApiProps<T, O>, ISelectWithApiState<O>> {\r\n abortController = { signalController: new AbortController() }\r\n refInput: HTMLInputElement | null = null\r\n existedIds: string[] = []\r\n constructor(props: ISelectWithApiProps<T, O>) {\r\n super(props)\r\n this.state = {\r\n options: [],\r\n statusText: 'no items',\r\n optionSelected: null,\r\n inputValue: '',\r\n loading: true\r\n }\r\n this.existedIds = props.existedIds ?? []\r\n }\r\n\r\n render() {\r\n const defaultValue = this.getDefaultValue()\r\n const eMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n return (\r\n <>\r\n <Autocomplete\r\n disabled={this.state.loading || this.props.disabled}\r\n fullWidth\r\n noOptionsText={this.state.statusText}\r\n options={this.state.options}\r\n getOptionLabel={(x) => x.Name ?? x.Id}\r\n getOptionKey={(x) => JSON.stringify(x)}\r\n isOptionEqualToValue={(o, v) => o.Id.toString() === v.Id.toString() && o.Name === v.Name}\r\n filterOptions={this.fillterOptions}\r\n // select\r\n value={this.state.optionSelected}\r\n onChange={this.handleChange}\r\n // input\r\n inputValue={this.state.inputValue}\r\n onInputChange={this.handleInputChange}\r\n renderInput={(params) => (\r\n <TextField\r\n {...params}\r\n label={this.getLabel()}\r\n error={eMessage.error}\r\n helperText={eMessage.message}\r\n onBlur={() => {\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n }}\r\n {...this.props.slots?.textFieldProps}\r\n />\r\n )}\r\n />\r\n <input ref={(ref) => (this.refInput = ref)} hidden name={this.props.name?.toString()} defaultValue={defaultValue} />\r\n {this.state.optionSelected?.Other && (\r\n <input\r\n hidden\r\n name={`${this.props.name?.toString()}Other`}\r\n key={this.state.optionSelected.Id ?? 'key'}\r\n defaultValue={JSON.stringify(this.state.optionSelected.Other)}\r\n />\r\n )}\r\n </>\r\n )\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchData()\r\n }\r\n\r\n componentWillUnmount(): void {\r\n this.timer.clear()\r\n }\r\n\r\n componentDidUpdate(prevProps: Readonly<ISelectWithApiProps<T, O>>): void {\r\n if (JSON.stringify(prevProps.existedIds) !== JSON.stringify(this.props.existedIds)) {\r\n this.existedIds = this.props.existedIds ?? []\r\n }\r\n }\r\n\r\n getFetchDataFunc = (): ISelectWithApiFetchData<O> => {\r\n return this.props.fetchData ?? params?.fetchData ?? (() => Promise.resolve([]))\r\n }\r\n\r\n timer = {\r\n _timer: 0,\r\n _second: 500,\r\n callback: async (value: string) => {\r\n try {\r\n this.abortController.signalController = new AbortController()\r\n const res = await this.getFetchDataFunc()(value, this.abortController.signalController.signal)\r\n const options = this.getOptionsFilter(res, this.existedIds)\r\n this.setState({ options })\r\n } catch (error) {\r\n // console.log(error)\r\n ApiAlertContext.ApiAlert?.PushError('Error from server!')\r\n } finally {\r\n this.setState({ statusText: 'no items' })\r\n }\r\n },\r\n start: (text: string) => {\r\n this.timer.clear()\r\n this.timer._timer = window.setTimeout(() => this.timer.callback(text), this.timer._second)\r\n },\r\n clear: () => {\r\n this.abortController.signalController.abort()\r\n clearTimeout(this.timer._timer)\r\n }\r\n }\r\n\r\n fetchData = async () => {\r\n try {\r\n const defaultValue = this.getDefaultValue()\r\n const res = await this.getFetchDataFunc()(defaultValue, this.abortController.signalController.signal)\r\n if (!Array.isArray(res)) return\r\n const options = this.getOptionsFilter(res, this.existedIds)\r\n const optionSelected = options.find((x) => x.Id === defaultValue) ?? null\r\n this.setState({ options, optionSelected, loading: false })\r\n return\r\n } catch (error) {\r\n // console.log(error)\r\n ApiAlertContext.ApiAlert?.PushError('Error from server!')\r\n } finally {\r\n this.setState({ statusText: 'no items', loading: false })\r\n }\r\n }\r\n\r\n handleChange = (_: React.SyntheticEvent, value: O | null) => {\r\n this.setState({ optionSelected: value })\r\n if (this.refInput) this.refInput.value = value?.Id ?? ''\r\n this.props.onChange && this.props.onChange(value)\r\n }\r\n\r\n handleInputChange = (_: React.SyntheticEvent, value: string) => {\r\n const state: Pick<ISelectWithApiState<O>, 'inputValue' | 'statusText' | 'loading'> = { inputValue: value }\r\n if (value === this.state.optionSelected?.Name) {\r\n this.setState(state)\r\n return\r\n }\r\n const valueFormated = value.trim().toLowerCase()\r\n const selectedIndex = this.state.options.findIndex((x) => {\r\n return x.Name?.trim().toLowerCase().includes(valueFormated)\r\n })\r\n if (selectedIndex < 0 || valueFormated === '') state.statusText = 'loading...'\r\n this.setState(state, () => {\r\n if (selectedIndex < 0 || valueFormated === '') this.timer.start(valueFormated)\r\n })\r\n }\r\n\r\n fillterOptions = (options: O[], state: FilterOptionsState<O>) => {\r\n return options.filter((x) => {\r\n const value = state.inputValue.toLowerCase()\r\n return x.Id.toLowerCase().includes(value) || x.Name?.toLowerCase().includes(value)\r\n })\r\n }\r\n\r\n getLabel = () => {\r\n return this.props.label ?? this.props.name?.toString()\r\n }\r\n\r\n getDefaultValue = () => {\r\n if (!this.props.name) return\r\n return (this.props.defaultValue ?? this.props.data?.[this.props.name])?.toString()\r\n }\r\n\r\n getOptionsFilter<O extends ISelectWithApiOption = ISelectWithApiOption>(options: O[], existedId: string[] = []): O[] {\r\n const ids = new Set<string | number>(existedId)\r\n return options.reduce<O[]>((a, b) => {\r\n if (!ids.has(b.Id)) {\r\n a.push(b)\r\n ids.add(b.Id)\r\n }\r\n return a\r\n }, [])\r\n }\r\n }\r\n return SelectWithApi\r\n}\r\nexport default CreateSelectWithApi\r\n"],"names":["CreateSelectWithApi","params","SelectWithApi","props","_props$existedIds","_this","_callback","_classCallCheck","_callSuper","_defineProperty","signalController","AbortController","_ref","_this$props$fetchData","fetchData","Promise","resolve","_timer","_second","callback","_asyncToGenerator","_regeneratorRuntime","mark","_callee","value","res","options","_ApiAlertContext$ApiA","wrap","_context","prev","next","abortController","getFetchDataFunc","signal","sent","getOptionsFilter","existedIds","setState","t0","ApiAlertContext","ApiAlert","PushError","statusText","finish","stop","_x","apply","this","arguments","start","text","timer","clear","window","setTimeout","abort","clearTimeout","_callee2","_options$find","defaultValue","optionSelected","_ApiAlertContext$ApiA2","_context2","getDefaultValue","Array","isArray","abrupt","find","x","Id","loading","_","_value$Id","refInput","onChange","_this$state$optionSel","state","inputValue","Name","valueFormated","trim","toLowerCase","selectedIndex","findIndex","_x$Name","includes","filter","_x$Name2","_this$props$label","_this$props$name","label","name","toString","_ref3","_this$props$defaultVa","_this$props$data","data","_inherits","Component","_createClass","key","_this$props$name2","_this$state$optionSel2","_this$props$name3","_this$state$optionSel3","_this2","eMessage","getErrorMessage","messageErrors","_jsxs","_jsx","Autocomplete","disabled","fullWidth","noOptionsText","getOptionLabel","_x$Name3","getOptionKey","JSON","stringify","isOptionEqualToValue","o","v","filterOptions","fillterOptions","handleChange","onInputChange","handleInputChange","renderInput","_this2$props$slots","TextField","_objectSpread","getLabel","error","helperText","message","onBlur","slots","textFieldProps","ref","hidden","Other","concat","prevProps","_this$props$existedId","ids","Set","length","undefined","reduce","a","b","has","push","add"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.select-with-api.js","sources":["../../src/form/create.select-with-api.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Autocomplete, FilterOptionsState, TextField, TextFieldProps } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { ApiAlertContext } from '../api-context'\r\n\r\nexport interface ISelectWithApiOption<TOther = any> {\r\n Id: string\r\n Name?: string\r\n Other?: TOther\r\n}\r\n\r\nexport interface ISelectWithApiPropsSlots {\r\n textFieldProps: TextFieldProps\r\n}\r\n\r\nexport type ISelectWithApiFetchData<O extends ISelectWithApiOption> = (value?: string, signal?: AbortSignal) => Promise<O[]>\r\n\r\nexport interface ISelectWithApiProps<T, O extends ISelectWithApiOption> extends IFormInputBase<T>, ISelectWithApiParams<O> {\r\n onChange?: (value: O | null) => void\r\n existedIds?: string[]\r\n slots?: ISelectWithApiPropsSlots\r\n}\r\n\r\nexport interface ISelectWithApiState<O extends ISelectWithApiOption> {\r\n options: O[]\r\n statusText?: string\r\n optionSelected: O | null\r\n inputValue: string\r\n loading?: boolean\r\n}\r\n\r\nexport interface ISelectWithApiParams<O extends ISelectWithApiOption> {\r\n fetchData?: ISelectWithApiFetchData<O>\r\n}\r\n\r\nconst CreateSelectWithApi = function <T, O extends ISelectWithApiOption = ISelectWithApiOption>(\r\n params?: ISelectWithApiParams<O>\r\n): ComponentType<ISelectWithApiProps<T, O>> {\r\n class SelectWithApi extends Component<ISelectWithApiProps<T, O>, ISelectWithApiState<O>> {\r\n abortController = { signalController: new AbortController() }\r\n refInput: HTMLInputElement | null = null\r\n existedIds: string[] = []\r\n constructor(props: ISelectWithApiProps<T, O>) {\r\n super(props)\r\n this.state = {\r\n options: [],\r\n statusText: 'no items',\r\n optionSelected: null,\r\n inputValue: '',\r\n loading: true\r\n }\r\n this.existedIds = props.existedIds ?? []\r\n }\r\n\r\n render() {\r\n const defaultValue = this.getDefaultValue()\r\n const eMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n return (\r\n <>\r\n <Autocomplete\r\n disabled={this.state.loading || this.props.disabled}\r\n fullWidth\r\n noOptionsText={this.state.statusText}\r\n options={this.state.options}\r\n getOptionLabel={(x) => x.Name ?? x.Id}\r\n getOptionKey={(x) => JSON.stringify(x)}\r\n isOptionEqualToValue={(o, v) => o.Id.toString() === v.Id.toString() && o.Name === v.Name}\r\n filterOptions={this.fillterOptions}\r\n // select\r\n value={this.state.optionSelected}\r\n onChange={this.handleChange}\r\n // input\r\n inputValue={this.state.inputValue}\r\n onInputChange={this.handleInputChange}\r\n renderInput={(params) => (\r\n <TextField\r\n {...params}\r\n label={this.getLabel()}\r\n error={eMessage.error}\r\n helperText={eMessage.message}\r\n onBlur={() => {\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n }}\r\n {...this.props.slots?.textFieldProps}\r\n />\r\n )}\r\n />\r\n <input ref={(ref) => (this.refInput = ref)} hidden name={this.props.name?.toString()} defaultValue={defaultValue} />\r\n {this.state.optionSelected?.Other && (\r\n <input\r\n hidden\r\n name={`${this.props.name?.toString()}Other`}\r\n key={this.state.optionSelected.Id ?? 'key'}\r\n defaultValue={JSON.stringify(this.state.optionSelected.Other)}\r\n />\r\n )}\r\n </>\r\n )\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchData()\r\n }\r\n\r\n componentWillUnmount(): void {\r\n this.timer.clear()\r\n }\r\n\r\n componentDidUpdate(prevProps: Readonly<ISelectWithApiProps<T, O>>): void {\r\n if (JSON.stringify(prevProps.existedIds) !== JSON.stringify(this.props.existedIds)) {\r\n this.existedIds = this.props.existedIds ?? []\r\n }\r\n }\r\n\r\n getFetchDataFunc = (): ISelectWithApiFetchData<O> => {\r\n return this.props.fetchData ?? params?.fetchData ?? (() => Promise.resolve([]))\r\n }\r\n\r\n timer = {\r\n _timer: 0,\r\n _second: 500,\r\n callback: async (value: string) => {\r\n try {\r\n this.abortController.signalController = new AbortController()\r\n const res = await this.getFetchDataFunc()(value, this.abortController.signalController.signal)\r\n const options = this.getOptionsFilter(res, this.existedIds)\r\n this.setState({ options })\r\n } catch (error) {\r\n // console.log(error)\r\n ApiAlertContext.ApiAlert?.PushError('Error from server!')\r\n } finally {\r\n this.setState({ statusText: 'no items' })\r\n }\r\n },\r\n start: (text: string) => {\r\n this.timer.clear()\r\n this.timer._timer = window.setTimeout(() => this.timer.callback(text), this.timer._second)\r\n },\r\n clear: () => {\r\n this.abortController.signalController.abort()\r\n clearTimeout(this.timer._timer)\r\n }\r\n }\r\n\r\n fetchData = async () => {\r\n try {\r\n const defaultValue = this.getDefaultValue()\r\n const res = await this.getFetchDataFunc()(defaultValue, this.abortController.signalController.signal)\r\n if (!Array.isArray(res)) return\r\n const options = this.getOptionsFilter(res, this.existedIds)\r\n const optionSelected = options.find((x) => x.Id === defaultValue) ?? null\r\n this.setState({ options, optionSelected, loading: false })\r\n return\r\n } catch (error) {\r\n // console.log(error)\r\n ApiAlertContext.ApiAlert?.PushError('Error from server!')\r\n } finally {\r\n this.setState({ statusText: 'no items', loading: false })\r\n }\r\n }\r\n\r\n handleChange = (_: React.SyntheticEvent, value: O | null) => {\r\n this.setState({ optionSelected: value })\r\n if (this.refInput) this.refInput.value = value?.Id ?? ''\r\n this.props.onChange && this.props.onChange(value)\r\n }\r\n\r\n handleInputChange = (_: React.SyntheticEvent, value: string) => {\r\n const state: Pick<ISelectWithApiState<O>, 'inputValue' | 'statusText' | 'loading'> = { inputValue: value }\r\n if (value === this.state.optionSelected?.Name) {\r\n this.setState(state)\r\n return\r\n }\r\n const valueFormated = value.trim().toLowerCase()\r\n const selectedIndex = this.state.options.findIndex((x) => {\r\n return x.Name?.trim().toLowerCase().includes(valueFormated)\r\n })\r\n if (selectedIndex < 0 || valueFormated === '') state.statusText = 'loading...'\r\n this.setState(state, () => {\r\n if (selectedIndex < 0 || valueFormated === '') this.timer.start(valueFormated)\r\n })\r\n }\r\n\r\n fillterOptions = (options: O[], state: FilterOptionsState<O>) => {\r\n return options.filter((x) => {\r\n const value = state.inputValue.toLowerCase()\r\n return x.Id.toLowerCase().includes(value) || x.Name?.toLowerCase().includes(value)\r\n })\r\n }\r\n\r\n getLabel = () => {\r\n return this.props.label ?? this.props.name?.toString()\r\n }\r\n\r\n getDefaultValue = () => {\r\n if (!this.props.name) return\r\n return (this.props.defaultValue ?? this.props.data?.[this.props.name])?.toString()\r\n }\r\n\r\n getOptionsFilter<O extends ISelectWithApiOption = ISelectWithApiOption>(options: O[], existedId: string[] = []): O[] {\r\n const ids = new Set<string | number>(existedId)\r\n return options.reduce<O[]>((a, b) => {\r\n if (!ids.has(b.Id)) {\r\n a.push(b)\r\n ids.add(b.Id)\r\n }\r\n return a\r\n }, [])\r\n }\r\n }\r\n return SelectWithApi\r\n}\r\nexport default CreateSelectWithApi\r\n"],"names":["CreateSelectWithApi","params","SelectWithApi","props","_props$existedIds","_this","_callback","_classCallCheck","_callSuper","_defineProperty","signalController","AbortController","_ref","_this$props$fetchData","fetchData","Promise","resolve","_timer","_second","callback","_asyncToGenerator","_regeneratorRuntime","mark","_callee","value","res","options","_ApiAlertContext$ApiA","wrap","_context","prev","next","abortController","getFetchDataFunc","signal","sent","getOptionsFilter","existedIds","setState","t0","ApiAlertContext","ApiAlert","PushError","statusText","finish","stop","_x","apply","this","arguments","start","text","timer","clear","window","setTimeout","abort","clearTimeout","_callee2","_options$find","defaultValue","optionSelected","_ApiAlertContext$ApiA2","_context2","getDefaultValue","Array","isArray","abrupt","find","x","Id","loading","_","_value$Id","refInput","onChange","_this$state$optionSel","state","inputValue","Name","valueFormated","trim","toLowerCase","selectedIndex","findIndex","_x$Name","includes","filter","_x$Name2","_this$props$label","_this$props$name","label","name","toString","_ref3","_this$props$defaultVa","_this$props$data","data","_inherits","Component","_createClass","key","_this$props$name2","_this$state$optionSel2","_this$props$name3","_this$state$optionSel3","_this2","eMessage","getErrorMessage","messageErrors","_jsxs","_jsx","Autocomplete","disabled","fullWidth","noOptionsText","getOptionLabel","_x$Name3","getOptionKey","JSON","stringify","isOptionEqualToValue","o","v","filterOptions","fillterOptions","handleChange","onInputChange","handleInputChange","renderInput","_this2$props$slots","TextField","_objectSpread","getLabel","error","helperText","message","onBlur","slots","textFieldProps","ref","hidden","Other","concat","prevProps","_this$props$existedId","ids","Set","length","undefined","reduce","a","b","has","push","add"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e,objectWithoutProperties as t,objectSpread2 as n,inherits as r,createClass as o,classCallCheck as i,callSuper as l}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{createRef as a,Component as u}from"react";import{styled as p,Box as m,IconButton as d,Typography as h,Tooltip as f}from"@mui/material";import g from"@mui/icons-material/Fullscreen";import v from"@mui/icons-material/FullscreenExit";import{getErrorMessage as x}from"./
|
|
1
|
+
import{defineProperty as e,objectWithoutProperties as t,objectSpread2 as n,inherits as r,createClass as o,classCallCheck as i,callSuper as l}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{createRef as a,Component as u}from"react";import{styled as p,Box as m,IconButton as d,Typography as h,Tooltip as f}from"@mui/material";import g from"@mui/icons-material/Fullscreen";import v from"@mui/icons-material/FullscreenExit";import{getErrorMessage as x}from"./helpers.js";import"../components/breadcrumbs.js";import"../components/buttons.js";import"clipboard-copy";import"@mui/icons-material/Done";import"@mui/icons-material/ContentCopy";import"../components/create.multi-select-dropdown.js";import"../components/help-tooltip.js";import F,{textEditorClasses as C}from"../components/text-editor.js";var b=["children"];function y(t){return function(){function n(t){var r;return i(this,n),r=l(this,n,[t]),e(r,"handleFullscreenChange",(function(){r.setState({isFullscreen:!!document.fullscreenElement})})),e(r,"handleFullscreenToggle",(function(){r.contentRef.current&&(document.fullscreenElement?document.exitFullscreen():r.contentRef.current.requestFullscreen().catch((function(e){console.error("Error attempting to enable full-screen mode: ".concat(e.message))})))})),e(r,"getWrapClasses",(function(){var e=[];return r.state.isFullscreen&&e.push(C.fullscreen),e.join(" ")})),r.state={isFullscreen:!1},r.contentRef=a(),r}return r(n,u),o(n,[{key:"componentDidMount",value:function(){document.addEventListener("fullscreenchange",this.handleFullscreenChange)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("fullscreenchange",this.handleFullscreenChange)}},{key:"render",value:function(){var e,n,r,o,i,l=this,a=x(this.props.messageErrors,this.props.name),u=null!==(e=null===(n=this.props.name?null===(r=this.props.data)||void 0===r?void 0:r[this.props.name]:"")||void 0===n?void 0:n.toString())&&void 0!==e?e:"";return c(m,{id:t.id,ref:this.contentRef,sx:{backgroundColor:"#fff"},children:[this.state.isFullscreen&&s(k,{children:s(h,{variant:"h4",sx:{fontWeight:600,flex:1,textAlign:"center"},children:t.title})}),c(j,{className:this.getWrapClasses(),children:[s(E,{children:s(f,{title:this.state.isFullscreen?"Exit Fullscreen":"Fullscreen",arrow:!0,children:s(S,{sx:{color:"#06c"},onClick:this.handleFullscreenToggle,children:this.state.isFullscreen?s(v,{}):s(g,{})})})}),s(W,{children:s(F,{defautValue:u,name:null!==(o=null===(i=this.props.name)||void 0===i?void 0:i.toString())&&void 0!==o?o:"",readOnly:this.props.disabled,error:a.error,onBlur:function(){var e,t;l.props.name&&(null===(e=(t=l.props).onBlur)||void 0===e||e.call(t,l.props.name))}})})]})]})}}])}()}var j=p(m)((function(t){var n=t.theme;return e(e({maxWidth:n.breakpoints.values.xl,margin:"0 auto",position:"relative"},"&.".concat(C.fullscreen," .").concat(C.root),{height:"calc(100vh - ".concat(74,"px)")}),"&.".concat(C.fullscreen),{width:"871px"})})),k=p(m)({height:"".concat(64,"px"),display:"flex",justifyContent:"center",alignItems:"center"}),E=p((function(e){var r=e.children,o=t(e,b);return s(m,n(n({},o),{},{children:s(m,{children:r})}))}))({position:"sticky",top:"-1px",zIndex:2,"& > div":{height:0,display:"flex",justifyContent:"right",padding:"0 6px"}}),S=p(d)({flex:"0 0 auto",marginTop:"1px",width:"40px",height:"40px"}),W=p(m)({backgroundColor:"#fff",width:"100%","& .ql-container":{fontFamily:'"Roboto", serif',fontSize:"14px"},"& .ql-toolbar":{position:"sticky",top:"-1px",backgroundColor:"#fff",zIndex:1}});export{y as default};
|
|
2
2
|
//# sourceMappingURL=create.text-editor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.text-editor.js","sources":["../../src/form/create.text-editor.tsx"],"sourcesContent":["import React, { Component, createRef } from 'react'\r\nimport { Box, BoxProps, IconButton, styled, Tooltip, Typography } from '@mui/material'\r\nimport FullscreenIcon from '@mui/icons-material/Fullscreen'\r\nimport FullscreenExitIcon from '@mui/icons-material/FullscreenExit'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './
|
|
1
|
+
{"version":3,"file":"create.text-editor.js","sources":["../../src/form/create.text-editor.tsx"],"sourcesContent":["import React, { Component, createRef } from 'react'\r\nimport { Box, BoxProps, IconButton, styled, Tooltip, Typography } from '@mui/material'\r\nimport FullscreenIcon from '@mui/icons-material/Fullscreen'\r\nimport FullscreenExitIcon from '@mui/icons-material/FullscreenExit'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { TextEditor as TextEditorBase, textEditorClasses } from '../components'\r\n\r\nexport interface ITextEditorParams {\r\n id: string\r\n title: string\r\n}\r\n\r\nexport interface ITextEditorProps<T> extends IFormInputBase<T> {}\r\n\r\nexport interface ITextEditorState {\r\n isFullscreen: boolean\r\n}\r\n\r\nfunction CreateTextEditor<T>(params: ITextEditorParams) {\r\n class TextEditor extends Component<ITextEditorProps<T>, ITextEditorState> {\r\n contentRef\r\n constructor(props: ITextEditorProps<T>) {\r\n super(props)\r\n this.state = {\r\n isFullscreen: false\r\n }\r\n this.contentRef = createRef<HTMLDivElement | null>()\r\n }\r\n\r\n componentDidMount() {\r\n document.addEventListener('fullscreenchange', this.handleFullscreenChange)\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener('fullscreenchange', this.handleFullscreenChange)\r\n }\r\n\r\n handleFullscreenChange = () => {\r\n this.setState({ isFullscreen: !!document.fullscreenElement })\r\n }\r\n\r\n handleFullscreenToggle = () => {\r\n if (this.contentRef.current) {\r\n if (!document.fullscreenElement) {\r\n this.contentRef.current.requestFullscreen().catch((err) => {\r\n console.error(`Error attempting to enable full-screen mode: ${err.message}`)\r\n })\r\n } else {\r\n document.exitFullscreen()\r\n }\r\n }\r\n }\r\n\r\n getWrapClasses = () => {\r\n const classes = []\r\n if (this.state.isFullscreen) classes.push(textEditorClasses.fullscreen)\r\n return classes.join(' ')\r\n }\r\n\r\n render() {\r\n const errorMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n const dValue = (this.props.name ? this.props.data?.[this.props.name] : '')?.toString() ?? ''\r\n\r\n return (\r\n <Box id={params.id} ref={this.contentRef} sx={{ backgroundColor: '#fff' }}>\r\n {this.state.isFullscreen && (\r\n <WrapTitle>\r\n <Typography variant='h4' sx={{ fontWeight: 600, flex: 1, textAlign: 'center' }}>\r\n {params.title}\r\n </Typography>\r\n </WrapTitle>\r\n )}\r\n <Wrap className={this.getWrapClasses()}>\r\n <WrapActions>\r\n <Tooltip title={this.state.isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'} arrow>\r\n <CustomButton sx={{ color: '#06c' }} onClick={this.handleFullscreenToggle}>\r\n {this.state.isFullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}\r\n </CustomButton>\r\n </Tooltip>\r\n </WrapActions>\r\n <WrapTextEditor>\r\n <TextEditorBase\r\n defautValue={dValue}\r\n name={this.props.name?.toString() ?? ''}\r\n readOnly={this.props.disabled}\r\n error={errorMessage.error}\r\n onBlur={() => {\r\n if (!this.props.name) return\r\n this.props.onBlur?.(this.props.name)\r\n }}\r\n />\r\n </WrapTextEditor>\r\n </Wrap>\r\n </Box>\r\n )\r\n }\r\n }\r\n return TextEditor\r\n}\r\nexport default CreateTextEditor\r\n\r\nconst editorHeight = 64\r\n\r\nconst Wrap = styled(Box)(({ theme }) => ({\r\n maxWidth: theme.breakpoints.values.xl,\r\n margin: '0 auto',\r\n position: 'relative',\r\n [`&.${textEditorClasses.fullscreen} .${textEditorClasses.root}`]: {\r\n height: `calc(100vh - ${editorHeight + 10}px)`\r\n },\r\n [`&.${textEditorClasses.fullscreen}`]: {\r\n width: '871px'\r\n }\r\n}))\r\n\r\nconst WrapTitle = styled(Box)({\r\n height: `${editorHeight}px`,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center'\r\n})\r\n\r\nconst WrapActions = styled(({ children, ...props }: BoxProps) => (\r\n <Box {...props}>\r\n <Box>{children}</Box>\r\n </Box>\r\n))({\r\n position: 'sticky',\r\n top: '-1px',\r\n zIndex: 2,\r\n '& > div': {\r\n height: 0,\r\n display: 'flex',\r\n justifyContent: 'right',\r\n padding: '0 6px'\r\n }\r\n})\r\n\r\nconst CustomButton = styled(IconButton)({\r\n flex: '0 0 auto',\r\n marginTop: '1px',\r\n width: '40px',\r\n height: '40px'\r\n})\r\n\r\nconst WrapTextEditor = styled(Box)({\r\n backgroundColor: '#fff',\r\n width: '100%',\r\n '& .ql-container': {\r\n fontFamily: '\"Roboto\", serif',\r\n fontSize: '14px'\r\n },\r\n '& .ql-toolbar': {\r\n position: 'sticky',\r\n top: '-1px',\r\n backgroundColor: '#fff',\r\n zIndex: 1\r\n }\r\n})\r\n"],"names":["CreateTextEditor","params","TextEditor","props","_this","_classCallCheck","_callSuper","_defineProperty","setState","isFullscreen","document","fullscreenElement","contentRef","current","exitFullscreen","requestFullscreen","err","console","error","concat","message","classes","state","push","textEditorClasses","fullscreen","join","createRef","_inherits","Component","_createClass","key","value","addEventListener","this","handleFullscreenChange","removeEventListener","_toString","_ref","_this$props$data","_this$props$name$toSt","_this$props$name","_this2","errorMessage","getErrorMessage","messageErrors","name","dValue","data","toString","_jsxs","Box","id","ref","sx","backgroundColor","children","_jsx","WrapTitle","Typography","variant","fontWeight","flex","textAlign","title","Wrap","className","getWrapClasses","WrapActions","Tooltip","arrow","CustomButton","color","onClick","handleFullscreenToggle","FullscreenExitIcon","FullscreenIcon","WrapTextEditor","TextEditorBase","defautValue","readOnly","disabled","onBlur","_this2$props$onBlur","_this2$props","call","styled","_ref2","theme","maxWidth","breakpoints","values","xl","margin","position","root","height","editorHeight","width","display","justifyContent","alignItems","_ref4","_objectWithoutProperties","_excluded","_objectSpread","top","zIndex","padding","IconButton","marginTop","fontFamily","fontSize"],"mappings":"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"}
|
package/dist/form/dino-form.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createClass as t,classCallCheck as e,defineProperty as r}from"../_virtual/_rollupPluginBabelHelpers.js";import i from"./validator.js";import
|
|
1
|
+
import{createClass as t,classCallCheck as e,defineProperty as r}from"../_virtual/_rollupPluginBabelHelpers.js";import i from"./validator.js";import a from"./modal-wrapper.js";import o from"./create.form-base.js";import s from"./create.input.file.js";import m from"./create.input.js";import c from"./create.date-picker.js";import p from"./create.text-editor.js";import l from"./create.date-expired.js";import f from"./create.form-comfirm.js";import h from"./create.select-simple.js";import u from"./create.select-with-api.js";import d from"./create.form-grid-layout.js";import j from"./create.autocomplete.chips.js";import{FormBottomBarWrap as n}from"./create.form-grid-layout.units.js";import{createInputFileCsvLocalParser as v}from"./create.input-file.csv-local-parser.js";var C=new(t((function t(){e(this,t),r(this,"ModalWrap",a),r(this,"BottomBarWrap",n),r(this,"FormValidator",i),r(this,"validator",i.initial),r(this,"createFormBase",o),r(this,"createFormComfirm",f),r(this,"createFormGridLayout",d),r(this,"createDateExpired",l),r(this,"createDatePicker",c),r(this,"createAutocompleteChip",j),r(this,"createInputFileCsvLocalParser",v),r(this,"createInputFile",s),r(this,"createInput",m),r(this,"createSelectSimple",h),r(this,"createSelectWithApi",u),r(this,"createTextEditor",p)})));export{C as default};
|
|
2
2
|
//# sourceMappingURL=dino-form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dino-form.js","sources":["../../src/form/dino-form.tsx"],"sourcesContent":["import FormValidator from './validator'\r\nimport FormModalWrapper from './modal-wrapper'\r\nimport CreateFormBase from './create.form-base'\r\nimport CreateInputFile from './create.input.file'\r\nimport CreateInput from './create.input'\r\nimport CreateDatePicker from './create.date-picker'\r\nimport CreateTextEditor from './create.text-editor'\r\nimport CreateDateExpired from './create.date-expired'\r\nimport CreateFormComfirm from './create.form-comfirm'\r\nimport CreateSelectSimple from './create.select-simple'\r\nimport CreateSelectWithApi from './create.select-with-api'\r\nimport CreateFormGridLayout from './create.form-grid-layout'\r\nimport CreateAutocompleteChip from './create.autocomplete.chips'\r\nimport { FormBottomBarWrap } from './create.form-grid-layout.units'\r\n\r\nclass DinoFormBase {\r\n //#region Base\r\n ModalWrap = FormModalWrapper\r\n BottomBarWrap = FormBottomBarWrap\r\n FormValidator = FormValidator\r\n validator = FormValidator.initial\r\n createFormBase = CreateFormBase\r\n createFormComfirm = CreateFormComfirm\r\n createFormGridLayout = CreateFormGridLayout\r\n //#endregion\r\n\r\n //#region Inputs\r\n createDateExpired= CreateDateExpired\r\n createDatePicker = CreateDatePicker\r\n createAutocompleteChip = CreateAutocompleteChip\r\n
|
|
1
|
+
{"version":3,"file":"dino-form.js","sources":["../../src/form/dino-form.tsx"],"sourcesContent":["import FormValidator from './validator'\r\nimport FormModalWrapper from './modal-wrapper'\r\nimport CreateFormBase from './create.form-base'\r\nimport CreateInputFile from './create.input.file'\r\nimport CreateInput from './create.input'\r\nimport CreateDatePicker from './create.date-picker'\r\nimport CreateTextEditor from './create.text-editor'\r\nimport CreateDateExpired from './create.date-expired'\r\nimport CreateFormComfirm from './create.form-comfirm'\r\nimport CreateSelectSimple from './create.select-simple'\r\nimport CreateSelectWithApi from './create.select-with-api'\r\nimport CreateFormGridLayout from './create.form-grid-layout'\r\nimport CreateAutocompleteChip from './create.autocomplete.chips'\r\nimport { FormBottomBarWrap } from './create.form-grid-layout.units'\r\nimport { createInputFileCsvLocalParser } from './create.input-file.csv-local-parser'\r\n\r\nclass DinoFormBase {\r\n //#region Base\r\n ModalWrap = FormModalWrapper\r\n BottomBarWrap = FormBottomBarWrap\r\n FormValidator = FormValidator\r\n validator = FormValidator.initial\r\n createFormBase = CreateFormBase\r\n createFormComfirm = CreateFormComfirm\r\n createFormGridLayout = CreateFormGridLayout\r\n //#endregion\r\n\r\n //#region Inputs\r\n createDateExpired = CreateDateExpired\r\n createDatePicker = CreateDatePicker\r\n createAutocompleteChip = CreateAutocompleteChip\r\n createInputFileCsvLocalParser = createInputFileCsvLocalParser\r\n createInputFile = CreateInputFile\r\n createInput = CreateInput\r\n createSelectSimple = CreateSelectSimple\r\n createSelectWithApi = CreateSelectWithApi\r\n createTextEditor = CreateTextEditor\r\n //#endregion\r\n}\r\n\r\nconst DinoForm = new DinoFormBase()\r\nexport default DinoForm\r\n"],"names":["DinoForm","_createClass","DinoFormBase","_classCallCheck","_defineProperty","FormModalWrapper","FormBottomBarWrap","FormValidator","this","initial","CreateFormBase","CreateFormComfirm","CreateFormGridLayout","CreateDateExpired","CreateDatePicker","CreateAutocompleteChip","createInputFileCsvLocalParser","CreateInputFile","CreateInput","CreateSelectSimple","CreateSelectWithApi","CreateTextEditor"],"mappings":"swBAcoF,IA0B9EA,EAAW,IAxBCC,GAAA,SAAAC,IAAAC,OAAAD,GAChBE,mBACYC,GAAgBD,uBACZE,GAAiBF,uBACjBG,GAAaH,EAAAI,KAAA,YACjBD,EAAcE,SAAOL,wBAChBM,GAAcN,2BACXO,GAAiBP,8BACdQ,GAGvBR,2BACoBS,GAAiBT,0BAClBU,GAAgBV,gCACVW,GAAsBX,uCACfY,GAA6BZ,yBAC3Ca,GAAeb,qBACnBc,GAAWd,4BACJe,GAAkBf,6BACjBgB,GAAmBhB,0BACtBiB,EAAgB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{toConsumableArray as r,objectSpread2 as e,typeof as n,createForOfIteratorHelper as t}from"../_virtual/_rollupPluginBabelHelpers.js";import o from"./validator.js";var a=function(r){for(var e=arguments.length,n=new Array(e>1?e-1:0),t=1;t<e;t++)n[t-1]=arguments[t];return n.length<1?r:n.filter((function(r){return r})).reduce((function(r,e){return r=Object.assign(r,e)}),r)},i=function(e){for(var t=arguments.length,o=new Array(t>1?t-1:0),u=1;u<t;u++)o[u-1]=arguments[u];if((o=o.filter((function(r){return!!r}))).length<1)return e;for(var c=[e].concat(r(o)).filter((function(r){return r})),f=c.reduce((function(e,t){if(!t)return e;var o=Object.keys(t).filter((function(r){return"object"===n(t[r])&&!Array.isArray(t[r])}));return e.push.apply(e,r(o)),e}),[]),l=a.apply(void 0,[e].concat(r(c.slice(1)))),s=l,v=c.slice(1).filter((function(r){return!!r})),p=function(){var e=f[y];s[e]=i.apply(void 0,[{},s[e]].concat(r(v.map((function(r){return r[e]})))))},y=0;y<f.length;y++)p();return l},u=function(r,n){return r&&r[n]?e(e({},r[n][0]),{},{error:!0}):{error:!1,message:""}},c=function(r){var e=Array.from(r).reduce((function(r,e){return r[e[0]]?Array.isArray(r[e[0]])?r[e[0]].push(e[1]):r[e[0]]=[r[e[0]],e[1]]:r[e[0]]=e[1],r}),{});return Object.keys(e).forEach((function(r){var n=e[r];"string"!=typeof n||"true"!==n.toString().toLocaleLowerCase()&&"false"!==n.toString().toLocaleLowerCase()||(e[r]="true"===n.toString().toLocaleLowerCase())})),e},f=function(r,e,n,t){var o=t.run(e);if(o){var a=n||{},i=Object.keys(e).filter((function(r){return!!e[r]})).filter((function(r){return e[r]instanceof File&&!!e[r].size}));return i.push(r),i.forEach((function(r){o[r]?a[r]=o[r]:delete a[r]})),a}return null},l=function(r,e){var n,t=null===(n=r.response)||void 0===n?void 0:n.data;if(t){var o=Object.keys(e),a={};return o.forEach((function(r){var e=t[r];Array.isArray(e)&&e.length>0&&(a[r]=[{message:e[0]}])})),a}},s=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];for(var a=n.map((function(r){return null==r?void 0:r.configs})).filter((function(r){return!!r})),u=Object.assign.apply(Object,[{}].concat(r(a))),c=function(){var e=Object.keys(u)[f];u[e]=i.apply(void 0,[{}].concat(r(a.map((function(r){return r?r[e]:{Rules:[]}}))))),u[e].Rules=a.map((function(r){return r?r[e]:{Rules:[]}})).reduce((function(e,n){var t;return e.push.apply(e,r(null!==(t=null==n?void 0:n.Rules)&&void 0!==t?t:[])),e}),[])},f=0;f<Object.keys(u).length;f++)c();return new o(u)},v=function(r,e){if(0===r.length)return{valid:!1,message:"File is empty or cannot be parsed"};var n=Object.keys(r[0]),o=e.filter((function(r){return!n.includes(r)}));if(o.length>0)return{valid:!1,message:"Missing required columns: ".concat(o.join(", "))};for(var a=0;a<r.length;a++){var i,u=r[a],c=t(e);try{for(c.s();!(i=c.n()).done;){var f=i.value,l=u[f];if("string"!=typeof l||""===l.trim())return{valid:!1,message:'Invalid or missing value for "'.concat(f.toString(),'" at row ').concat(a+2)}}}catch(r){c.e(r)}finally{c.f()}}return{valid:!0}};export{c as convertFormDataToJson,l as getErrorFromResponse,u as getErrorMessage,f as singleValidate,v as validateCsvModel,s as validateMerge};
|
|
2
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.js","sources":["../../src/form/helpers.ts"],"sourcesContent":["import { AxiosError } from 'axios'\r\nimport FormValidator, { IModelError, IRuleOption, IPartialError } from './validator'\r\n\r\ntype IAnyObject = { [key: string]: any }\r\nconst objectAssign = <T extends IAnyObject>(model: T, ...sources: (Partial<T> | undefined)[]) => {\r\n if (sources.length < 1) {\r\n return model\r\n }\r\n const temps = sources.filter((x) => x) as T[]\r\n return temps.reduce((a, b) => {\r\n a = Object.assign(a, b)\r\n return a\r\n }, model)\r\n}\r\n\r\nconst deepMerge = <T extends IAnyObject>(model: T, ...sources: (Partial<T> | undefined)[]) => {\r\n sources = sources.filter((x) => !!x)\r\n if (sources.length < 1) {\r\n return model\r\n }\r\n const temps = [model, ...sources].filter((x) => x)\r\n const fieldObjects = temps.reduce<string[]>((a, b) => {\r\n if (!b) return a\r\n const fields = Object.keys(b).filter((x) => typeof b[x] === 'object' && !Array.isArray(b[x]))\r\n a.push(...fields)\r\n return a\r\n }, [])\r\n\r\n const target = objectAssign<T>(model, ...temps.slice(1))\r\n const temp = target as any\r\n const temp2 = temps.slice(1).filter((x) => !!x) as Partial<T>[]\r\n for (let index = 0; index < fieldObjects.length; index++) {\r\n const element = fieldObjects[index]\r\n temp[element] = deepMerge({}, temp[element], ...temp2.map((x) => x[element]))\r\n }\r\n return target\r\n}\r\n\r\nexport const getErrorMessage = function <TModel>(MessageErrors: IPartialError<TModel> | undefined, key?: keyof TModel): IModelError {\r\n return MessageErrors && (MessageErrors as any)[key] ? { ...(MessageErrors as any)[key][0], error: true } : { error: false, message: '' }\r\n}\r\n\r\ntype IModelBase = {\r\n [key: string]: any\r\n}\r\n\r\nexport const convertFormDataToJson = function <TModel>(form: FormData): Partial<TModel> {\r\n const data = Array.from(form as any).reduce<Partial<TModel>>((a: unknown | any, b: any) => {\r\n if (!a[b[0]]) {\r\n a[b[0]] = b[1]\r\n } else if (Array.isArray(a[b[0]])) {\r\n a[b[0]].push(b[1])\r\n } else {\r\n a[b[0]] = [a[b[0]], b[1]]\r\n }\r\n return a\r\n }, {} as any) as any\r\n\r\n Object.keys(data).forEach((key) => {\r\n const value = data[key]\r\n if (typeof value === 'string' && (value.toString().toLocaleLowerCase() === 'true' || value.toString().toLocaleLowerCase() === 'false')) {\r\n data[key] = value.toString().toLocaleLowerCase() === 'true'\r\n }\r\n })\r\n return data\r\n}\r\n\r\nexport const singleValidate = function <TModel, TPartial = TModel>(\r\n key: keyof TModel,\r\n modelState: TPartial,\r\n MessageErrors: IPartialError<TModel>,\r\n Validator: FormValidator<TPartial>\r\n) {\r\n const messageErrors = Validator.run(modelState) as { [key: string]: any }\r\n if (messageErrors) {\r\n let errors = (MessageErrors || {}) as { [key: string]: any }\r\n const keys = Object.keys(modelState as any)\r\n .filter((key) => !!(modelState as any)[key])\r\n .filter((key) => ((modelState as any)[key] instanceof File ? !!((modelState as any)[key] as File).size : false))\r\n keys.push(key as string)\r\n keys.forEach((key) => {\r\n if (messageErrors[key]) {\r\n errors[key] = messageErrors[key]\r\n } else {\r\n delete errors[key]\r\n }\r\n })\r\n return errors\r\n }\r\n return null\r\n}\r\n\r\nexport const getErrorFromResponse = function <TModel>(error: AxiosError, ModelRender: TModel) {\r\n const data = error.response?.data as any\r\n if (data) {\r\n const keys = Object.keys(ModelRender as any)\r\n const MessageErrors: IPartialError<TModel> | undefined = {}\r\n keys.forEach((key) => {\r\n const messages = data[key]\r\n if (Array.isArray(messages) && messages.length > 0) {\r\n ;(MessageErrors as any)[key] = [{ message: messages[0] }]\r\n }\r\n })\r\n return MessageErrors\r\n }\r\n}\r\n\r\nexport const clearFieldEmpty = <TModel>(model: Extract<TModel, IModelBase>) => {\r\n Object.keys(model).forEach((key: keyof Extract<TModel, IModelBase>) => {\r\n if (!model[key]) delete model[key]\r\n })\r\n}\r\n\r\nexport const validateMerge = <TModel>(...validateor: (FormValidator<TModel> | undefined)[]): FormValidator<TModel> => {\r\n const configs = validateor.map((x) => x?.configs).filter((x) => !!x)\r\n\r\n let temp: any = Object.assign({}, ...configs)\r\n\r\n for (let index = 0; index < Object.keys(temp).length; index++) {\r\n const key = Object.keys(temp)[index]\r\n //merge configs\r\n temp[key] = deepMerge({}, ...configs.map((x) => (x ? x[key] : { Rules: [] })))\r\n //merge rules\r\n temp[key].Rules = configs\r\n .map((x) => (x ? x[key] : { Rules: [] }))\r\n .reduce<IRuleOption<TModel>[]>((a, b) => {\r\n a.push(...(b?.Rules ?? []))\r\n return a\r\n }, [])\r\n }\r\n return new FormValidator(temp)\r\n}\r\n\r\n/**\r\n * Interface representing the result of a CSV validation.\r\n */\r\nexport interface IValidateCsv {\r\n /** Indicates whether the CSV data is valid */\r\n valid: boolean\r\n /** Optional message providing error details if validation fails */\r\n message?: string\r\n}\r\n\r\n/**\r\n * Validates a parsed CSV data array against a list of required column keys.\r\n *\r\n * @param data - An array of objects representing rows parsed from a CSV file.\r\n * @param requiredKeys - An array of keys that must exist in the CSV headers and each row.\r\n * @returns An object indicating whether the data is valid and an optional error message.\r\n */\r\nexport const validateCsvModel = <T extends Record<string, any>>(data: T[], requiredKeys: (keyof T)[]): IValidateCsv => {\r\n // If the data is empty, consider the file invalid\r\n if (data.length === 0) {\r\n return { valid: false, message: 'File is empty or cannot be parsed' }\r\n }\r\n\r\n // Extract headers from the first row\r\n const headers = Object.keys(data[0])\r\n\r\n // Check for missing required columns\r\n const missing = requiredKeys.filter((key) => !headers.includes(key as string))\r\n if (missing.length > 0) {\r\n return { valid: false, message: `Missing required columns: ${missing.join(', ')}` }\r\n }\r\n\r\n // Validate that each required column in each row has a non-empty string value\r\n for (let i = 0; i < data.length; i++) {\r\n const row = data[i]\r\n for (const key of requiredKeys) {\r\n const value = row[key as string]\r\n if (typeof value !== 'string' || value.trim() === '') {\r\n return {\r\n valid: false,\r\n message: `Invalid or missing value for \"${key.toString()}\" at row ${i + 2}` // +2 accounts for header and 0-based index\r\n }\r\n }\r\n }\r\n }\r\n\r\n // All validations passed\r\n return { valid: true }\r\n}\r\n"],"names":["objectAssign","model","_len","arguments","length","sources","Array","_key","filter","x","reduce","a","b","Object","assign","deepMerge","_len2","_key2","temps","concat","_toConsumableArray","fieldObjects","fields","keys","_typeof","isArray","push","apply","target","slice","temp","temp2","_loop","element","index","map","getErrorMessage","MessageErrors","key","_objectSpread","error","message","convertFormDataToJson","form","data","from","forEach","value","toString","toLocaleLowerCase","singleValidate","modelState","Validator","messageErrors","run","errors","File","size","getErrorFromResponse","ModelRender","_error$response","response","messages","validateMerge","_len3","validateor","_key3","configs","_loop2","Rules","_b$Rules","FormValidator","validateCsvModel","requiredKeys","valid","headers","missing","includes","join","i","_step","row","_iterator","_createForOfIteratorHelper","s","n","done","trim","err","e","f"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{default as ApiPopover,ApiPopoverContext,mapApiPopoverContext,withApiPopoverContext}from"./api-context/popover.js";export{AlertDialog,default as AlertGlobal,ApiAlertContext}from"./api-context/alert-global.js";export{default as DrawerGlobal}from"./api-context/drawer-global.js";export{default as GlobalModal,GlobalModalContext,mapGlobalModalContext,withApiGlobalModalConsumerContext,withApiGlobalModalContext}from"./api-context/global-modal.js";export{default as PopoverGlobal,PopoverGlobalApi,PopoverGlobalContext,PopoverGlobalProvider,mapPopoverGlobalContext,withPopoverGlobalContext}from"./api-context/popover-global.js";export{default as Breadcrumbs}from"./components/breadcrumbs.js";export{LoadingButton}from"./components/buttons.js";export{default as CopyToClipboard}from"./components/copy-to-clipboard.js";export{default as CreateMultiSelectDropdown}from"./components/create.multi-select-dropdown.js";export{default as ImageWithFallback}from"./components/image-with-fallback.js";export{default as HelpTooltip,HelpTooltipWrap}from"./components/help-tooltip.js";export{default as TextEditorPreview}from"./components/text-editor.preview.js";export{default as TextEditor,textEditorClasses}from"./components/text-editor.js";export{default as CreateFilterBar}from"./filter-bar/create.filter-bar.js";export{EFieldValidate,ESearchMatch}from"./filter-bar/types.js";export{default as FormValidator,SingleRuleValidate,createFormValidator,mapRuleOptions}from"./form/validator.js";export{default as DinoForm}from"./form/dino-form.js";export{convertFormDataToJson,getErrorMessage}from"./form/
|
|
1
|
+
export{default as ApiPopover,ApiPopoverContext,mapApiPopoverContext,withApiPopoverContext}from"./api-context/popover.js";export{AlertDialog,default as AlertGlobal,ApiAlertContext}from"./api-context/alert-global.js";export{default as DrawerGlobal}from"./api-context/drawer-global.js";export{default as GlobalModal,GlobalModalContext,mapGlobalModalContext,withApiGlobalModalConsumerContext,withApiGlobalModalContext}from"./api-context/global-modal.js";export{default as PopoverGlobal,PopoverGlobalApi,PopoverGlobalContext,PopoverGlobalProvider,mapPopoverGlobalContext,withPopoverGlobalContext}from"./api-context/popover-global.js";export{default as Breadcrumbs}from"./components/breadcrumbs.js";export{LoadingButton}from"./components/buttons.js";export{default as CopyToClipboard}from"./components/copy-to-clipboard.js";export{default as CreateMultiSelectDropdown}from"./components/create.multi-select-dropdown.js";export{default as ImageWithFallback}from"./components/image-with-fallback.js";export{default as HelpTooltip,HelpTooltipWrap}from"./components/help-tooltip.js";export{default as TextEditorPreview}from"./components/text-editor.preview.js";export{default as TextEditor,textEditorClasses}from"./components/text-editor.js";export{default as CreateFilterBar}from"./filter-bar/create.filter-bar.js";export{EFieldValidate,ESearchMatch}from"./filter-bar/types.js";export{default as FormValidator,SingleRuleValidate,createFormValidator,mapRuleOptions}from"./form/validator.js";export{default as DinoForm}from"./form/dino-form.js";export{convertFormDataToJson,getErrorMessage,validateCsvModel}from"./form/helpers.js";export{useCheckScrolled,useDebounce}from"./hooks/index.js";export{ELazyStatus}from"./redux/types.js";export{default as DinoRedux}from"./redux/dino.js";export{default as CreateHocLazy,EmptyComponent,defaultOptionHocLazy}from"./redux/create.hoc-lazy.js";export{ELogic,EOperator,EOrder}from"./table/model-filter.js";import"react/jsx-runtime";import"react";import"@mui/material";import"@mui/icons-material/Edit";import"@mui/icons-material/Delete";export{decodeBase64,encodeBase64,fetchDelay,formatCapitalizeFirstText,formatCurrency,formatDatetime,formatFileSize,formatNumberWithCommas,mergeClasses,mergeObjects,sleep,tryParseArray,tryParseCsvFileToArray,tryParseIntRequired,tryParseObject,windowScrollToTop}from"./utils/helpers.js";import"./utils/dayjs-config.js";export{default as JObject}from"./utils/json-object.js";export{MFEventProvider,useMFEvent}from"./utils/mfe-events.js";export{QueryParam}from"./utils/query-param.js";export{default as CreateTable}from"./table/create.table.js";export{default as DinoTable}from"./table/dino.js";export{dinoTableClasses}from"./table/helpers.js";export{default as DinoTableGrid}from"./table-grid/dino.js";export{CreateTableGridItemActions}from"./table-grid/item-actions.js";export{default as dayjsCustom}from"dayjs";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/table/ui.units.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectWithoutProperties as e,objectSpread2 as r,slicedToArray as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as t,Fragment as
|
|
1
|
+
import{objectWithoutProperties as e,objectSpread2 as r,slicedToArray as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as t,Fragment as a,jsxs as l}from"react/jsx-runtime";import{useState as n,useEffect as o}from"react";import{styled as p,Typography as c,Box as m,Chip as s,Tooltip as u,IconButton as d,Divider as f}from"@mui/material";import v from"@mui/icons-material/OpenInNew";import{mergeObjects as g}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"react-router-dom";import"../utils/query-param.js";import"../components/breadcrumbs.js";import"../components/buttons.js";import x from"../components/copy-to-clipboard.js";import"../components/create.multi-select-dropdown.js";import{HelpTooltipWrap as h}from"../components/help-tooltip.js";import"../components/text-editor.js";import b from"dayjs";var y=["children"],k=function(e,i){return function(l){var n,o,p,c,m;return l.value?t(j,r(r({onClick:l.onClick},null===(n=l.slots)||void 0===n?void 0:n.typographyProps),{},{sx:(p=l.value,c=l.sx,m=l.slots,Object.assign({},p?e[p]:{},null==i?void 0:i.sx,c,null==m||null===(o=m.typographyProps)||void 0===o?void 0:o.sx)),children:l.title||l.value})):t(a,{})}},j=p(c)({borderRadius:"4px",fontSize:"0.8rem",padding:"4px 9px",fontWeight:600,minWidth:"70px",textAlign:"center",color:"#ffffff",display:"inline-block"}),w=function(e){var r,a=n(null!==(r=e.imageUri)&&void 0!==r?r:e.fallbackSrc),p=i(a,2),s=p[0],u=p[1];return o((function(){var r;u(null!==(r=e.imageUri)&&void 0!==r?r:e.fallbackSrc)}),[e.imageUri,e.fallbackSrc]),l(m,{sx:{display:"flex",alignItems:"center",height:"100%",gap:"10px"},children:[t(F,{src:s,onError:function(){return u(e.fallbackSrc)}}),t(c,{variant:"body1",children:e.value})]})},S=function(e){var r,a=n(null!==(r=e.imageUri)&&void 0!==r?r:e.imageFallback),l=i(a,2),p=l[0],c=l[1];return o((function(){var r;c(null!==(r=e.imageUri)&&void 0!==r?r:e.imageFallback)}),[e.imageUri,e.imageFallback]),t(F,{src:p,onError:function(){return c(e.imageFallback)},sx:e.sx})},F=p("img")({backgroundRepeat:"no-repeat",height:"50px",width:"50px",backgroundSize:"contain",borderRadius:"8px",boxShadow:"rgba(0, 0, 0, 0.16) 0px 1px 4px"}),U=function(e){var i,a=null!==(i=e.valueFormatted)&&void 0!==i?i:e.value,n=!!e.copyToClipboard&&!!a;return l(W,r(r({title:a},e.wrapProps),{},{children:[e.imageUrl&&t(S,{imageUri:e.imageUrl,sx:{mr:"10px"},imageFallback:e.imageFallbackSrc}),t(c,r(r({variant:"body2",component:"span",noWrap:!0,sx:{flex:1}},e.typographyProps),{},{children:a})),a&&!0===e.openInNewTab&&t(u,{arrow:!0,title:"Open new tab",children:t(d,{component:"a",href:a,target:"_blank",children:t(v,{fontSize:"small",sx:{color:"#1A75E2"}})})}),n&&t(x,{value:a}),a&&!0===e.beforeLine&&t(f,{flexItem:!0,variant:"middle",orientation:"vertical"})]}))},W=p((function(i){var a=i.children,l=e(i,y);return t(m,r(r({},l),{},{children:t("div",{children:a})}))}))({flex:1,width:"100%",height:"100%",position:"relative",top:0,left:0,"& > div":{display:"flex",alignItems:"center",width:"100%",height:"100%",position:"absolute",top:0,left:0}}),I=function(e){var r,i;if("string"!=typeof e.value)return null!==(r=e.value)&&void 0!==r?r:t(a,{});var n=e.value.split(null!==(i=null==e?void 0:e.separator)&&void 0!==i?i:"|").filter((function(e){return!!e})),o=null!=e&&e.maximum?n.slice(0,e.maximum):n,p=null!=e&&e.maximum&&n.length>e.maximum?n.length-e.maximum:0;return l(m,{sx:{display:"flex",alignItems:"center",flexWrap:"wrap",gap:"4px",height:"100%"},children:[o.map((function(r,i){return t(P,{label:e.valueFormatter?e.valueFormatter(r):r,size:"small"},"key"+i)})),p>0&&t(h,{title:"Artists",content:t(m,{sx:{display:"flex",alignItems:"center",flexWrap:"wrap",gap:"4px"},children:n.map((function(e,r){return t(P,{label:e,size:"small"},"key"+r)}))}),children:t(P,{label:"+".concat(p),size:"small"},"remaining")})]})},P=p(s)({lineHeight:1}),z=function(e){try{var i,a,l=null!==(i=null==e?void 0:e.showRelative)&&void 0!==i&&i,n=b(e.value),o=n.format(e.formatString),p=l?"".concat(o," (").concat(b().to(n),")"):o,m=e.styledGetter?e.styledGetter(e.value):{flex:1},s=g({},null!==(a=e.typographyProps)&&void 0!==a?a:{},{sx:m});return t(c,r(r({variant:"body2",component:"span",noWrap:!0},s),{},{children:p}))}catch(e){return t(c,{variant:"body2",component:"span",noWrap:!0,children:"format invalid"})}};export{U as CellBase,I as CellChips,z as CellDate,w as CellImageSmall,k as CreateStatusCell,S as ImageSmallFallback};
|
|
2
2
|
//# sourceMappingURL=ui.units.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui.units.js","sources":["../../src/table/ui.units.tsx"],"sourcesContent":["import React, { ComponentType, FC, PropsWithChildren, useEffect, useState } from 'react'\r\nimport { Box, BoxProps, Chip, Divider, IconButton, styled, SxProps, Theme, Tooltip, Typography, TypographyProps } from '@mui/material'\r\nimport OpenInNewIcon from '@mui/icons-material/OpenInNew'\r\nimport { dayjsCustom, mergeObjects } from '../utils'\r\nimport { CopyToClipboard, HelpTooltipWrap } from '../components'\r\n\r\n//#region CellImageSmall\r\nexport type IStatusCellConfig<T extends string> = { [key in T]: SxProps<Theme> }\r\n\r\nexport interface IStatusCellOptions {\r\n sx?: SxProps<Theme>\r\n}\r\n\r\nexport interface IStatusCellProps<T extends string> extends PropsWithChildren {\r\n value?: T\r\n title?: string\r\n sx?: SxProps<Theme>\r\n onClick?: TypographyProps['onClick']\r\n slots?: {\r\n typographyProps?: TypographyProps\r\n }\r\n}\r\n\r\nexport const CreateStatusCell = function <T extends string>(\r\n config: IStatusCellConfig<T>,\r\n options?: IStatusCellOptions\r\n): ComponentType<IStatusCellProps<T>> {\r\n const StatusCell: FC<IStatusCellProps<T>> = (props) => {\r\n const getSxProps = (): SxProps<Theme> => {\r\n const { value: data, sx, slots } = props\r\n return Object.assign({}, data ? config[data] : {}, options?.sx, sx, slots?.typographyProps?.sx)\r\n }\r\n\r\n if (!props.value) return <></>\r\n return (\r\n <CustomTypography onClick={props.onClick} {...props.slots?.typographyProps} sx={getSxProps()}>\r\n {props.title || props.value}\r\n </CustomTypography>\r\n )\r\n }\r\n return StatusCell\r\n}\r\n\r\nconst CustomTypography = styled(Typography)({\r\n borderRadius: '4px',\r\n fontSize: '0.8rem',\r\n padding: '4px 9px',\r\n fontWeight: 600,\r\n minWidth: '70px',\r\n textAlign: 'center',\r\n color: '#ffffff',\r\n display: 'inline-block'\r\n})\r\n\r\n//#region CellImageSmall\r\ninterface CellImageSmallProps {\r\n value: string\r\n imageUri?: string\r\n fallbackSrc?: string\r\n}\r\n\r\nexport const CellImageSmall: FC<CellImageSmallProps> = (props) => {\r\n const [imgSrc, setImgSrc] = useState(props.imageUri ?? props.fallbackSrc)\r\n useEffect(() => {\r\n setImgSrc(props.imageUri ?? props.fallbackSrc)\r\n }, [props.imageUri, props.fallbackSrc])\r\n return (\r\n <Box sx={{ display: 'flex', alignItems: 'center', height: '100%', gap: '10px' }}>\r\n <ImageSmall src={imgSrc} onError={() => setImgSrc(props.fallbackSrc)} />\r\n <Typography variant='body1'>{props.value}</Typography>\r\n </Box>\r\n )\r\n}\r\n\r\ninterface ImageSmallFallbackProps {\r\n imageUri?: string\r\n imageFallback?: string\r\n sx?: SxProps<Theme>\r\n}\r\n\r\nexport const ImageSmallFallback: FC<ImageSmallFallbackProps> = (props) => {\r\n const [imgSrc, setImgSrc] = useState(props.imageUri ?? props.imageFallback)\r\n useEffect(() => {\r\n setImgSrc(props.imageUri ?? props.imageFallback)\r\n }, [props.imageUri, props.imageFallback])\r\n return <ImageSmall src={imgSrc} onError={() => setImgSrc(props.imageFallback)} sx={props.sx} />\r\n}\r\n\r\nconst ImageSmall = styled('img')({\r\n backgroundRepeat: 'no-repeat',\r\n height: '50px',\r\n width: '50px',\r\n backgroundSize: 'contain',\r\n borderRadius: '8px',\r\n boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px'\r\n})\r\n//#endregion\r\n\r\n//#region CellBase\r\n\r\nexport interface CellBaseOptions {\r\n openInNewTab?: boolean\r\n beforeLine?: boolean\r\n copyToClipboard?: boolean\r\n imageUrl?: string\r\n imageFallbackSrc?: string\r\n valueFormatter?: (value?: string) => string\r\n wrapProps?: BoxProps\r\n typographyProps?: TypographyProps\r\n}\r\n\r\ninterface CellBaseProps extends CellBaseOptions {\r\n value?: string\r\n valueFormatted?: string\r\n}\r\n\r\nexport const CellBase: FC<CellBaseProps> = (props) => {\r\n const value = props.valueFormatted ?? props.value\r\n const isCopyToClipboard = !!props.copyToClipboard && !!value\r\n return (\r\n <CellBaseWrap title={value} {...props.wrapProps}>\r\n {props.imageUrl && <ImageSmallFallback imageUri={props.imageUrl} sx={{ mr: '10px' }} imageFallback={props.imageFallbackSrc} />}\r\n <Typography variant='body2' component='span' noWrap sx={{ flex: 1 }} {...props.typographyProps}>\r\n {value}\r\n </Typography>\r\n {value && props.openInNewTab === true && (\r\n <Tooltip arrow title='Open new tab'>\r\n <IconButton component='a' href={value} target='_blank'>\r\n <OpenInNewIcon fontSize='small' sx={{ color: '#1A75E2' }} />\r\n </IconButton>\r\n </Tooltip>\r\n )}\r\n {isCopyToClipboard && <CopyToClipboard value={value} />}\r\n {value && props.beforeLine === true && <Divider flexItem variant='middle' orientation='vertical' />}\r\n </CellBaseWrap>\r\n )\r\n}\r\n\r\nconst CellBaseWrap = styled(({ children, ...props }: BoxProps) => (\r\n <Box {...props}>\r\n <div>{children}</div>\r\n </Box>\r\n))({\r\n flex: 1,\r\n width: '100%',\r\n height: '100%',\r\n position: 'relative',\r\n top: 0,\r\n left: 0,\r\n '& > div': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n width: '100%',\r\n height: '100%',\r\n position: 'absolute',\r\n top: 0,\r\n left: 0\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Chips\r\nexport interface CellChipsProps {\r\n value?: string\r\n separator?: string\r\n maximum?: number\r\n}\r\n\r\nexport const CellChips: FC<CellChipsProps> = (props) => {\r\n if (typeof props.value !== 'string') return props.value ?? <></>\r\n\r\n const list = props.value.split(props?.separator ?? '|').filter((x) => !!x)\r\n const displayList = props?.maximum ? list.slice(0, props.maximum) : list\r\n const remainingCount = props?.maximum && list.length > props.maximum ? list.length - props.maximum : 0\r\n\r\n return (\r\n <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px', height: '100%' }}>\r\n {displayList.map((x, i) => (\r\n <CustomChip key={'key' + i} label={x} size='small' />\r\n ))}\r\n {remainingCount > 0 && (\r\n <HelpTooltipWrap\r\n title='Artists'\r\n content={\r\n <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px' }}>\r\n {list.map((x, i) => (\r\n <CustomChip key={'key' + i} label={x} size='small' />\r\n ))}\r\n </Box>\r\n }\r\n >\r\n <CustomChip key='remaining' label={`+${remainingCount}`} size='small' />\r\n </HelpTooltipWrap>\r\n )}\r\n </Box>\r\n )\r\n}\r\n\r\nconst CustomChip = styled(Chip)({\r\n lineHeight: 1\r\n})\r\n//#endregion\r\n\r\n//#region Date\r\nexport interface CellDatePropsOwner {\r\n formatString?: string\r\n showRelative?: boolean\r\n typographyProps?: TypographyProps\r\n styledGetter?: (value: any) => SxProps<Theme>\r\n}\r\nexport interface CellDateProps extends CellDatePropsOwner {\r\n value: any\r\n}\r\n\r\nexport const CellDate: FC<CellDateProps> = (props) => {\r\n try {\r\n const showRelative = props?.showRelative ?? false\r\n const date = dayjsCustom(props.value)\r\n const formatted = date.format(props.formatString)\r\n const value = showRelative ? `${formatted} (${dayjsCustom().to(date)})` : formatted\r\n const sx = props.styledGetter ? props.styledGetter(props.value) : { flex: 1 }\r\n const mergeTypographyProps = mergeObjects<TypographyProps>({}, props.typographyProps ?? {}, { sx })\r\n return (\r\n <Typography variant='body2' component='span' noWrap {...mergeTypographyProps}>\r\n {value}\r\n </Typography>\r\n )\r\n } catch {\r\n return (\r\n <Typography variant='body2' component='span' noWrap>\r\n format invalid\r\n </Typography>\r\n )\r\n }\r\n}\r\n//#endregion\r\n"],"names":["CreateStatusCell","config","options","props","_props$slots","_slots$typographyProp","data","sx","slots","value","_jsx","CustomTypography","_objectSpread","onClick","typographyProps","Object","assign","children","title","styled","Typography","borderRadius","fontSize","padding","fontWeight","minWidth","textAlign","color","display","CellImageSmall","_props$imageUri","_useState","useState","imageUri","fallbackSrc","_useState2","_slicedToArray","imgSrc","setImgSrc","useEffect","_props$imageUri2","_jsxs","Box","alignItems","height","gap","ImageSmall","src","onError","variant","ImageSmallFallback","_props$imageUri3","_useState3","imageFallback","_useState4","_props$imageUri4","backgroundRepeat","width","backgroundSize","boxShadow","CellBase","_props$valueFormatted","valueFormatted","isCopyToClipboard","copyToClipboard","CellBaseWrap","wrapProps","imageUrl","mr","imageFallbackSrc","component","noWrap","flex","openInNewTab","Tooltip","arrow","IconButton","href","target","OpenInNewIcon","CopyToClipboard","beforeLine","Divider","flexItem","orientation","_ref","_objectWithoutProperties","_excluded","position","top","left","CellChips","_props$value","_props$separator","list","split","separator","filter","x","displayList","maximum","slice","remainingCount","length","flexWrap","map","i","CustomChip","label","size","HelpTooltipWrap","content","concat","Chip","lineHeight","CellDate","_props$showRelative","_props$typographyProp","showRelative","date","dayjsCustom","formatted","format","formatString","to","styledGetter","mergeTypographyProps","mergeObjects","_unused"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ui.units.js","sources":["../../src/table/ui.units.tsx"],"sourcesContent":["import React, { ComponentType, FC, PropsWithChildren, useEffect, useState } from 'react'\r\nimport { Box, BoxProps, Chip, Divider, IconButton, styled, SxProps, Theme, Tooltip, Typography, TypographyProps } from '@mui/material'\r\nimport OpenInNewIcon from '@mui/icons-material/OpenInNew'\r\nimport { dayjsCustom, mergeObjects } from '../utils'\r\nimport { CopyToClipboard, HelpTooltipWrap } from '../components'\r\n\r\n//#region CellImageSmall\r\nexport type IStatusCellConfig<T extends string> = { [key in T]: SxProps<Theme> }\r\n\r\nexport interface IStatusCellOptions {\r\n sx?: SxProps<Theme>\r\n}\r\n\r\nexport interface IStatusCellProps<T extends string> extends PropsWithChildren {\r\n value?: T\r\n title?: string\r\n sx?: SxProps<Theme>\r\n onClick?: TypographyProps['onClick']\r\n slots?: {\r\n typographyProps?: TypographyProps\r\n }\r\n}\r\n\r\nexport const CreateStatusCell = function <T extends string>(\r\n config: IStatusCellConfig<T>,\r\n options?: IStatusCellOptions\r\n): ComponentType<IStatusCellProps<T>> {\r\n const StatusCell: FC<IStatusCellProps<T>> = (props) => {\r\n const getSxProps = (): SxProps<Theme> => {\r\n const { value: data, sx, slots } = props\r\n return Object.assign({}, data ? config[data] : {}, options?.sx, sx, slots?.typographyProps?.sx)\r\n }\r\n\r\n if (!props.value) return <></>\r\n return (\r\n <CustomTypography onClick={props.onClick} {...props.slots?.typographyProps} sx={getSxProps()}>\r\n {props.title || props.value}\r\n </CustomTypography>\r\n )\r\n }\r\n return StatusCell\r\n}\r\n\r\nconst CustomTypography = styled(Typography)({\r\n borderRadius: '4px',\r\n fontSize: '0.8rem',\r\n padding: '4px 9px',\r\n fontWeight: 600,\r\n minWidth: '70px',\r\n textAlign: 'center',\r\n color: '#ffffff',\r\n display: 'inline-block'\r\n})\r\n\r\n//#region CellImageSmall\r\ninterface CellImageSmallProps {\r\n value: string\r\n imageUri?: string\r\n fallbackSrc?: string\r\n}\r\n\r\nexport const CellImageSmall: FC<CellImageSmallProps> = (props) => {\r\n const [imgSrc, setImgSrc] = useState(props.imageUri ?? props.fallbackSrc)\r\n useEffect(() => {\r\n setImgSrc(props.imageUri ?? props.fallbackSrc)\r\n }, [props.imageUri, props.fallbackSrc])\r\n return (\r\n <Box sx={{ display: 'flex', alignItems: 'center', height: '100%', gap: '10px' }}>\r\n <ImageSmall src={imgSrc} onError={() => setImgSrc(props.fallbackSrc)} />\r\n <Typography variant='body1'>{props.value}</Typography>\r\n </Box>\r\n )\r\n}\r\n\r\ninterface ImageSmallFallbackProps {\r\n imageUri?: string\r\n imageFallback?: string\r\n sx?: SxProps<Theme>\r\n}\r\n\r\nexport const ImageSmallFallback: FC<ImageSmallFallbackProps> = (props) => {\r\n const [imgSrc, setImgSrc] = useState(props.imageUri ?? props.imageFallback)\r\n useEffect(() => {\r\n setImgSrc(props.imageUri ?? props.imageFallback)\r\n }, [props.imageUri, props.imageFallback])\r\n return <ImageSmall src={imgSrc} onError={() => setImgSrc(props.imageFallback)} sx={props.sx} />\r\n}\r\n\r\nconst ImageSmall = styled('img')({\r\n backgroundRepeat: 'no-repeat',\r\n height: '50px',\r\n width: '50px',\r\n backgroundSize: 'contain',\r\n borderRadius: '8px',\r\n boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px'\r\n})\r\n//#endregion\r\n\r\n//#region CellBase\r\n\r\nexport interface CellBaseOptions {\r\n openInNewTab?: boolean\r\n beforeLine?: boolean\r\n copyToClipboard?: boolean\r\n imageUrl?: string\r\n imageFallbackSrc?: string\r\n valueFormatter?: (value?: string) => string\r\n wrapProps?: BoxProps\r\n typographyProps?: TypographyProps\r\n}\r\n\r\ninterface CellBaseProps extends CellBaseOptions {\r\n value?: string\r\n valueFormatted?: string\r\n}\r\n\r\nexport const CellBase: FC<CellBaseProps> = (props) => {\r\n const value = props.valueFormatted ?? props.value\r\n const isCopyToClipboard = !!props.copyToClipboard && !!value\r\n return (\r\n <CellBaseWrap title={value} {...props.wrapProps}>\r\n {props.imageUrl && <ImageSmallFallback imageUri={props.imageUrl} sx={{ mr: '10px' }} imageFallback={props.imageFallbackSrc} />}\r\n <Typography variant='body2' component='span' noWrap sx={{ flex: 1 }} {...props.typographyProps}>\r\n {value}\r\n </Typography>\r\n {value && props.openInNewTab === true && (\r\n <Tooltip arrow title='Open new tab'>\r\n <IconButton component='a' href={value} target='_blank'>\r\n <OpenInNewIcon fontSize='small' sx={{ color: '#1A75E2' }} />\r\n </IconButton>\r\n </Tooltip>\r\n )}\r\n {isCopyToClipboard && <CopyToClipboard value={value} />}\r\n {value && props.beforeLine === true && <Divider flexItem variant='middle' orientation='vertical' />}\r\n </CellBaseWrap>\r\n )\r\n}\r\n\r\nconst CellBaseWrap = styled(({ children, ...props }: BoxProps) => (\r\n <Box {...props}>\r\n <div>{children}</div>\r\n </Box>\r\n))({\r\n flex: 1,\r\n width: '100%',\r\n height: '100%',\r\n position: 'relative',\r\n top: 0,\r\n left: 0,\r\n '& > div': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n width: '100%',\r\n height: '100%',\r\n position: 'absolute',\r\n top: 0,\r\n left: 0\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Chips\r\nexport interface CellChipsProps {\r\n value?: string\r\n valueFormatter?: (value: string) => string\r\n separator?: string\r\n maximum?: number\r\n}\r\n\r\nexport const CellChips: FC<CellChipsProps> = (props) => {\r\n if (typeof props.value !== 'string') return props.value ?? <></>\r\n\r\n const list = props.value.split(props?.separator ?? '|').filter((x) => !!x)\r\n const displayList = props?.maximum ? list.slice(0, props.maximum) : list\r\n const remainingCount = props?.maximum && list.length > props.maximum ? list.length - props.maximum : 0\r\n\r\n return (\r\n <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px', height: '100%' }}>\r\n {displayList.map((x, i) => (\r\n <CustomChip key={'key' + i} label={props.valueFormatter ? props.valueFormatter(x) : x} size='small' />\r\n ))}\r\n {remainingCount > 0 && (\r\n <HelpTooltipWrap\r\n title='Artists'\r\n content={\r\n <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px' }}>\r\n {list.map((x, i) => (\r\n <CustomChip key={'key' + i} label={x} size='small' />\r\n ))}\r\n </Box>\r\n }\r\n >\r\n <CustomChip key='remaining' label={`+${remainingCount}`} size='small' />\r\n </HelpTooltipWrap>\r\n )}\r\n </Box>\r\n )\r\n}\r\n\r\nconst CustomChip = styled(Chip)({\r\n lineHeight: 1\r\n})\r\n//#endregion\r\n\r\n//#region Date\r\nexport interface CellDatePropsOwner {\r\n formatString?: string\r\n showRelative?: boolean\r\n typographyProps?: TypographyProps\r\n styledGetter?: (value: any) => SxProps<Theme>\r\n}\r\nexport interface CellDateProps extends CellDatePropsOwner {\r\n value: any\r\n}\r\n\r\nexport const CellDate: FC<CellDateProps> = (props) => {\r\n try {\r\n const showRelative = props?.showRelative ?? false\r\n const date = dayjsCustom(props.value)\r\n const formatted = date.format(props.formatString)\r\n const value = showRelative ? `${formatted} (${dayjsCustom().to(date)})` : formatted\r\n const sx = props.styledGetter ? props.styledGetter(props.value) : { flex: 1 }\r\n const mergeTypographyProps = mergeObjects<TypographyProps>({}, props.typographyProps ?? {}, { sx })\r\n return (\r\n <Typography variant='body2' component='span' noWrap {...mergeTypographyProps}>\r\n {value}\r\n </Typography>\r\n )\r\n } catch {\r\n return (\r\n <Typography variant='body2' component='span' noWrap>\r\n format invalid\r\n </Typography>\r\n )\r\n }\r\n}\r\n//#endregion\r\n"],"names":["CreateStatusCell","config","options","props","_props$slots","_slots$typographyProp","data","sx","slots","value","_jsx","CustomTypography","_objectSpread","onClick","typographyProps","Object","assign","children","title","styled","Typography","borderRadius","fontSize","padding","fontWeight","minWidth","textAlign","color","display","CellImageSmall","_props$imageUri","_useState","useState","imageUri","fallbackSrc","_useState2","_slicedToArray","imgSrc","setImgSrc","useEffect","_props$imageUri2","_jsxs","Box","alignItems","height","gap","ImageSmall","src","onError","variant","ImageSmallFallback","_props$imageUri3","_useState3","imageFallback","_useState4","_props$imageUri4","backgroundRepeat","width","backgroundSize","boxShadow","CellBase","_props$valueFormatted","valueFormatted","isCopyToClipboard","copyToClipboard","CellBaseWrap","wrapProps","imageUrl","mr","imageFallbackSrc","component","noWrap","flex","openInNewTab","Tooltip","arrow","IconButton","href","target","OpenInNewIcon","CopyToClipboard","beforeLine","Divider","flexItem","orientation","_ref","_objectWithoutProperties","_excluded","position","top","left","CellChips","_props$value","_props$separator","list","split","separator","filter","x","displayList","maximum","slice","remainingCount","length","flexWrap","map","i","CustomChip","label","valueFormatter","size","HelpTooltipWrap","content","concat","Chip","lineHeight","CellDate","_props$showRelative","_props$typographyProp","showRelative","date","dayjsCustom","formatted","format","formatString","to","styledGetter","mergeTypographyProps","mergeObjects","_unused"],"mappings":"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"}
|