dinocollab-core 1.0.18 → 1.0.20
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/create.table.js +1 -1
- package/dist/table/create.table.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/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,2 +1,2 @@
|
|
|
1
|
-
import{inherits as e,createClass as r,classCallCheck as t,callSuper as o,defineProperty as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,jsxs as l}from"react/jsx-runtime";import{Fragment as a}from"react";import{styled as s,Box as u,RadioGroup as d,MenuList as c,MenuItem as m,Typography as f,Divider as p,Button as v,TextField as h,FormControlLabel as g,Radio as b}from"@mui/material";import S,{filterPanelClasses as x}from"./base.js";import"../form/validator.js";import"../form/dino-form.js";import{convertFormDataToJson as y}from"../form/
|
|
1
|
+
import{inherits as e,createClass as r,classCallCheck as t,callSuper as o,defineProperty as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,jsxs as l}from"react/jsx-runtime";import{Fragment as a}from"react";import{styled as s,Box as u,RadioGroup as d,MenuList as c,MenuItem as m,Typography as f,Divider as p,Button as v,TextField as h,FormControlLabel as g,Radio as b}from"@mui/material";import S,{filterPanelClasses as x}from"./base.js";import"../form/validator.js";import"../form/dino-form.js";import{convertFormDataToJson as y}from"../form/helpers.js";function C(s){return function(){function d(e){var r;return t(this,d),r=o(this,d,[e]),i(r,"renderFrom",(function(e){var t,o=s.fields[e],i=null!==(t=null==o?void 0:o.label)&&void 0!==t?t:e.toString();return n("form",{onSubmit:function(t){return r.handleSubmit(e,t)},children:l(j,{children:[n(u,{className:"top-bar",children:n(f,{variant:"subtitle2",children:i})}),n(u,{className:"content",children:r.renderWithMode(e)}),"select"===(null==o?void 0:o.type)&&n(p,{variant:"middle"}),l(u,{className:"actions",children:[n(v,{size:"small",color:"inherit",onClick:r.props.onCancel,children:"Cancel"}),n(v,{size:"small",color:"primary",type:"submit",sx:{fontWeight:700},children:"Apply"})]})]})})})),i(r,"renderWithMode",(function(e){var t=s.fields[e],o=r.state.messageError;return"select"===(null==t?void 0:t.type)?n(k,{name:e.toString(),className:o?"error":"",onChange:function(){return r.setState({messageError:void 0})},children:t.options.map((function(e,r){var t;return n(g,{value:e.value,control:n(b,{}),label:null!==(t=e.label)&&void 0!==t?t:e.value},e.value.toString()+r)}))}):n(h,{autoFocus:!0,name:e.toString(),size:"small",error:!!o,helperText:o})})),i(r,"handleSubmit",(function(e,t){var o;t.preventDefault(),t.stopPropagation();var i=new FormData(t.currentTarget),n=null===(o=y(i)[e])||void 0===o?void 0:o.toString(),l=s.fields[e],a=r.validated(null!=n?n:"",e,l);if(a.error)r.setState({messageError:a.message});else{var u,d=void 0;if("select"===(null==l?void 0:l.type))d=null===(u=l.options.find((function(e){return e.value===n})))||void 0===u?void 0:u.label;r.props.onSubmit&&r.props.onSubmit(e,d?{value:n,label:d}:{value:n})}})),r.state={fieldSelected:null},r}return e(d,S),r(d,[{key:"render",value:function(){var e=this,r=this.state.fieldSelected;if(r)return this.renderFrom(r);var t=Object.keys(s.fields).filter((function(e){return!!e}));return n(c,{className:x.list,sx:{minWidth:"200px"},children:t.map((function(r,t){var o,i=s.fields[r];return i?n(m,{className:x.item,onClick:function(){return e.setState({fieldSelected:r,messageError:void 0})},children:null!==(o=null==i?void 0:i.label)&&void 0!==o?o:r.toString()},r.toString()+t):n(a,{},r.toString()+t)}))})}}])}()}var j=s(u)({minWidth:"200px",borderRadius:"4px",overflow:"hidden",".top-bar":{background:"#000",padding:"8px",".MuiTypography-root":{color:"#fff"}},".content":{padding:"8px"},".actions":{display:"flex",alignItems:"center",justifyContent:"flex-end",padding:"8px"}}),k=s(d)({marginLeft:"-8px",marginRight:"-8px","&.error .MuiRadio-root":{color:"#d32f2f"},".MuiFormControlLabel-root":{margin:0},".MuiFormControlLabel-root:hover":{backgroundColor:"rgba(25, 118, 210, 0.04)"}});export{C as default};
|
|
2
2
|
//# sourceMappingURL=create.filter-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.filter-menu.js","sources":["../../src/filter-bar/create.filter-menu.tsx"],"sourcesContent":["import React, { Fragment } from 'react'\r\nimport { Box, Button, ButtonProps, Divider } from '@mui/material'\r\nimport { FormControlLabel, MenuItem, MenuList, Radio, RadioGroup, styled, TextField, Typography } from '@mui/material'\r\nimport FilterBarBase, { filterPanelClasses } from './base'\r\nimport { IFilterModel, IFilterPanelParams, IFilterPannelSubmitFunc } from './types'\r\nimport { convertFormDataToJson } from '../form'\r\n\r\ninterface IProps<T> {\r\n onSubmit?: IFilterPannelSubmitFunc<T>\r\n onCancel?: ButtonProps['onClick']\r\n}\r\n\r\ninterface IState<T> {\r\n fieldSelected: keyof IFilterModel<T> | null\r\n messageError?: string\r\n}\r\n\r\nfunction CreateFilterMenu<T>(params: IFilterPanelParams<T>) {\r\n class FilterMenu extends FilterBarBase<IProps<T>, IState<T>, T> {\r\n constructor(props: IProps<T>) {\r\n super(props)\r\n this.state = { fieldSelected: null }\r\n }\r\n\r\n render() {\r\n const { fieldSelected } = this.state\r\n if (!!fieldSelected) return this.renderFrom(fieldSelected)\r\n const keys = Object.keys(params.fields).filter((x) => !!x) as (keyof IFilterModel<T>)[]\r\n return (\r\n <MenuList className={filterPanelClasses.list} sx={{ minWidth: '200px' }}>\r\n {keys.map((x, i) => {\r\n const item = params.fields[x]\r\n if (!item) return <Fragment key={x.toString() + i} />\r\n return (\r\n <MenuItem\r\n key={x.toString() + i}\r\n className={filterPanelClasses.item}\r\n onClick={() => this.setState({ fieldSelected: x, messageError: undefined })}\r\n >\r\n {item?.label ?? x.toString()}\r\n </MenuItem>\r\n )\r\n })}\r\n </MenuList>\r\n )\r\n }\r\n\r\n renderFrom = (fieldSelected: keyof IFilterModel<T>) => {\r\n const fieldConfig = params.fields[fieldSelected]\r\n const label = fieldConfig?.label ?? fieldSelected.toString()\r\n return (\r\n <form onSubmit={(e) => this.handleSubmit(fieldSelected, e)}>\r\n <WrapPanelFilterMode>\r\n <Box className='top-bar'>\r\n <Typography variant='subtitle2'>{label}</Typography>\r\n </Box>\r\n <Box className='content'>{this.renderWithMode(fieldSelected)}</Box>\r\n {fieldConfig?.type === 'select' && <Divider variant='middle' />}\r\n <Box className='actions'>\r\n <Button size='small' color='inherit' onClick={this.props.onCancel}>\r\n Cancel\r\n </Button>\r\n <Button size='small' color='primary' type='submit' sx={{ fontWeight: 700 }}>\r\n Apply\r\n </Button>\r\n </Box>\r\n </WrapPanelFilterMode>\r\n </form>\r\n )\r\n }\r\n\r\n renderWithMode = (fieldSelected: keyof IFilterModel<T>) => {\r\n const fieldConfig = params.fields[fieldSelected]\r\n const { messageError } = this.state\r\n switch (fieldConfig?.type) {\r\n case 'select':\r\n return (\r\n <CustomRadioGroup\r\n name={fieldSelected.toString()}\r\n className={messageError ? 'error' : ''}\r\n onChange={() => this.setState({ messageError: undefined })}\r\n >\r\n {fieldConfig.options.map((x, i) => (\r\n <FormControlLabel key={x.value.toString() + i} value={x.value} control={<Radio />} label={x.label ?? x.value} />\r\n ))}\r\n </CustomRadioGroup>\r\n )\r\n case 'string':\r\n default:\r\n return <TextField autoFocus name={fieldSelected.toString()} size='small' error={!!messageError} helperText={messageError} />\r\n }\r\n }\r\n\r\n handleSubmit = (fieldSelected: keyof IFilterModel<T>, event: React.FormEvent<HTMLFormElement>) => {\r\n event.preventDefault()\r\n event.stopPropagation()\r\n const formData = new FormData(event.currentTarget as HTMLFormElement)\r\n const obj = convertFormDataToJson<T>(formData)\r\n const value = obj[fieldSelected as keyof T]?.toString()\r\n\r\n const fieldConfig = params.fields[fieldSelected]\r\n const validate = this.validated(value ?? '', fieldSelected, fieldConfig)\r\n if (validate.error) {\r\n this.setState({ messageError: validate.message })\r\n return\r\n }\r\n\r\n let label: string | undefined = undefined\r\n if (fieldConfig?.type === 'select') {\r\n label = fieldConfig.options.find((x) => x.value === value)?.label\r\n }\r\n\r\n this.props.onSubmit && this.props.onSubmit(fieldSelected, label ? { value, label } : { value })\r\n }\r\n }\r\n\r\n return FilterMenu\r\n}\r\n\r\nexport default CreateFilterMenu\r\n\r\nconst WrapPanelFilterMode = styled(Box)({\r\n minWidth: '200px',\r\n borderRadius: '4px',\r\n overflow: 'hidden',\r\n '.top-bar': {\r\n background: '#000',\r\n padding: '8px',\r\n '.MuiTypography-root': {\r\n color: '#fff'\r\n }\r\n },\r\n '.content': {\r\n padding: '8px'\r\n },\r\n '.actions': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'flex-end',\r\n padding: '8px'\r\n }\r\n})\r\n\r\nconst CustomRadioGroup = styled(RadioGroup)({\r\n marginLeft: '-8px',\r\n marginRight: '-8px',\r\n '&.error .MuiRadio-root': {\r\n color: '#d32f2f'\r\n },\r\n '.MuiFormControlLabel-root': {\r\n margin: 0\r\n },\r\n '.MuiFormControlLabel-root:hover': {\r\n backgroundColor: 'rgba(25, 118, 210, 0.04)'\r\n }\r\n})\r\n"],"names":["CreateFilterMenu","params","FilterMenu","props","_this","_classCallCheck","_callSuper","_defineProperty","fieldSelected","_fieldConfig$label","fieldConfig","fields","label","toString","_jsx","onSubmit","e","handleSubmit","children","_jsxs","WrapPanelFilterMode","Box","className","Typography","variant","renderWithMode","type","Divider","Button","size","color","onClick","onCancel","sx","fontWeight","messageError","state","CustomRadioGroup","name","onChange","setState","undefined","options","map","x","i","_x$label","FormControlLabel","value","control","Radio","TextField","autoFocus","error","helperText","event","_obj$fieldSelected","preventDefault","stopPropagation","formData","FormData","currentTarget","convertFormDataToJson","validate","validated","message","_fieldConfig$options$","find","_inherits","FilterBarBase","_createClass","key","_this2","this","renderFrom","keys","Object","filter","MenuList","filterPanelClasses","list","minWidth","_item$label","item","MenuItem","Fragment","styled","borderRadius","overflow","background","padding","display","alignItems","justifyContent","RadioGroup","marginLeft","marginRight","margin","backgroundColor"],"mappings":"
|
|
1
|
+
{"version":3,"file":"create.filter-menu.js","sources":["../../src/filter-bar/create.filter-menu.tsx"],"sourcesContent":["import React, { Fragment } from 'react'\r\nimport { Box, Button, ButtonProps, Divider } from '@mui/material'\r\nimport { FormControlLabel, MenuItem, MenuList, Radio, RadioGroup, styled, TextField, Typography } from '@mui/material'\r\nimport FilterBarBase, { filterPanelClasses } from './base'\r\nimport { IFilterModel, IFilterPanelParams, IFilterPannelSubmitFunc } from './types'\r\nimport { convertFormDataToJson } from '../form'\r\n\r\ninterface IProps<T> {\r\n onSubmit?: IFilterPannelSubmitFunc<T>\r\n onCancel?: ButtonProps['onClick']\r\n}\r\n\r\ninterface IState<T> {\r\n fieldSelected: keyof IFilterModel<T> | null\r\n messageError?: string\r\n}\r\n\r\nfunction CreateFilterMenu<T>(params: IFilterPanelParams<T>) {\r\n class FilterMenu extends FilterBarBase<IProps<T>, IState<T>, T> {\r\n constructor(props: IProps<T>) {\r\n super(props)\r\n this.state = { fieldSelected: null }\r\n }\r\n\r\n render() {\r\n const { fieldSelected } = this.state\r\n if (!!fieldSelected) return this.renderFrom(fieldSelected)\r\n const keys = Object.keys(params.fields).filter((x) => !!x) as (keyof IFilterModel<T>)[]\r\n return (\r\n <MenuList className={filterPanelClasses.list} sx={{ minWidth: '200px' }}>\r\n {keys.map((x, i) => {\r\n const item = params.fields[x]\r\n if (!item) return <Fragment key={x.toString() + i} />\r\n return (\r\n <MenuItem\r\n key={x.toString() + i}\r\n className={filterPanelClasses.item}\r\n onClick={() => this.setState({ fieldSelected: x, messageError: undefined })}\r\n >\r\n {item?.label ?? x.toString()}\r\n </MenuItem>\r\n )\r\n })}\r\n </MenuList>\r\n )\r\n }\r\n\r\n renderFrom = (fieldSelected: keyof IFilterModel<T>) => {\r\n const fieldConfig = params.fields[fieldSelected]\r\n const label = fieldConfig?.label ?? fieldSelected.toString()\r\n return (\r\n <form onSubmit={(e) => this.handleSubmit(fieldSelected, e)}>\r\n <WrapPanelFilterMode>\r\n <Box className='top-bar'>\r\n <Typography variant='subtitle2'>{label}</Typography>\r\n </Box>\r\n <Box className='content'>{this.renderWithMode(fieldSelected)}</Box>\r\n {fieldConfig?.type === 'select' && <Divider variant='middle' />}\r\n <Box className='actions'>\r\n <Button size='small' color='inherit' onClick={this.props.onCancel}>\r\n Cancel\r\n </Button>\r\n <Button size='small' color='primary' type='submit' sx={{ fontWeight: 700 }}>\r\n Apply\r\n </Button>\r\n </Box>\r\n </WrapPanelFilterMode>\r\n </form>\r\n )\r\n }\r\n\r\n renderWithMode = (fieldSelected: keyof IFilterModel<T>) => {\r\n const fieldConfig = params.fields[fieldSelected]\r\n const { messageError } = this.state\r\n switch (fieldConfig?.type) {\r\n case 'select':\r\n return (\r\n <CustomRadioGroup\r\n name={fieldSelected.toString()}\r\n className={messageError ? 'error' : ''}\r\n onChange={() => this.setState({ messageError: undefined })}\r\n >\r\n {fieldConfig.options.map((x, i) => (\r\n <FormControlLabel key={x.value.toString() + i} value={x.value} control={<Radio />} label={x.label ?? x.value} />\r\n ))}\r\n </CustomRadioGroup>\r\n )\r\n case 'string':\r\n default:\r\n return <TextField autoFocus name={fieldSelected.toString()} size='small' error={!!messageError} helperText={messageError} />\r\n }\r\n }\r\n\r\n handleSubmit = (fieldSelected: keyof IFilterModel<T>, event: React.FormEvent<HTMLFormElement>) => {\r\n event.preventDefault()\r\n event.stopPropagation()\r\n const formData = new FormData(event.currentTarget as HTMLFormElement)\r\n const obj = convertFormDataToJson<T>(formData)\r\n const value = obj[fieldSelected as keyof T]?.toString()\r\n\r\n const fieldConfig = params.fields[fieldSelected]\r\n const validate = this.validated(value ?? '', fieldSelected, fieldConfig)\r\n if (validate.error) {\r\n this.setState({ messageError: validate.message })\r\n return\r\n }\r\n\r\n let label: string | undefined = undefined\r\n if (fieldConfig?.type === 'select') {\r\n label = fieldConfig.options.find((x) => x.value === value)?.label\r\n }\r\n\r\n this.props.onSubmit && this.props.onSubmit(fieldSelected, label ? { value, label } : { value })\r\n }\r\n }\r\n\r\n return FilterMenu\r\n}\r\n\r\nexport default CreateFilterMenu\r\n\r\nconst WrapPanelFilterMode = styled(Box)({\r\n minWidth: '200px',\r\n borderRadius: '4px',\r\n overflow: 'hidden',\r\n '.top-bar': {\r\n background: '#000',\r\n padding: '8px',\r\n '.MuiTypography-root': {\r\n color: '#fff'\r\n }\r\n },\r\n '.content': {\r\n padding: '8px'\r\n },\r\n '.actions': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'flex-end',\r\n padding: '8px'\r\n }\r\n})\r\n\r\nconst CustomRadioGroup = styled(RadioGroup)({\r\n marginLeft: '-8px',\r\n marginRight: '-8px',\r\n '&.error .MuiRadio-root': {\r\n color: '#d32f2f'\r\n },\r\n '.MuiFormControlLabel-root': {\r\n margin: 0\r\n },\r\n '.MuiFormControlLabel-root:hover': {\r\n backgroundColor: 'rgba(25, 118, 210, 0.04)'\r\n }\r\n})\r\n"],"names":["CreateFilterMenu","params","FilterMenu","props","_this","_classCallCheck","_callSuper","_defineProperty","fieldSelected","_fieldConfig$label","fieldConfig","fields","label","toString","_jsx","onSubmit","e","handleSubmit","children","_jsxs","WrapPanelFilterMode","Box","className","Typography","variant","renderWithMode","type","Divider","Button","size","color","onClick","onCancel","sx","fontWeight","messageError","state","CustomRadioGroup","name","onChange","setState","undefined","options","map","x","i","_x$label","FormControlLabel","value","control","Radio","TextField","autoFocus","error","helperText","event","_obj$fieldSelected","preventDefault","stopPropagation","formData","FormData","currentTarget","convertFormDataToJson","validate","validated","message","_fieldConfig$options$","find","_inherits","FilterBarBase","_createClass","key","_this2","this","renderFrom","keys","Object","filter","MenuList","filterPanelClasses","list","minWidth","_item$label","item","MenuItem","Fragment","styled","borderRadius","overflow","background","padding","display","alignItems","justifyContent","RadioGroup","marginLeft","marginRight","margin","backgroundColor"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as t,createClass as e,classCallCheck as n,toConsumableArray as o,inherits as r,objectSpread2 as i,callSuper as l}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as a,Fragment as s,jsx as u}from"react/jsx-runtime";import{createElement as p,Component as d}from"react";import{styled as c,Autocomplete as v,TextField as f,Chip as m,Typography as h,Tooltip as g,IconButton as y}from"@mui/material";import S from"@mui/icons-material/Remove";import{getErrorMessage as I}from"./
|
|
1
|
+
import{defineProperty as t,createClass as e,classCallCheck as n,toConsumableArray as o,inherits as r,objectSpread2 as i,callSuper as l}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as a,Fragment as s,jsx as u}from"react/jsx-runtime";import{createElement as p,Component as d}from"react";import{styled as c,Autocomplete as v,TextField as f,Chip as m,Typography as h,Tooltip as g,IconButton as y}from"@mui/material";import S from"@mui/icons-material/Remove";import{getErrorMessage as I}from"./helpers.js";var R;function C(o){var c=(null==o?void 0:o.separator)||"|",R=(null==o?void 0:o.limitTags)||2,C=null!=o&&o.saveLocalStorageByKey?B.initial(o.saveLocalStorageByKey):void 0,K=function(){function B(e){var r;return n(this,B),r=l(this,B,[e]),t(r,"refInput",null),t(r,"handleRemoveItem",(function(t,e){var n;t.preventDefault(),t.stopPropagation(),console.log(e);var o=null!==(n=null==C?void 0:C.delete(e))&&void 0!==n?n:[];r.setState({options:o})})),t(r,"handleAddOption",(function(t,e){if(null!=o&&o.saveLocalStorageByKey){var n,i=null!==(n=null==C?void 0:C.setItems(r.state.options,e))&&void 0!==n?n:r.state.options;r.setState({value:e,options:i})}else r.setState({value:e});r.refInput&&(r.refInput.value=e.join(c)),r.props.name&&r.props.onBlur&&r.props.onBlur(r.props.name)})),t(r,"isBtnRemoveOption",(function(t){var e,n,i,l=r.state.value.findIndex((function(e){return e===t}))<0;return(null!==(e=null!==(n=null==o?void 0:o.optionItems)&&void 0!==n?n:null===(i=r.props.slots)||void 0===i?void 0:i.optionItems)&&void 0!==e?e:[]).findIndex((function(e){return e===t}))<0&&l})),t(r,"getSelectOptions",(function(){var t,e,n=null!==(t=null==o?void 0:o.optionItems)&&void 0!==t?t:[];null!=o&&o.saveLocalStorageByKey&&(n=null!==(e=null==C?void 0:C.getItemsAndMerge(n))&&void 0!==e?e:[]);return n})),t(r,"getTextFieldProps",(function(){var t=r.props,e=t.name,n=t.label,o=t.placeholder,i=t.onBlur,l=t.messageErrors,a=I(l,e);return{label:n,placeholder:o||"Add new",onBlur:function(){e&&i&&i(e)},error:a.error,helperText:a.message}})),t(r,"getDefaultValue",(function(){var t,e,n=r.props,o=n.name,i=n.data,l=o?null==i||null===(t=i[o])||void 0===t?void 0:t.toString():"";return null!==(e=null==l?void 0:l.split(c).filter((function(t){return!!t})))&&void 0!==e?e:[]})),r.state={value:r.getDefaultValue(),options:r.getSelectOptions()},r}return r(B,d),e(B,[{key:"render",value:function(){var t=this,e=this.props.name;return a(s,{children:[u(v,{multiple:!0,freeSolo:!0,limitTags:R,value:this.state.value,onChange:this.handleAddOption,options:this.state.options,renderOption:function(e,n){return p(x,i(i({},e),{},{key:n}),u(h,{variant:"subtitle1",sx:{flex:1},children:n}),t.isBtnRemoveOption(n)&&u(g,{title:"Remove option",arrow:!0,placement:"left",children:u(y,{size:"small",onClick:function(e){return t.handleRemoveItem(e,n)},children:u(S,{fontSize:"small"})})}))},renderTags:function(t,e){return t.map((function(t,n){return p(m,i(i({label:t},e({index:n})),{},{key:t.toString()}))}))},renderInput:function(e){return u(f,i(i({},e),{},{variant:"outlined"},t.getTextFieldProps()))}}),u("input",{ref:function(e){t.refInput=e},hidden:!0,type:"text",name:null==e?void 0:e.toString(),defaultValue:this.state.value.join(c)})]})}}])}();return K}var x=c("li")({display:"flex",alignItems:"center"}),B=e((function e(r,i){var l=this;n(this,e),t(this,"storeKeyRoot","autocomplete_chip_store"),t(this,"getRoot",(function(){try{var t=window.localStorage.getItem(l.storeKeyRoot);return JSON.parse(null!=t?t:"{}")}catch(t){return{}}})),t(this,"getChild",(function(){return l.getRoot()[l.storeKey]})),t(this,"setRoot",(function(t){window.localStorage.setItem(l.storeKeyRoot,JSON.stringify(t))})),t(this,"setChild",(function(t){var e=l.getRoot();e[l.storeKey]=t,l.setRoot(e)})),t(this,"getItemsAndMerge",(function(t){try{return Array.from(new Set([].concat(o(l.getChild()),o(t)))).sort()}catch(e){return t}})),t(this,"setItems",(function(t,e){var n=Array.from(new Set([].concat(o(t),o(e)))).sort();return l.setChild(n),n})),t(this,"delete",(function(t){var e=l.getChild().filter((function(e){return e!==t}));return l.setChild(e),e})),this.storeKey=r,i&&this.setChild(i)}));R=B,t(B,"initial",(function(t,e){return new R(t,e)}));export{C as default};
|
|
2
2
|
//# sourceMappingURL=create.autocomplete.chips.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.autocomplete.chips.js","sources":["../../src/form/create.autocomplete.chips.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Autocomplete, Chip, IconButton, styled, TextField, TextFieldProps, Tooltip, Typography } from '@mui/material'\r\nimport RemoveIcon from '@mui/icons-material/Remove'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helper'\r\n\r\nexport interface IAutocompleteChipParams {\r\n optionItems?: string[]\r\n limitTags?: number\r\n separator?: string\r\n saveLocalStorageByKey?: string\r\n}\r\n\r\nexport interface IAutocompleteChipProps<T> extends IFormInputBase<T, IAutocompleteChipParams> {}\r\n\r\nexport interface IAutocompleteChipState {\r\n value: string[]\r\n options: string[]\r\n}\r\n\r\nfunction CreateAutocompleteChip<T>(params?: IAutocompleteChipParams): ComponentType<IAutocompleteChipProps<T>> {\r\n const separator = params?.separator || '|'\r\n const limitTags = params?.limitTags || 2\r\n const storeItems = params?.saveLocalStorageByKey ? AutocompleteChipStore.initial(params.saveLocalStorageByKey) : undefined\r\n\r\n class AutocompleteChip extends Component<IAutocompleteChipProps<T>, IAutocompleteChipState> {\r\n constructor(props: IAutocompleteChipProps<T>) {\r\n super(props)\r\n this.state = {\r\n value: this.getDefaultValue(),\r\n options: this.getSelectOptions()\r\n }\r\n }\r\n\r\n refInput: HTMLInputElement | null = null\r\n render() {\r\n const { name } = this.props\r\n return (\r\n <>\r\n <Autocomplete\r\n multiple\r\n freeSolo\r\n limitTags={limitTags}\r\n value={this.state.value}\r\n onChange={this.handleAddOption}\r\n options={this.state.options}\r\n renderOption={(props, option) => (\r\n <ItemOption {...props} key={option}>\r\n <Typography variant='subtitle1' sx={{ flex: 1 }}>\r\n {option}\r\n </Typography>\r\n {this.isBtnRemoveOption(option) && (\r\n <Tooltip title='Remove option' arrow placement='left'>\r\n <IconButton size='small' onClick={(e) => this.handleRemoveItem(e, option)}>\r\n <RemoveIcon fontSize='small' />\r\n </IconButton>\r\n </Tooltip>\r\n )}\r\n </ItemOption>\r\n )}\r\n renderTags={(tagValue, getTagProps) => {\r\n return tagValue.map((option, index) => <Chip label={option} {...getTagProps({ index })} key={option.toString()} />)\r\n }}\r\n renderInput={(params) => <TextField {...params} variant='outlined' {...this.getTextFieldProps()} />}\r\n />\r\n <input\r\n ref={(ref) => {\r\n this.refInput = ref\r\n }}\r\n hidden\r\n type='text'\r\n name={name?.toString()}\r\n defaultValue={this.state.value.join(separator)}\r\n />\r\n </>\r\n )\r\n }\r\n\r\n handleRemoveItem = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => {\r\n e.preventDefault()\r\n e.stopPropagation()\r\n console.log(value)\r\n const list = storeItems?.delete(value) ?? []\r\n this.setState({ options: list })\r\n }\r\n\r\n handleAddOption = (_: React.SyntheticEvent, newValue: string[]) => {\r\n if (params?.saveLocalStorageByKey) {\r\n const options = storeItems?.setItems(this.state.options, newValue) ?? this.state.options\r\n this.setState({ value: newValue, options })\r\n } else {\r\n this.setState({ value: newValue })\r\n }\r\n if (this.refInput) {\r\n this.refInput.value = newValue.join(separator)\r\n }\r\n this.props.name && this.props.onBlur && this.props.onBlur(this.props.name)\r\n }\r\n\r\n isBtnRemoveOption = (value: string) => {\r\n const isSelectedOption = this.state.value.findIndex((x) => x === value) < 0\r\n const selectOptions = params?.optionItems ?? this.props.slots?.optionItems ?? []\r\n const isDefault = selectOptions.findIndex((x) => x === value) < 0\r\n return isDefault && isSelectedOption\r\n }\r\n\r\n getSelectOptions = () => {\r\n let items = params?.optionItems ?? []\r\n if (params?.saveLocalStorageByKey) {\r\n items = storeItems?.getItemsAndMerge(items) ?? []\r\n }\r\n return items\r\n }\r\n\r\n getTextFieldProps = (): TextFieldProps => {\r\n const { name, label, placeholder, onBlur, messageErrors } = this.props\r\n const eMessage = getErrorMessage(messageErrors, name)\r\n return {\r\n label,\r\n placeholder: placeholder || 'Add new',\r\n onBlur: () => {\r\n if (!name) return\r\n onBlur && onBlur(name)\r\n },\r\n error: eMessage.error,\r\n helperText: eMessage.message\r\n }\r\n }\r\n\r\n getDefaultValue = (): string[] => {\r\n const { name, data } = this.props\r\n const value = name ? data?.[name]?.toString() : ''\r\n return value?.split(separator).filter((x) => !!x) ?? []\r\n }\r\n }\r\n\r\n return AutocompleteChip\r\n}\r\n\r\nexport default CreateAutocompleteChip\r\n\r\nconst ItemOption = styled('li')({\r\n display: 'flex',\r\n alignItems: 'center'\r\n})\r\n\r\ntype TChipStoreRoot = { [key: string]: string[] }\r\n\r\nclass AutocompleteChipStore {\r\n private storeKeyRoot = 'autocomplete_chip_store'\r\n private storeKey: string\r\n constructor(key: string, defaultValue?: string[]) {\r\n this.storeKey = key\r\n if (defaultValue) {\r\n this.setChild(defaultValue)\r\n }\r\n }\r\n\r\n static initial = (key: string, defaultValue?: string[]) => new AutocompleteChipStore(key, defaultValue)\r\n\r\n private getRoot = (): TChipStoreRoot => {\r\n try {\r\n const res = window.localStorage.getItem(this.storeKeyRoot)\r\n return JSON.parse(res ?? '{}')\r\n } catch (error) {\r\n return {}\r\n }\r\n }\r\n\r\n private getChild = (): string[] => {\r\n return this.getRoot()[this.storeKey]\r\n }\r\n\r\n private setRoot = (value: TChipStoreRoot) => {\r\n window.localStorage.setItem(this.storeKeyRoot, JSON.stringify(value))\r\n }\r\n\r\n private setChild = (value: string[]) => {\r\n const obj = this.getRoot()\r\n obj[this.storeKey] = value\r\n this.setRoot(obj)\r\n }\r\n\r\n getItemsAndMerge = (value: string[]): string[] => {\r\n try {\r\n return Array.from(new Set([...this.getChild(), ...value])).sort()\r\n } catch (error) {\r\n return value\r\n }\r\n }\r\n\r\n setItems = (options: string[], value: string[]): string[] => {\r\n const list = Array.from(new Set([...options, ...value])).sort()\r\n this.setChild(list)\r\n return list\r\n }\r\n\r\n delete = (value: string) => {\r\n const list = this.getChild().filter((x) => x !== value)\r\n this.setChild(list)\r\n return list\r\n }\r\n}\r\n"],"names":["CreateAutocompleteChip","params","separator","limitTags","storeItems","saveLocalStorageByKey","AutocompleteChipStore","initial","undefined","AutocompleteChip","props","_this","_classCallCheck","_callSuper","_defineProperty","e","value","_storeItems$delete","preventDefault","stopPropagation","console","log","list","setState","options","_","newValue","_storeItems$setItems","setItems","state","refInput","join","name","onBlur","_ref","_params$optionItems","_this$props$slots","isSelectedOption","findIndex","x","optionItems","slots","_params$optionItems2","_storeItems$getItemsA","items","getItemsAndMerge","_this$props","label","placeholder","messageErrors","eMessage","getErrorMessage","error","helperText","message","_data$name","_value$split$filter","_this$props2","data","toString","split","filter","getDefaultValue","getSelectOptions","_inherits","Component","_createClass","key","_this2","this","_jsxs","_Fragment","children","_jsx","Autocomplete","multiple","freeSolo","onChange","handleAddOption","renderOption","option","_createElement","ItemOption","_objectSpread","Typography","variant","sx","flex","isBtnRemoveOption","Tooltip","title","arrow","placement","IconButton","size","onClick","handleRemoveItem","RemoveIcon","fontSize","renderTags","tagValue","getTagProps","map","index","Chip","renderInput","TextField","getTextFieldProps","ref","hidden","type","defaultValue","styled","display","alignItems","_this3","res","window","localStorage","getItem","storeKeyRoot","JSON","parse","getRoot","storeKey","setItem","stringify","obj","setRoot","Array","from","Set","concat","_toConsumableArray","getChild","sort","setChild","_AutocompleteChipStore"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.autocomplete.chips.js","sources":["../../src/form/create.autocomplete.chips.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Autocomplete, Chip, IconButton, styled, TextField, TextFieldProps, Tooltip, Typography } from '@mui/material'\r\nimport RemoveIcon from '@mui/icons-material/Remove'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\n\r\nexport interface IAutocompleteChipParams {\r\n optionItems?: string[]\r\n limitTags?: number\r\n separator?: string\r\n saveLocalStorageByKey?: string\r\n}\r\n\r\nexport interface IAutocompleteChipProps<T> extends IFormInputBase<T, IAutocompleteChipParams> {}\r\n\r\nexport interface IAutocompleteChipState {\r\n value: string[]\r\n options: string[]\r\n}\r\n\r\nfunction CreateAutocompleteChip<T>(params?: IAutocompleteChipParams): ComponentType<IAutocompleteChipProps<T>> {\r\n const separator = params?.separator || '|'\r\n const limitTags = params?.limitTags || 2\r\n const storeItems = params?.saveLocalStorageByKey ? AutocompleteChipStore.initial(params.saveLocalStorageByKey) : undefined\r\n\r\n class AutocompleteChip extends Component<IAutocompleteChipProps<T>, IAutocompleteChipState> {\r\n constructor(props: IAutocompleteChipProps<T>) {\r\n super(props)\r\n this.state = {\r\n value: this.getDefaultValue(),\r\n options: this.getSelectOptions()\r\n }\r\n }\r\n\r\n refInput: HTMLInputElement | null = null\r\n render() {\r\n const { name } = this.props\r\n return (\r\n <>\r\n <Autocomplete\r\n multiple\r\n freeSolo\r\n limitTags={limitTags}\r\n value={this.state.value}\r\n onChange={this.handleAddOption}\r\n options={this.state.options}\r\n renderOption={(props, option) => (\r\n <ItemOption {...props} key={option}>\r\n <Typography variant='subtitle1' sx={{ flex: 1 }}>\r\n {option}\r\n </Typography>\r\n {this.isBtnRemoveOption(option) && (\r\n <Tooltip title='Remove option' arrow placement='left'>\r\n <IconButton size='small' onClick={(e) => this.handleRemoveItem(e, option)}>\r\n <RemoveIcon fontSize='small' />\r\n </IconButton>\r\n </Tooltip>\r\n )}\r\n </ItemOption>\r\n )}\r\n renderTags={(tagValue, getTagProps) => {\r\n return tagValue.map((option, index) => <Chip label={option} {...getTagProps({ index })} key={option.toString()} />)\r\n }}\r\n renderInput={(params) => <TextField {...params} variant='outlined' {...this.getTextFieldProps()} />}\r\n />\r\n <input\r\n ref={(ref) => {\r\n this.refInput = ref\r\n }}\r\n hidden\r\n type='text'\r\n name={name?.toString()}\r\n defaultValue={this.state.value.join(separator)}\r\n />\r\n </>\r\n )\r\n }\r\n\r\n handleRemoveItem = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => {\r\n e.preventDefault()\r\n e.stopPropagation()\r\n console.log(value)\r\n const list = storeItems?.delete(value) ?? []\r\n this.setState({ options: list })\r\n }\r\n\r\n handleAddOption = (_: React.SyntheticEvent, newValue: string[]) => {\r\n if (params?.saveLocalStorageByKey) {\r\n const options = storeItems?.setItems(this.state.options, newValue) ?? this.state.options\r\n this.setState({ value: newValue, options })\r\n } else {\r\n this.setState({ value: newValue })\r\n }\r\n if (this.refInput) {\r\n this.refInput.value = newValue.join(separator)\r\n }\r\n this.props.name && this.props.onBlur && this.props.onBlur(this.props.name)\r\n }\r\n\r\n isBtnRemoveOption = (value: string) => {\r\n const isSelectedOption = this.state.value.findIndex((x) => x === value) < 0\r\n const selectOptions = params?.optionItems ?? this.props.slots?.optionItems ?? []\r\n const isDefault = selectOptions.findIndex((x) => x === value) < 0\r\n return isDefault && isSelectedOption\r\n }\r\n\r\n getSelectOptions = () => {\r\n let items = params?.optionItems ?? []\r\n if (params?.saveLocalStorageByKey) {\r\n items = storeItems?.getItemsAndMerge(items) ?? []\r\n }\r\n return items\r\n }\r\n\r\n getTextFieldProps = (): TextFieldProps => {\r\n const { name, label, placeholder, onBlur, messageErrors } = this.props\r\n const eMessage = getErrorMessage(messageErrors, name)\r\n return {\r\n label,\r\n placeholder: placeholder || 'Add new',\r\n onBlur: () => {\r\n if (!name) return\r\n onBlur && onBlur(name)\r\n },\r\n error: eMessage.error,\r\n helperText: eMessage.message\r\n }\r\n }\r\n\r\n getDefaultValue = (): string[] => {\r\n const { name, data } = this.props\r\n const value = name ? data?.[name]?.toString() : ''\r\n return value?.split(separator).filter((x) => !!x) ?? []\r\n }\r\n }\r\n\r\n return AutocompleteChip\r\n}\r\n\r\nexport default CreateAutocompleteChip\r\n\r\nconst ItemOption = styled('li')({\r\n display: 'flex',\r\n alignItems: 'center'\r\n})\r\n\r\ntype TChipStoreRoot = { [key: string]: string[] }\r\n\r\nclass AutocompleteChipStore {\r\n private storeKeyRoot = 'autocomplete_chip_store'\r\n private storeKey: string\r\n constructor(key: string, defaultValue?: string[]) {\r\n this.storeKey = key\r\n if (defaultValue) {\r\n this.setChild(defaultValue)\r\n }\r\n }\r\n\r\n static initial = (key: string, defaultValue?: string[]) => new AutocompleteChipStore(key, defaultValue)\r\n\r\n private getRoot = (): TChipStoreRoot => {\r\n try {\r\n const res = window.localStorage.getItem(this.storeKeyRoot)\r\n return JSON.parse(res ?? '{}')\r\n } catch (error) {\r\n return {}\r\n }\r\n }\r\n\r\n private getChild = (): string[] => {\r\n return this.getRoot()[this.storeKey]\r\n }\r\n\r\n private setRoot = (value: TChipStoreRoot) => {\r\n window.localStorage.setItem(this.storeKeyRoot, JSON.stringify(value))\r\n }\r\n\r\n private setChild = (value: string[]) => {\r\n const obj = this.getRoot()\r\n obj[this.storeKey] = value\r\n this.setRoot(obj)\r\n }\r\n\r\n getItemsAndMerge = (value: string[]): string[] => {\r\n try {\r\n return Array.from(new Set([...this.getChild(), ...value])).sort()\r\n } catch (error) {\r\n return value\r\n }\r\n }\r\n\r\n setItems = (options: string[], value: string[]): string[] => {\r\n const list = Array.from(new Set([...options, ...value])).sort()\r\n this.setChild(list)\r\n return list\r\n }\r\n\r\n delete = (value: string) => {\r\n const list = this.getChild().filter((x) => x !== value)\r\n this.setChild(list)\r\n return list\r\n }\r\n}\r\n"],"names":["CreateAutocompleteChip","params","separator","limitTags","storeItems","saveLocalStorageByKey","AutocompleteChipStore","initial","undefined","AutocompleteChip","props","_this","_classCallCheck","_callSuper","_defineProperty","e","value","_storeItems$delete","preventDefault","stopPropagation","console","log","list","setState","options","_","newValue","_storeItems$setItems","setItems","state","refInput","join","name","onBlur","_ref","_params$optionItems","_this$props$slots","isSelectedOption","findIndex","x","optionItems","slots","_params$optionItems2","_storeItems$getItemsA","items","getItemsAndMerge","_this$props","label","placeholder","messageErrors","eMessage","getErrorMessage","error","helperText","message","_data$name","_value$split$filter","_this$props2","data","toString","split","filter","getDefaultValue","getSelectOptions","_inherits","Component","_createClass","key","_this2","this","_jsxs","_Fragment","children","_jsx","Autocomplete","multiple","freeSolo","onChange","handleAddOption","renderOption","option","_createElement","ItemOption","_objectSpread","Typography","variant","sx","flex","isBtnRemoveOption","Tooltip","title","arrow","placement","IconButton","size","onClick","handleRemoveItem","RemoveIcon","fontSize","renderTags","tagValue","getTagProps","map","index","Chip","renderInput","TextField","getTextFieldProps","ref","hidden","type","defaultValue","styled","display","alignItems","_this3","res","window","localStorage","getItem","storeKeyRoot","JSON","parse","getRoot","storeKey","setItem","stringify","obj","setRoot","Array","from","Set","concat","_toConsumableArray","getChild","sort","setChild","_AutocompleteChipStore"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e,inherits as t,createClass as r,objectSpread2 as a,classCallCheck as i,callSuper as s}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,jsxs as o}from"react/jsx-runtime";import{Component as l}from"react";import{LocalizationProvider as u}from"@mui/x-date-pickers";import{AdapterDayjs as c}from"@mui/x-date-pickers/AdapterDayjs";import{styled as d,Box as p,colors as h,TextField as f,Typography as m,Switch as g}from"@mui/material";import{getErrorMessage as C}from"./
|
|
1
|
+
import{defineProperty as e,inherits as t,createClass as r,objectSpread2 as a,classCallCheck as i,callSuper as s}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,jsxs as o}from"react/jsx-runtime";import{Component as l}from"react";import{LocalizationProvider as u}from"@mui/x-date-pickers";import{AdapterDayjs as c}from"@mui/x-date-pickers/AdapterDayjs";import{styled as d,Box as p,colors as h,TextField as f,Typography as m,Switch as g}from"@mui/material";import{getErrorMessage as C}from"./helpers.js";import{mergeObjects as v,tryParseIntRequired as y}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"react-router-dom";import"../utils/query-param.js";import D from"dayjs";var b="DateExpired-root",x="DateExpired-control",k="DateExpired-label",w="DateExpired-expired",O="DateExpired-labelSwitch",j="DateExpired-input",E="DateExpired-switch";function N(d){var p=function(){function p(t){var r,a;return i(this,p),a=s(this,p,[t]),e(a,"defaultNumberOfDays",30),e(a,"mapTextFieldProps",(function(){var e=a.props,t=e.messageErrors,r=e.name,i=e.onBlur,s=a.props.disabled||!a.state.switchChecked,l={fullWidth:!0,className:j,label:o("span",{className:k,children:["Expiry date",a.state.switchChecked&&n("b",{children:a.getOffsetDate(a.state.numberOfDays)})]}),variant:"outlined",type:"number",disabled:s,value:a.state.switchChecked?a.state.numberOfDays:0,onChange:a.handleChange};if(r){l.onBlur=function(){return i&&i(r)};var u,c=C(t,r);if(c.error)l.error=Boolean(c.error),l.helperText=null!==(u=c.message)&&void 0!==u?u:""}return v({},l,a.mergeConfig.textFieldProps)})),e(a,"handleChange",(function(e){var t=""!=e.target.value?parseInt(e.target.value):0;a.setState({numberOfDays:t},(function(){var e=C(a.props.messageErrors,a.props.name);t>0&&e.error&&a.mergeConfig.handleBlur()}))})),e(a,"getRootClasses",(function(){var e=[b];return a.state.numberOfDays<1&&e.push(w),e.join(" ")})),e(a,"getNumberOfDays",(function(){return"number"===a.mergeConfig.type?y(a.mergeConfig.defaulValue,a.defaultNumberOfDays):a.getDaysUntilDate(a.mergeConfig.defaulValue,a.defaultNumberOfDays)})),e(a,"getOffsetDate",(function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"MM-DD-YYYY";return D().add(e,"day").format(t)})),e(a,"getDaysUntilDate",(function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;try{if(!e)return t;var r=D(e),a=D(),i=r.diff(a,"day",!0);return Math.round(i)}catch(e){return t}})),a.mergeConfigCached=null!==(r=a.updateMergeConfig(t.slots))&&void 0!==r?r:{},a.state={numberOfDays:a.getNumberOfDays(),switchChecked:a.mergeConfig.switchChecked},a.id=(new Date).getTime().toString(),a}return t(p,l),r(p,[{key:"mergeConfig",get:function(){return this.mergeConfigCached}},{key:"defaultValueInput",get:function(){return"number"===this.mergeConfig.type?this.state.numberOfDays:this.getOffsetDate(this.state.numberOfDays,"YYYY-MM-DDTHH:mm:ss.sssZ")}},{key:"componentDidUpdate",value:function(e){e.slots===this.props.slots&&e.data===this.props.data||(this.mergeConfigCached=this.updateMergeConfig(this.props.slots))}},{key:"render",value:function(){var e,t=this;return n(u,{dateAdapter:c,children:o(M,{className:this.getRootClasses(),children:[n("input",{type:"text",hidden:!0,name:null===(e=this.props.name)||void 0===e?void 0:e.toString(),defaultValue:this.defaultValueInput},this.defaultValueInput),n(f,a({},this.mapTextFieldProps())),o("div",{className:x,children:[n(m,a(a({variant:"caption",className:O},{component:"label",htmlFor:this.id}),{},{sx:{color:this.state.switchChecked?"success.main":"#767676"},children:this.state.switchChecked?"Use Expiration Date":"No Expiration"})),n(g,a({id:this.id,size:"small",color:"success",checked:this.state.switchChecked,onChange:function(e,r){return t.setState({switchChecked:r})}},this.mergeConfig.switchProps))]})]})})}},{key:"updateMergeConfig",value:function(e){var t,r=null!=e?e:{},i=r.switchChecked,s=r.switchCheckedGetter,n=v(d,e),o=this.props,l=o.data,u=o.name,c=o.onBlur,p=o.defaultValue,h=null!=p?p:l&&u?null===(t=l[u])||void 0===t?void 0:t.toString():void 0,f=!!l&&(!!h||!!i);return s&&(f=s(h,l)),a(a({},n),{},{switchChecked:f,defaulValue:h,handleBlur:function(){u&&c&&c(u)}})}}])}();return p}var M=d(p)(e(e(e(e(e(e({display:"flex",alignItems:"center",gap:"10px",position:"relative"},".".concat(E),{margin:0,flex:"0 0 auto"}),".".concat(k),{b:{color:h.blue[600],marginLeft:"8px"}}),".".concat(O),{fontWeight:600,cursor:"pointer"}),".".concat(x),{position:"absolute",top:0,right:0,height:"100%",display:"flex",alignItems:"center"}),".".concat(j),{".MuiInputBase-input":{paddingRight:"160px"}}),"&.".concat(w),e({},".".concat(k),{b:{color:h.red[600]}})));export{N as default};
|
|
2
2
|
//# sourceMappingURL=create.date-expired.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.date-expired.js","sources":["../../src/form/create.date-expired.tsx"],"sourcesContent":["import React, { Component } from 'react'\r\nimport { LocalizationProvider } from '@mui/x-date-pickers'\r\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'\r\nimport { Switch, Typography, TextField, styled, Box, TextFieldProps, SwitchProps, colors } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helper'\r\nimport { dayjsCustom, mergeObjects, tryParseIntRequired } from '../utils'\r\n\r\nconst defaultFormatString = 'MM-DD-YYYY'\r\n\r\nconst dateExpiredClasses = {\r\n root: 'DateExpired-root',\r\n control: 'DateExpired-control',\r\n label: 'DateExpired-label',\r\n expired: 'DateExpired-expired',\r\n labelSwitch: 'DateExpired-labelSwitch',\r\n input: 'DateExpired-input',\r\n switch: 'DateExpired-switch'\r\n}\r\n\r\ninterface ISlots<T> {\r\n /** @default string */\r\n type?: 'number' | 'string'\r\n textFieldProps?: Partial<TextFieldProps>\r\n switchProps?: SwitchProps\r\n switchChecked?: boolean\r\n switchCheckedGetter?: (value: any, model?: Partial<T>) => boolean\r\n}\r\n\r\ninterface MergeConfig<T> extends ISlots<T> {\r\n switchChecked: boolean\r\n defaulValue?: string\r\n handleBlur: () => void\r\n}\r\n\r\ninterface IProps<T> extends IFormInputBase<T> {\r\n slots?: ISlots<T>\r\n}\r\n\r\ninterface IState {\r\n numberOfDays: number\r\n switchChecked: boolean\r\n}\r\n\r\nfunction CreateDateExpired<T>(params?: ISlots<T>): React.ComponentType<IProps<T>> {\r\n class DateExpired extends Component<IProps<T>, IState> {\r\n defaultNumberOfDays: number = 30\r\n private id\r\n private mergeConfigCached: MergeConfig<T>\r\n constructor(props: IProps<T>) {\r\n super(props)\r\n this.mergeConfigCached = this.updateMergeConfig(props.slots) ?? {}\r\n this.state = {\r\n numberOfDays: this.getNumberOfDays(),\r\n switchChecked: this.mergeConfig.switchChecked\r\n }\r\n this.id = new Date().getTime().toString()\r\n }\r\n\r\n get mergeConfig(): MergeConfig<T> {\r\n return this.mergeConfigCached\r\n }\r\n\r\n get defaultValueInput(): string | number {\r\n if (this.mergeConfig.type === 'number') {\r\n return this.state.numberOfDays\r\n } else {\r\n return this.getOffsetDate(this.state.numberOfDays, 'YYYY-MM-DDTHH:mm:ss.sssZ')\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps: IProps<T>) {\r\n if (prevProps.slots !== this.props.slots || prevProps.data !== this.props.data) {\r\n this.mergeConfigCached = this.updateMergeConfig(this.props.slots)\r\n }\r\n }\r\n\r\n //#region Render\r\n render() {\r\n return (\r\n <LocalizationProvider dateAdapter={AdapterDayjs}>\r\n <Wrap className={this.getRootClasses()}>\r\n <input key={this.defaultValueInput} type='text' hidden name={this.props.name?.toString()} defaultValue={this.defaultValueInput} />\r\n <TextField {...this.mapTextFieldProps()} />\r\n <div className={dateExpiredClasses.control}>\r\n <Typography\r\n variant='caption'\r\n className={dateExpiredClasses.labelSwitch}\r\n {...{ component: 'label', htmlFor: this.id }}\r\n sx={{ color: this.state.switchChecked ? 'success.main' : '#767676' }}\r\n >\r\n {this.state.switchChecked ? 'Use Expiration Date' : 'No Expiration'}\r\n </Typography>\r\n <Switch\r\n id={this.id}\r\n size='small'\r\n color='success'\r\n checked={this.state.switchChecked}\r\n onChange={(_, checked) => this.setState({ switchChecked: checked })}\r\n {...this.mergeConfig.switchProps}\r\n />\r\n </div>\r\n </Wrap>\r\n </LocalizationProvider>\r\n )\r\n }\r\n //#endregion\r\n\r\n mapTextFieldProps = (): TextFieldProps => {\r\n const { messageErrors, name, onBlur } = this.props\r\n const disabled = this.props.disabled || !this.state.switchChecked\r\n const obj: TextFieldProps = {\r\n fullWidth: true,\r\n className: dateExpiredClasses.input,\r\n label: (\r\n <span className={dateExpiredClasses.label}>\r\n Expiry date\r\n {this.state.switchChecked && <b>{this.getOffsetDate(this.state.numberOfDays)}</b>}\r\n </span>\r\n ),\r\n variant: 'outlined',\r\n type: 'number',\r\n disabled: disabled,\r\n value: this.state.switchChecked ? this.state.numberOfDays : 0,\r\n onChange: this.handleChange\r\n }\r\n if (!!name) {\r\n obj.onBlur = () => onBlur && onBlur(name)\r\n const temp = getErrorMessage(messageErrors, name)\r\n if (temp.error) {\r\n obj.error = Boolean(temp.error)\r\n obj.helperText = temp.message ?? ''\r\n }\r\n }\r\n return mergeObjects<TextFieldProps>({}, obj, this.mergeConfig.textFieldProps)\r\n }\r\n\r\n updateMergeConfig(currentSlots?: ISlots<T>): MergeConfig<T> {\r\n const { switchChecked, switchCheckedGetter } = currentSlots ?? {}\r\n const obj = mergeObjects(params, currentSlots)\r\n const { data, name, onBlur, defaultValue } = this.props\r\n const dValue = defaultValue ?? (!!data && !!name ? data[name]?.toString() : undefined)\r\n let check = !data ? false : !!dValue || !!switchChecked\r\n if (switchCheckedGetter) check = switchCheckedGetter(dValue, data)\r\n return {\r\n ...obj,\r\n switchChecked: check,\r\n defaulValue: dValue,\r\n handleBlur: () => {\r\n if (!name || !onBlur) return\r\n onBlur(name)\r\n }\r\n }\r\n }\r\n\r\n handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n const numberOfDays: number = e.target.value != '' ? parseInt(e.target.value) : 0\r\n this.setState({ numberOfDays }, () => {\r\n const err = getErrorMessage(this.props.messageErrors, this.props.name)\r\n if (numberOfDays > 0 && err.error) this.mergeConfig.handleBlur()\r\n })\r\n }\r\n\r\n getRootClasses = () => {\r\n const classes = [dateExpiredClasses.root]\r\n if (this.state.numberOfDays < 1) classes.push(dateExpiredClasses.expired)\r\n return classes.join(' ')\r\n }\r\n\r\n getNumberOfDays = (): number => {\r\n if (this.mergeConfig.type === 'number') {\r\n return tryParseIntRequired(this.mergeConfig.defaulValue, this.defaultNumberOfDays)\r\n } else {\r\n return this.getDaysUntilDate(this.mergeConfig.defaulValue, this.defaultNumberOfDays)\r\n }\r\n }\r\n\r\n getOffsetDate = (num: number, formatString = defaultFormatString): string => {\r\n return dayjsCustom().add(num, 'day').format(formatString)\r\n }\r\n\r\n getDaysUntilDate = (value?: string, defaultValue = 0): number => {\r\n try {\r\n if (!value) return defaultValue\r\n const target = dayjsCustom(value)\r\n const today = dayjsCustom()\r\n const diff = target.diff(today, 'day', true)\r\n return Math.round(diff)\r\n } catch {\r\n return defaultValue\r\n }\r\n }\r\n }\r\n return DateExpired\r\n}\r\nexport default CreateDateExpired\r\n\r\nconst Wrap = styled(Box)({\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '10px',\r\n position: 'relative',\r\n [`.${dateExpiredClasses.switch}`]: {\r\n margin: 0,\r\n flex: '0 0 auto'\r\n },\r\n [`.${dateExpiredClasses.label}`]: {\r\n b: {\r\n color: colors.blue[600],\r\n marginLeft: '8px'\r\n }\r\n },\r\n [`.${dateExpiredClasses.labelSwitch}`]: {\r\n fontWeight: 600,\r\n cursor: 'pointer'\r\n },\r\n [`.${dateExpiredClasses.control}`]: {\r\n position: 'absolute',\r\n top: 0,\r\n right: 0,\r\n height: '100%',\r\n display: 'flex',\r\n alignItems: 'center'\r\n },\r\n [`.${dateExpiredClasses.input}`]: {\r\n '.MuiInputBase-input': {\r\n paddingRight: '160px'\r\n }\r\n },\r\n [`&.${dateExpiredClasses.expired}`]: {\r\n [`.${dateExpiredClasses.label}`]: {\r\n b: {\r\n color: colors.red[600]\r\n }\r\n }\r\n }\r\n})\r\n"],"names":["dateExpiredClasses","CreateDateExpired","params","DateExpired","props","_this$updateMergeConf","_this","_classCallCheck","_callSuper","_defineProperty","_this$props","messageErrors","name","onBlur","disabled","state","switchChecked","obj","fullWidth","className","label","_jsxs","children","_jsx","getOffsetDate","numberOfDays","variant","type","value","onChange","handleChange","_temp$message","temp","getErrorMessage","error","Boolean","helperText","message","mergeObjects","mergeConfig","textFieldProps","e","target","parseInt","setState","err","handleBlur","classes","push","join","tryParseIntRequired","defaulValue","defaultNumberOfDays","getDaysUntilDate","num","formatString","arguments","length","undefined","dayjsCustom","add","format","defaultValue","today","diff","Math","round","_unused","mergeConfigCached","updateMergeConfig","slots","getNumberOfDays","id","Date","getTime","toString","_inherits","Component","_createClass","key","get","this","prevProps","data","_this$props$name","_this2","LocalizationProvider","dateAdapter","AdapterDayjs","Wrap","getRootClasses","hidden","defaultValueInput","TextField","_objectSpread","mapTextFieldProps","Typography","component","htmlFor","sx","color","Switch","size","checked","_","switchProps","currentSlots","_data$name","_ref","switchCheckedGetter","_this$props2","dValue","check","styled","Box","display","alignItems","gap","position","concat","margin","flex","b","colors","blue","marginLeft","fontWeight","cursor","top","right","height","paddingRight","red"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.date-expired.js","sources":["../../src/form/create.date-expired.tsx"],"sourcesContent":["import React, { Component } from 'react'\r\nimport { LocalizationProvider } from '@mui/x-date-pickers'\r\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'\r\nimport { Switch, Typography, TextField, styled, Box, TextFieldProps, SwitchProps, colors } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { dayjsCustom, mergeObjects, tryParseIntRequired } from '../utils'\r\n\r\nconst defaultFormatString = 'MM-DD-YYYY'\r\n\r\nconst dateExpiredClasses = {\r\n root: 'DateExpired-root',\r\n control: 'DateExpired-control',\r\n label: 'DateExpired-label',\r\n expired: 'DateExpired-expired',\r\n labelSwitch: 'DateExpired-labelSwitch',\r\n input: 'DateExpired-input',\r\n switch: 'DateExpired-switch'\r\n}\r\n\r\ninterface ISlots<T> {\r\n /** @default string */\r\n type?: 'number' | 'string'\r\n textFieldProps?: Partial<TextFieldProps>\r\n switchProps?: SwitchProps\r\n switchChecked?: boolean\r\n switchCheckedGetter?: (value: any, model?: Partial<T>) => boolean\r\n}\r\n\r\ninterface MergeConfig<T> extends ISlots<T> {\r\n switchChecked: boolean\r\n defaulValue?: string\r\n handleBlur: () => void\r\n}\r\n\r\ninterface IProps<T> extends IFormInputBase<T> {\r\n slots?: ISlots<T>\r\n}\r\n\r\ninterface IState {\r\n numberOfDays: number\r\n switchChecked: boolean\r\n}\r\n\r\nfunction CreateDateExpired<T>(params?: ISlots<T>): React.ComponentType<IProps<T>> {\r\n class DateExpired extends Component<IProps<T>, IState> {\r\n defaultNumberOfDays: number = 30\r\n private id\r\n private mergeConfigCached: MergeConfig<T>\r\n constructor(props: IProps<T>) {\r\n super(props)\r\n this.mergeConfigCached = this.updateMergeConfig(props.slots) ?? {}\r\n this.state = {\r\n numberOfDays: this.getNumberOfDays(),\r\n switchChecked: this.mergeConfig.switchChecked\r\n }\r\n this.id = new Date().getTime().toString()\r\n }\r\n\r\n get mergeConfig(): MergeConfig<T> {\r\n return this.mergeConfigCached\r\n }\r\n\r\n get defaultValueInput(): string | number {\r\n if (this.mergeConfig.type === 'number') {\r\n return this.state.numberOfDays\r\n } else {\r\n return this.getOffsetDate(this.state.numberOfDays, 'YYYY-MM-DDTHH:mm:ss.sssZ')\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps: IProps<T>) {\r\n if (prevProps.slots !== this.props.slots || prevProps.data !== this.props.data) {\r\n this.mergeConfigCached = this.updateMergeConfig(this.props.slots)\r\n }\r\n }\r\n\r\n //#region Render\r\n render() {\r\n return (\r\n <LocalizationProvider dateAdapter={AdapterDayjs}>\r\n <Wrap className={this.getRootClasses()}>\r\n <input key={this.defaultValueInput} type='text' hidden name={this.props.name?.toString()} defaultValue={this.defaultValueInput} />\r\n <TextField {...this.mapTextFieldProps()} />\r\n <div className={dateExpiredClasses.control}>\r\n <Typography\r\n variant='caption'\r\n className={dateExpiredClasses.labelSwitch}\r\n {...{ component: 'label', htmlFor: this.id }}\r\n sx={{ color: this.state.switchChecked ? 'success.main' : '#767676' }}\r\n >\r\n {this.state.switchChecked ? 'Use Expiration Date' : 'No Expiration'}\r\n </Typography>\r\n <Switch\r\n id={this.id}\r\n size='small'\r\n color='success'\r\n checked={this.state.switchChecked}\r\n onChange={(_, checked) => this.setState({ switchChecked: checked })}\r\n {...this.mergeConfig.switchProps}\r\n />\r\n </div>\r\n </Wrap>\r\n </LocalizationProvider>\r\n )\r\n }\r\n //#endregion\r\n\r\n mapTextFieldProps = (): TextFieldProps => {\r\n const { messageErrors, name, onBlur } = this.props\r\n const disabled = this.props.disabled || !this.state.switchChecked\r\n const obj: TextFieldProps = {\r\n fullWidth: true,\r\n className: dateExpiredClasses.input,\r\n label: (\r\n <span className={dateExpiredClasses.label}>\r\n Expiry date\r\n {this.state.switchChecked && <b>{this.getOffsetDate(this.state.numberOfDays)}</b>}\r\n </span>\r\n ),\r\n variant: 'outlined',\r\n type: 'number',\r\n disabled: disabled,\r\n value: this.state.switchChecked ? this.state.numberOfDays : 0,\r\n onChange: this.handleChange\r\n }\r\n if (!!name) {\r\n obj.onBlur = () => onBlur && onBlur(name)\r\n const temp = getErrorMessage(messageErrors, name)\r\n if (temp.error) {\r\n obj.error = Boolean(temp.error)\r\n obj.helperText = temp.message ?? ''\r\n }\r\n }\r\n return mergeObjects<TextFieldProps>({}, obj, this.mergeConfig.textFieldProps)\r\n }\r\n\r\n updateMergeConfig(currentSlots?: ISlots<T>): MergeConfig<T> {\r\n const { switchChecked, switchCheckedGetter } = currentSlots ?? {}\r\n const obj = mergeObjects(params, currentSlots)\r\n const { data, name, onBlur, defaultValue } = this.props\r\n const dValue = defaultValue ?? (!!data && !!name ? data[name]?.toString() : undefined)\r\n let check = !data ? false : !!dValue || !!switchChecked\r\n if (switchCheckedGetter) check = switchCheckedGetter(dValue, data)\r\n return {\r\n ...obj,\r\n switchChecked: check,\r\n defaulValue: dValue,\r\n handleBlur: () => {\r\n if (!name || !onBlur) return\r\n onBlur(name)\r\n }\r\n }\r\n }\r\n\r\n handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n const numberOfDays: number = e.target.value != '' ? parseInt(e.target.value) : 0\r\n this.setState({ numberOfDays }, () => {\r\n const err = getErrorMessage(this.props.messageErrors, this.props.name)\r\n if (numberOfDays > 0 && err.error) this.mergeConfig.handleBlur()\r\n })\r\n }\r\n\r\n getRootClasses = () => {\r\n const classes = [dateExpiredClasses.root]\r\n if (this.state.numberOfDays < 1) classes.push(dateExpiredClasses.expired)\r\n return classes.join(' ')\r\n }\r\n\r\n getNumberOfDays = (): number => {\r\n if (this.mergeConfig.type === 'number') {\r\n return tryParseIntRequired(this.mergeConfig.defaulValue, this.defaultNumberOfDays)\r\n } else {\r\n return this.getDaysUntilDate(this.mergeConfig.defaulValue, this.defaultNumberOfDays)\r\n }\r\n }\r\n\r\n getOffsetDate = (num: number, formatString = defaultFormatString): string => {\r\n return dayjsCustom().add(num, 'day').format(formatString)\r\n }\r\n\r\n getDaysUntilDate = (value?: string, defaultValue = 0): number => {\r\n try {\r\n if (!value) return defaultValue\r\n const target = dayjsCustom(value)\r\n const today = dayjsCustom()\r\n const diff = target.diff(today, 'day', true)\r\n return Math.round(diff)\r\n } catch {\r\n return defaultValue\r\n }\r\n }\r\n }\r\n return DateExpired\r\n}\r\nexport default CreateDateExpired\r\n\r\nconst Wrap = styled(Box)({\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '10px',\r\n position: 'relative',\r\n [`.${dateExpiredClasses.switch}`]: {\r\n margin: 0,\r\n flex: '0 0 auto'\r\n },\r\n [`.${dateExpiredClasses.label}`]: {\r\n b: {\r\n color: colors.blue[600],\r\n marginLeft: '8px'\r\n }\r\n },\r\n [`.${dateExpiredClasses.labelSwitch}`]: {\r\n fontWeight: 600,\r\n cursor: 'pointer'\r\n },\r\n [`.${dateExpiredClasses.control}`]: {\r\n position: 'absolute',\r\n top: 0,\r\n right: 0,\r\n height: '100%',\r\n display: 'flex',\r\n alignItems: 'center'\r\n },\r\n [`.${dateExpiredClasses.input}`]: {\r\n '.MuiInputBase-input': {\r\n paddingRight: '160px'\r\n }\r\n },\r\n [`&.${dateExpiredClasses.expired}`]: {\r\n [`.${dateExpiredClasses.label}`]: {\r\n b: {\r\n color: colors.red[600]\r\n }\r\n }\r\n }\r\n})\r\n"],"names":["dateExpiredClasses","CreateDateExpired","params","DateExpired","props","_this$updateMergeConf","_this","_classCallCheck","_callSuper","_defineProperty","_this$props","messageErrors","name","onBlur","disabled","state","switchChecked","obj","fullWidth","className","label","_jsxs","children","_jsx","getOffsetDate","numberOfDays","variant","type","value","onChange","handleChange","_temp$message","temp","getErrorMessage","error","Boolean","helperText","message","mergeObjects","mergeConfig","textFieldProps","e","target","parseInt","setState","err","handleBlur","classes","push","join","tryParseIntRequired","defaulValue","defaultNumberOfDays","getDaysUntilDate","num","formatString","arguments","length","undefined","dayjsCustom","add","format","defaultValue","today","diff","Math","round","_unused","mergeConfigCached","updateMergeConfig","slots","getNumberOfDays","id","Date","getTime","toString","_inherits","Component","_createClass","key","get","this","prevProps","data","_this$props$name","_this2","LocalizationProvider","dateAdapter","AdapterDayjs","Wrap","getRootClasses","hidden","defaultValueInput","TextField","_objectSpread","mapTextFieldProps","Typography","component","htmlFor","sx","color","Switch","size","checked","_","switchProps","currentSlots","_data$name","_ref","switchCheckedGetter","_this$props2","dValue","check","styled","Box","display","alignItems","gap","position","concat","margin","flex","b","colors","blue","marginLeft","fontWeight","cursor","top","right","height","paddingRight","red"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as t,createClass as e,objectSpread2 as r,classCallCheck as o,callSuper as a,defineProperty as l}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as s,jsx as n}from"react/jsx-runtime";import{Component as i}from"react";import{styled as u}from"@mui/material";import{AdapterDayjs as p}from"@mui/x-date-pickers/AdapterDayjs";import{DatePicker as d,LocalizationProvider as m}from"@mui/x-date-pickers";import{getErrorMessage as f}from"./
|
|
1
|
+
import{inherits as t,createClass as e,objectSpread2 as r,classCallCheck as o,callSuper as a,defineProperty as l}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as s,jsx as n}from"react/jsx-runtime";import{Component as i}from"react";import{styled as u}from"@mui/material";import{AdapterDayjs as p}from"@mui/x-date-pickers/AdapterDayjs";import{DatePicker as d,LocalizationProvider as m}from"@mui/x-date-pickers";import{getErrorMessage as f}from"./helpers.js";import{mergeObjects as c}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"react-router-dom";import"../utils/query-param.js";import v from"dayjs";var h=function(u){return function(){function d(t){var e,r;return o(this,d),r=a(this,d,[t]),l(r,"_cachedSlots",{}),l(r,"getDatePickerProps",(function(){var t,e,o,a,l,s=null!==(t=null==u?void 0:u.minDateOffset)&&void 0!==t?t:0,n=s>0?v().add(s,"day").startOf("day"):null==u?void 0:u.minDate,i=null!==(e=r.props.label)&&void 0!==e?e:null===(o=r.props.name)||void 0===o?void 0:o.toString(),p=null!==(a=r.props.format)&&void 0!==a?a:"MM/DD/YYYY",d=f(r.props.messageErrors,r.props.name),m={label:i,format:p,views:["day","month","year"],value:r.state.value,onChange:r.handleChange,disabled:r.props.disabled,minDate:n,slotProps:{textField:{onBlur:r.handleBlur,fullWidth:!0,error:d.error,helperText:d.message,variant:"outlined"}}};return c(m,null==u?void 0:u.datePickerProps,null===(l=r.slots)||void 0===l?void 0:l.datePickerProps)})),l(r,"refInput",null),l(r,"mergeSlots",(function(t){return c({},u,t)})),l(r,"handleBlur",(function(){r.props.name&&r.props.onBlur&&r.props.onBlur(r.props.name)})),l(r,"handleChange",(function(t){r.setState({value:t}),r.refInput&&(r.refInput.value=t&&!isNaN(t.toDate().getTime())?t.toDate().toISOString():""),setTimeout(r.handleBlur,50)})),l(r,"getDefaultValue",(function(){try{var t,e;if(!r.props.defaultValue&&!r.slots.defaultValue&&r.slots.minDateOffset)return v().add(1,"day").startOf("day");if(!r.props.defaultValue&&r.slots.minDate)return r.slots.minDate;var o=r.props,a=o.data,l=o.name,s=null!==(t=null!==(e=r.props.defaultValue)&&void 0!==e?e:r.slots.defaultValue)&&void 0!==t?t:l?null==a?void 0:a[l]:"";return s?v(s.toString()):v()}catch(t){return v()}})),r._cachedSlots=null!==(e=r.mergeSlots(t.slots))&&void 0!==e?e:{},r.state={value:r.getDefaultValue()},r}return t(d,i),e(d,[{key:"slots",get:function(){return this._cachedSlots}},{key:"componentDidUpdate",value:function(t){t.slots!==this.props.slots&&(this._cachedSlots=this.mergeSlots(this.props.slots))}},{key:"render",value:function(){var t,e,o=this;return s(m,{dateAdapter:p,children:[n(g,r({},this.getDatePickerProps())),n("input",{hidden:!0,name:null===(t=this.props.name)||void 0===t?void 0:t.toString(),defaultValue:null===(e=this.getDefaultValue())||void 0===e?void 0:e.toDate().toISOString(),ref:function(t){return o.refInput=t}})]})}}])}()},g=u(d)({"& .MuiInputBase-root::before, & .MuiInputBase-root::after":{borderBottom:"none !important"}});export{h as default};
|
|
2
2
|
//# sourceMappingURL=create.date-picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.date-picker.js","sources":["../../src/form/create.date-picker.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Dayjs } from 'dayjs'\r\nimport { styled } from '@mui/material'\r\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'\r\nimport { DatePicker as MUIDatePicker, LocalizationProvider, DatePickerProps } from '@mui/x-date-pickers'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './
|
|
1
|
+
{"version":3,"file":"create.date-picker.js","sources":["../../src/form/create.date-picker.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Dayjs } from 'dayjs'\r\nimport { styled } from '@mui/material'\r\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'\r\nimport { DatePicker as MUIDatePicker, LocalizationProvider, DatePickerProps } from '@mui/x-date-pickers'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { dayjsCustom, mergeObjects } from '../utils'\r\n\r\nconst formatDefault = 'MM/DD/YYYY'\r\n\r\nexport interface IDatePickerSlots {\r\n defaultValue?: string\r\n minDate?: Dayjs\r\n minDateOffset?: number\r\n datePickerProps?: DatePickerProps<Dayjs>\r\n}\r\n\r\nexport interface IDatePickerProps<T> extends IFormInputBase<T> {\r\n format?: string\r\n slots?: Omit<IDatePickerSlots, 'defaultValue'>\r\n}\r\n\r\nexport interface IDatePickerState {\r\n value: Dayjs | null\r\n}\r\n\r\nconst CreateDatePicker = function <T extends Object>(params?: IDatePickerSlots): ComponentType<IDatePickerProps<T>> {\r\n class DatePicker extends Component<IDatePickerProps<T>, IDatePickerState> {\r\n private _cachedSlots: IDatePickerSlots = {}\r\n constructor(props: IDatePickerProps<T>) {\r\n super(props)\r\n this._cachedSlots = this.mergeSlots(props.slots) ?? {}\r\n this.state = { value: this.getDefaultValue() }\r\n }\r\n\r\n get slots() {\r\n return this._cachedSlots\r\n }\r\n\r\n componentDidUpdate(prevProps: IDatePickerProps<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 getDatePickerProps = (): DatePickerProps<Dayjs> => {\r\n const delayInDays = params?.minDateOffset ?? 0\r\n const minDate = delayInDays > 0 ? dayjsCustom().add(delayInDays, 'day').startOf('day') : params?.minDate\r\n const label = this.props.label ?? this.props.name?.toString()\r\n const format = this.props.format ?? formatDefault\r\n const eMessage = getErrorMessage<T>(this.props.messageErrors, this.props.name)\r\n const obj: DatePickerProps<Dayjs> = {\r\n label,\r\n format,\r\n views: ['day', 'month', 'year'],\r\n value: this.state.value,\r\n onChange: this.handleChange,\r\n disabled: this.props.disabled,\r\n minDate,\r\n slotProps: {\r\n textField: { onBlur: this.handleBlur, fullWidth: true, error: eMessage.error, helperText: eMessage.message, variant: 'outlined' }\r\n }\r\n }\r\n return mergeObjects(obj, params?.datePickerProps, this.slots?.datePickerProps)\r\n }\r\n\r\n refInput: HTMLInputElement | null = null\r\n render() {\r\n return (\r\n <LocalizationProvider dateAdapter={AdapterDayjs}>\r\n <CustomDatePicker {...this.getDatePickerProps()} />\r\n <input\r\n hidden\r\n name={this.props.name?.toString()}\r\n defaultValue={this.getDefaultValue()?.toDate().toISOString()}\r\n ref={(ref) => (this.refInput = ref)}\r\n />\r\n </LocalizationProvider>\r\n )\r\n }\r\n\r\n private mergeSlots = (currentSlots?: IDatePickerSlots): IDatePickerSlots => {\r\n return mergeObjects<IDatePickerSlots>({}, params, currentSlots)\r\n }\r\n\r\n handleBlur = () => {\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n }\r\n\r\n handleChange = (newValue: Dayjs | null) => {\r\n this.setState({ value: newValue })\r\n if (this.refInput) {\r\n this.refInput.value = newValue && !isNaN(newValue.toDate().getTime()) ? newValue.toDate().toISOString() : ''\r\n }\r\n setTimeout(this.handleBlur, 50)\r\n }\r\n\r\n getDefaultValue = (): Dayjs => {\r\n try {\r\n if (!this.props.defaultValue && !this.slots.defaultValue && this.slots.minDateOffset) return dayjsCustom().add(1, 'day').startOf('day')\r\n if (!this.props.defaultValue && this.slots.minDate) return this.slots.minDate\r\n\r\n const { data, name } = this.props\r\n const dValue = this.props.defaultValue ?? this.slots.defaultValue ?? (name ? data?.[name] : '')\r\n return dValue ? dayjsCustom(dValue.toString()) : dayjsCustom()\r\n } catch {\r\n return dayjsCustom()\r\n }\r\n }\r\n }\r\n return DatePicker\r\n}\r\n\r\nexport default CreateDatePicker\r\n\r\nconst CustomDatePicker = styled(MUIDatePicker<Dayjs>)({\r\n '& .MuiInputBase-root::before, & .MuiInputBase-root::after': {\r\n borderBottom: 'none !important'\r\n }\r\n})\r\n"],"names":["CreateDatePicker","params","DatePicker","props","_this$mergeSlots","_this","_classCallCheck","_callSuper","_defineProperty","_params$minDateOffset","_this$props$label","_this$props$name","_this$props$format","_this$slots","delayInDays","minDateOffset","minDate","dayjsCustom","add","startOf","label","name","toString","format","eMessage","getErrorMessage","messageErrors","obj","views","value","state","onChange","handleChange","disabled","slotProps","textField","onBlur","handleBlur","fullWidth","error","helperText","message","variant","mergeObjects","datePickerProps","slots","currentSlots","newValue","setState","refInput","isNaN","toDate","getTime","toISOString","setTimeout","_ref","_this$props$defaultVa","defaultValue","_this$props","data","dValue","_unused","_cachedSlots","mergeSlots","getDefaultValue","_inherits","Component","_createClass","key","get","this","prevProps","_this$props$name2","_this$getDefaultValue","_this2","_jsxs","LocalizationProvider","dateAdapter","AdapterDayjs","children","_jsx","CustomDatePicker","_objectSpread","getDatePickerProps","hidden","ref","styled","MUIDatePicker","borderBottom"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as r,createClass as e,classCallCheck as t,callSuper as a,defineProperty as s,asyncToGenerator as o,regeneratorRuntime as n,objectSpread2 as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as l}from"react/jsx-runtime";import u,{Component as m}from"react";import{Box as c}from"@mui/material";import{convertFormDataToJson as f,
|
|
1
|
+
import{inherits as r,createClass as e,classCallCheck as t,callSuper as a,defineProperty as s,asyncToGenerator as o,regeneratorRuntime as n,objectSpread2 as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as l}from"react/jsx-runtime";import u,{Component as m}from"react";import{Box as c}from"@mui/material";import{convertFormDataToJson as f,singleValidate as p,validateMerge as d,getErrorFromResponse as v}from"./helpers.js";import h,{SingleRuleValidate as g}from"./validator.js";var E=function(E){var S=u.createContext({}),b=function(){function u(r){var e;return t(this,u),e=a(this,u,[r]),s(e,"refForm",null),s(e,"setError",(function(r,t){var a=s({},r,[{rule:g.Custom,message:t}]);e.setState({messageErrors:Object.assign({},e.state.messageErrors,a)})})),s(e,"clearErrorAll",(function(){e.setState({messageErrors:{}})})),s(e,"onSubmit",function(){var r=o(n().mark((function r(t){var a,s,o;return n().wrap((function(r){for(;;)switch(r.prev=r.next){case 0:if(t.preventDefault(),a=new FormData(t.currentTarget),s=f(a),e.setState({modelState:s}),!(o=e.validate.run(s))){r.next=9;break}if(e.setState({messageErrors:o}),!(Object.keys(o).length>0)){r.next=9;break}return r.abrupt("return");case 9:return r.next=11,e.props.onSubmit(s,t).catch((function(r){var t=v(r,s);e.setState({messageErrors:i(i({},e.state.messageErrors),t||{})})}));case 11:case"end":return r.stop()}}),r)})));return function(e){return r.apply(this,arguments)}}()),s(e,"onBlur",(function(r){if(e.refForm){var t=e.state.messageErrors,a=new FormData(e.refForm),s=f(a);e.setState({modelState:s});var o=p(r,s,t,e.validate)||{};e.setState({messageErrors:o})}})),s(e,"getValidate",(function(){var r=new h({});return d(r,null==E?void 0:E.validate,e.props.validate)})),e.validate=e.getValidate(),e.state={messageErrors:{}},e}return r(u,m),e(u,[{key:"render",value:function(){var r=this,e=this.onBlur,t=this.setError,a=this.clearErrorAll,s=this.state,o=s.modelState,n=s.messageErrors;return l(c,{component:"form",sx:this.props.sx,ref:function(e){return r.refForm=e},onSubmit:this.onSubmit,children:l(S.Provider,{value:{setError:t,onBlur:e,clearErrorAll:a,modelState:o,messageErrors:n},children:this.props.children})})}}])}();return{Form:b,Validator:null==E?void 0:E.validate,Context:S,contextMapping:function(r){return l(S.Consumer,{children:r})}}};export{E as default};
|
|
2
2
|
//# sourceMappingURL=create.form-base.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.form-base.js","sources":["../../src/form/create.form-base.tsx"],"sourcesContent":["import React, { Component, ComponentType, PropsWithChildren } from 'react'\r\nimport { Box, SxProps, Theme } from '@mui/material'\r\nimport { IFormBase } from './types'\r\nimport { convertFormDataToJson, getErrorFromResponse,
|
|
1
|
+
{"version":3,"file":"create.form-base.js","sources":["../../src/form/create.form-base.tsx"],"sourcesContent":["import React, { Component, ComponentType, PropsWithChildren } from 'react'\r\nimport { Box, SxProps, Theme } from '@mui/material'\r\nimport { IFormBase } from './types'\r\nimport { convertFormDataToJson, getErrorFromResponse, singleValidate, validateMerge } from './helpers'\r\nimport FormValidator, { IPartialError, SingleRuleValidate } from './validator'\r\n\r\nexport interface FormBaseParam<TModel> {\r\n validate?: FormValidator<Partial<TModel>>\r\n}\r\n\r\nexport interface FormBaseProps<TModel> extends PropsWithChildren {\r\n sx?: SxProps<Theme>\r\n validate?: FormValidator<Partial<TModel>>\r\n onSubmit: (data: Partial<TModel>, e: React.FormEvent<HTMLFormElement>) => Promise<void>\r\n}\r\n\r\nexport interface FormBaseState<TModel> extends Pick<IFormBase<TModel>, 'messageErrors'> {\r\n modelState?: Partial<TModel>\r\n}\r\n\r\nexport interface IFormContextBase<TModel> {\r\n modelState?: Partial<TModel>\r\n messageErrors: IPartialError<TModel>\r\n onBlur: (keyName: keyof TModel) => void\r\n setError: (keyName: keyof TModel, message: string) => void\r\n clearErrorAll: (keyName: keyof TModel) => void\r\n}\r\n\r\nexport interface FormBaseResult<TModel> {\r\n Form: ComponentType<FormBaseProps<TModel>>\r\n Validator?: FormValidator<Partial<TModel>>\r\n Context: React.Context<IFormContextBase<TModel>>\r\n contextMapping: (params: (context: IFormContextBase<TModel>) => JSX.Element) => JSX.Element\r\n}\r\n\r\nconst CreateFormBase = function <TModel>(param?: FormBaseParam<TModel>): FormBaseResult<TModel> {\r\n const FormBaseContext = React.createContext<IFormContextBase<TModel>>({} as any)\r\n class FormBase extends Component<FormBaseProps<TModel>, FormBaseState<TModel>> {\r\n refForm: HTMLFormElement | null = null\r\n constructor(props: FormBaseProps<TModel>) {\r\n super(props)\r\n this.validate = this.getValidate()\r\n this.state = { messageErrors: {} }\r\n }\r\n\r\n setError = (keyName: keyof TModel, message: string) => {\r\n const error = { [keyName]: [{ rule: SingleRuleValidate.Custom, message }] }\r\n this.setState({\r\n messageErrors: Object.assign({}, this.state.messageErrors, error)\r\n })\r\n }\r\n\r\n clearErrorAll = () => {\r\n this.setState({ messageErrors: {} })\r\n }\r\n\r\n render() {\r\n const { onBlur, setError, clearErrorAll } = this\r\n const { modelState, messageErrors } = this.state\r\n return (\r\n <Box component='form' sx={this.props.sx} ref={(ref: HTMLFormElement) => (this.refForm = ref)} onSubmit={this.onSubmit}>\r\n <FormBaseContext.Provider value={{ setError, onBlur, clearErrorAll, modelState, messageErrors }}>\r\n {this.props.children}\r\n </FormBaseContext.Provider>\r\n </Box>\r\n )\r\n }\r\n\r\n private validate: FormValidator<Partial<TModel>>\r\n onSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {\r\n e.preventDefault()\r\n const formData = new FormData(e.currentTarget as HTMLFormElement)\r\n const model = convertFormDataToJson<TModel>(formData)\r\n this.setState({ modelState: model })\r\n const messageErrors = this.validate.run(model) as IPartialError<TModel>\r\n if (messageErrors) {\r\n this.setState({ messageErrors: messageErrors })\r\n if (Object.keys(messageErrors).length > 0) return\r\n }\r\n await this.props.onSubmit(model, e).catch((error) => {\r\n const messageError = getErrorFromResponse(error, model)\r\n this.setState({ messageErrors: { ...this.state.messageErrors, ...(messageError || {}) } })\r\n })\r\n }\r\n\r\n onBlur = (keyName: keyof TModel) => {\r\n if (!this.refForm) return\r\n const { messageErrors } = this.state\r\n const formData = new FormData(this.refForm)\r\n const model = convertFormDataToJson(formData)\r\n this.setState({ modelState: model })\r\n const error = singleValidate<TModel, Partial<TModel>>(keyName, model, messageErrors, this.validate) || {}\r\n this.setState({ messageErrors: error as IPartialError<TModel> })\r\n }\r\n\r\n getValidate = (): FormValidator<Partial<TModel>> => {\r\n const defaultValidate = new FormValidator<Partial<TModel>>({})\r\n return validateMerge(defaultValidate, param?.validate, this.props.validate)\r\n }\r\n }\r\n\r\n return {\r\n Form: FormBase,\r\n Validator: param?.validate,\r\n Context: FormBaseContext,\r\n contextMapping: (params: (context: IFormContextBase<TModel>) => JSX.Element) => <FormBaseContext.Consumer>{params}</FormBaseContext.Consumer>\r\n }\r\n}\r\nexport default CreateFormBase\r\n"],"names":["CreateFormBase","param","FormBaseContext","React","createContext","FormBase","props","_this","_classCallCheck","_callSuper","_defineProperty","keyName","message","error","rule","SingleRuleValidate","Custom","setState","messageErrors","Object","assign","state","_ref","_asyncToGenerator","_regeneratorRuntime","mark","_callee","e","formData","model","wrap","_context","prev","next","preventDefault","FormData","currentTarget","convertFormDataToJson","modelState","validate","run","keys","length","abrupt","onSubmit","messageError","getErrorFromResponse","_objectSpread","stop","_x","apply","this","arguments","refForm","singleValidate","defaultValidate","FormValidator","validateMerge","getValidate","_inherits","Component","_createClass","key","value","_this2","onBlur","setError","clearErrorAll","_this$state","_jsx","Box","component","sx","ref","children","Provider","Form","Validator","Context","contextMapping","params","Consumer"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{objectSpread2 as e,inherits as r,createClass as n,classCallCheck as t,callSuper as o,defineProperty as i,asyncToGenerator as a,regeneratorRuntime as l}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s,jsxs as u}from"react/jsx-runtime";import{Component as p}from"react";import{styled as d,Typography as g,Box as f,TextField as m}from"@mui/material";import c from"@mui/icons-material/Download";import{getErrorMessage as h}from"./helpers.js";import{tryParseCsvFileToArray as v}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"react-router-dom";import"../utils/query-param.js";function C(d){var C=function(){function C(r){var n;return t(this,C),n=o(this,C,[r]),i(n,"mergeConfigsCache",{name:"",onBlur:function(){},messageErrors:{}}),i(n,"refInput",null),i(n,"refTextFiled",null),i(n,"getTextFieldProps",(function(){var r=n.props.label,t=h(n.mergeConfigs.messageErrors,n.mergeConfigs.name);return e({label:r,error:t.error,helperText:t.message,type:"file",variant:"outlined",fullWidth:!0,onChange:n.handleChange,inputProps:{accept:"text/csv"},InputLabelProps:{shrink:n.mergeConfigs.labelShrink}},n.mergeConfigs.textFieldProps)})),i(n,"upgradeMergeConfigs",(function(e){var r,n,t,o,i,a,l,s,u=e.name,p=e.label,g=e.onBlur,f=e.messageErrors;return{textFieldProps:Object.assign({},null==d?void 0:d.textFieldProps,null===(r=e.slots)||void 0===r?void 0:r.textFieldProps),wrapProps:Object.assign({},null==d?void 0:d.wrapProps,null===(n=e.slots)||void 0===n?void 0:n.wrapProps),name:u,onBlur:g||function(){},messageErrors:f||{},downloadSampleUrl:null!==(t=null===(o=e.slots)||void 0===o?void 0:o.downloadSampleUrl)&&void 0!==t?t:null==d?void 0:d.downloadSampleUrl,instructionalText:null!==(i=null===(a=e.slots)||void 0===a?void 0:a.instructionalText)&&void 0!==i?i:null==d?void 0:d.instructionalText,labelShrink:!1!==(null!==(l=null===(s=e.slots)||void 0===s?void 0:s.labelShrink)&&void 0!==l?l:null==d?void 0:d.labelShrink)&&!!p}})),i(n,"handleChange",function(){var e=a(l().mark((function e(r){var t,o,i;return l().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(o=null===(t=r.target.files)||void 0===t?void 0:t[0]){e.next=3;break}return e.abrupt("return");case 3:return e.prev=3,e.next=6,v(o);case 6:i=e.sent,n.refInput&&(n.refInput.value=JSON.stringify(i)),n.setState({parsedData:i},(function(){n.props.onChange&&n.props.onChange(i),n.mergeConfigs.onBlur(n.mergeConfigs.name)})),e.next=15;break;case 11:e.prev=11,e.t0=e.catch(3),console.error("Error parsing CSV:",e.t0),n.mergeConfigs.onBlur(n.mergeConfigs.name);case 15:case"end":return e.stop()}}),e,null,[[3,11]])})));return function(r){return e.apply(this,arguments)}}()),n.mergeConfigsCache=n.upgradeMergeConfigs(r),n.state={parsedData:[]},n}return r(C,p),n(C,[{key:"mergeConfigs",get:function(){return this.mergeConfigsCache}},{key:"inputValue",get:function(){return this.state.parsedData.length>0?JSON.stringify(this.state.parsedData):""}},{key:"shouldComponentUpdate",value:function(e){return e!==this.props&&(this.mergeConfigsCache=this.upgradeMergeConfigs(e)),!0}},{key:"render",value:function(){var r,n,t=this;return u(f,e(e({},this.mergeConfigs.wrapProps),{},{children:[this.mergeConfigs.downloadSampleUrl&&u(f,{sx:{display:"flex",alignItems:"center",mb:"10px"},children:[s(g,{variant:"subtitle2",component:"span",children:null!==(r=this.mergeConfigs.instructionalText)&&void 0!==r?r:"Metadata file, please fill out the form we provide."}),u(x,{href:this.mergeConfigs.downloadSampleUrl,children:[s("span",{children:" Download sample"}),s(c,{fontSize:"small"})]})]}),s("input",{hidden:!0,name:null===(n=this.props.name)||void 0===n?void 0:n.toString(),type:"text",ref:function(e){return t.refInput=e},defaultValue:""}),s(m,e(e({},this.getTextFieldProps()),{},{inputRef:function(e){return t.refTextFiled=e}}))]}))}}])}();return C}var x=d((function(r){return s(g,e({variant:"subtitle2",component:"a",target:"_blank",download:!0},r))}))({display:"flex",alignItems:"center",color:"var(--color-blue)",cursor:"pointer",fontWeight:600,marginLeft:"6px",gap:"4px","&:hover":{textDecoration:"underline"}});export{C as createInputFileCsvLocalParser};
|
|
2
|
+
//# sourceMappingURL=create.input-file.csv-local-parser.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"create.input-file.csv-local-parser.js","sources":["../../src/form/create.input-file.csv-local-parser.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Box, BoxProps, styled, TextField, TextFieldProps, Typography, TypographyProps } from '@mui/material'\r\nimport DownloadIcon from '@mui/icons-material/Download'\r\nimport { getErrorMessage } from './helpers'\r\nimport { tryParseCsvFileToArray } from '../utils'\r\nimport { IFormBase, IFormInputBase } from './types'\r\n\r\nexport interface IInputFileCsvLocalParserSlots {\r\n /**\r\n * The URL of the sample CSV file that users can download.\r\n * If provided, a \"Download sample\" link will be displayed.\r\n * Example: '/sample.csv' or 'https://example.com/sample.csv'\r\n */\r\n downloadSampleUrl?: string\r\n /**\r\n * Instructional text displayed alongside the download link or file input.\r\n * Useful for guiding users on how to use or fill out the CSV file.\r\n */\r\n instructionalText?: string\r\n /**\r\n * Props to customize the TextField used for uploading the CSV file.\r\n * Allows customization of appearance and behavior (e.g., placeholder, onChange, disabled).\r\n */\r\n textFieldProps?: TextFieldProps\r\n /**\r\n * Props passed to the wrapper element (typically a Box).\r\n * Useful for customizing layout styles such as margin, padding, or display.\r\n */\r\n wrapProps?: BoxProps\r\n /**\r\n * Whether the label should shrink when displayed.\r\n * Defaults to `true` if a label is present to prevent overlap.\r\n * @default true\r\n */\r\n labelShrink?: boolean\r\n}\r\n\r\nexport interface IInputFileCsvLocalParserParams extends IInputFileCsvLocalParserSlots {}\r\n\r\nexport interface IInputFileCsvLocalParserProps<T, C> extends IFormInputBase<T> {\r\n onChange?: (value: C[]) => void\r\n slots?: IInputFileCsvLocalParserSlots\r\n}\r\n\r\nexport interface IInputFileCsvLocalParserState<C> {\r\n parsedData: C[]\r\n}\r\n\r\ntype IPickConfigs<T> = Required<Pick<IFormBase<T>, 'onBlur' | 'messageErrors'>>\r\n\r\ninterface IMergeConfigs<T> extends IPickConfigs<T>, IInputFileCsvLocalParserSlots {\r\n name: keyof T\r\n}\r\n\r\n/**\r\n * Creates a React component that renders a file input specifically for CSV files,\r\n * parses the selected file locally into a structured array, and integrates with a form system.\r\n *\r\n * @template T - The main data model used in the form. Represents the shape of the overall form data.\r\n * @template C - The type of each individual item parsed from the CSV file.\r\n *\r\n * @param params - Optional slot parameters to customize the appearance or behavior of the text field.\r\n * @returns A React component configured for uploading and parsing local CSV files.\r\n */\r\nexport function createInputFileCsvLocalParser<T, C>(params?: IInputFileCsvLocalParserParams): ComponentType<IInputFileCsvLocalParserProps<T, C>> {\r\n class InputFileCsvLocalParser extends Component<IInputFileCsvLocalParserProps<T, C>, IInputFileCsvLocalParserState<C>> {\r\n private mergeConfigsCache: IMergeConfigs<T> = { name: '' as keyof T, onBlur: () => {}, messageErrors: {} }\r\n constructor(props: IInputFileCsvLocalParserProps<T, C>) {\r\n super(props)\r\n this.mergeConfigsCache = this.upgradeMergeConfigs(props)\r\n this.state = { parsedData: [] }\r\n }\r\n\r\n get mergeConfigs(): IMergeConfigs<T> {\r\n return this.mergeConfigsCache\r\n }\r\n\r\n get inputValue() {\r\n return this.state.parsedData.length > 0 ? JSON.stringify(this.state.parsedData) : ''\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IInputFileCsvLocalParserProps<T, C>>): boolean {\r\n if (nextProps !== this.props) this.mergeConfigsCache = this.upgradeMergeConfigs(nextProps)\r\n return true\r\n }\r\n\r\n refInput: HTMLInputElement | null = null\r\n refTextFiled: HTMLInputElement | null = null\r\n render() {\r\n return (\r\n <Box {...this.mergeConfigs.wrapProps}>\r\n {this.mergeConfigs.downloadSampleUrl && (\r\n <Box sx={{ display: 'flex', alignItems: 'center', mb: '10px' }}>\r\n <Typography variant='subtitle2' component='span'>\r\n {this.mergeConfigs.instructionalText ?? 'Metadata file, please fill out the form we provide.'}\r\n </Typography>\r\n <DownloadButton href={this.mergeConfigs.downloadSampleUrl}>\r\n <span> Download sample</span>\r\n <DownloadIcon fontSize='small' />\r\n </DownloadButton>\r\n </Box>\r\n )}\r\n <input hidden name={this.props.name?.toString()} type='text' ref={(ref) => (this.refInput = ref)} defaultValue='' />\r\n <TextField {...this.getTextFieldProps()} inputRef={(ref) => (this.refTextFiled = ref)} />\r\n </Box>\r\n )\r\n }\r\n\r\n getTextFieldProps = (): TextFieldProps => {\r\n const { label } = this.props\r\n const eMessage = getErrorMessage(this.mergeConfigs.messageErrors, this.mergeConfigs.name)\r\n const mergedProps: TextFieldProps = {\r\n label,\r\n error: eMessage.error,\r\n helperText: eMessage.message,\r\n type: 'file',\r\n variant: 'outlined',\r\n fullWidth: true,\r\n onChange: this.handleChange,\r\n inputProps: { accept: 'text/csv' },\r\n InputLabelProps: { shrink: this.mergeConfigs.labelShrink },\r\n ...this.mergeConfigs.textFieldProps\r\n }\r\n return mergedProps\r\n }\r\n\r\n upgradeMergeConfigs = (currentProps: IInputFileCsvLocalParserProps<T, C>): IMergeConfigs<T> => {\r\n const { name, label, onBlur, messageErrors } = currentProps\r\n return {\r\n textFieldProps: Object.assign({}, params?.textFieldProps, currentProps.slots?.textFieldProps),\r\n wrapProps: Object.assign({}, params?.wrapProps, currentProps.slots?.wrapProps),\r\n name: name as keyof T,\r\n onBlur: onBlur || (() => {}),\r\n messageErrors: messageErrors || {},\r\n downloadSampleUrl: currentProps.slots?.downloadSampleUrl ?? params?.downloadSampleUrl,\r\n instructionalText: currentProps.slots?.instructionalText ?? params?.instructionalText,\r\n labelShrink: (currentProps.slots?.labelShrink ?? params?.labelShrink) !== false && !!label\r\n }\r\n }\r\n\r\n handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\r\n const file = e.target.files?.[0]\r\n if (!file) return\r\n try {\r\n const result = await tryParseCsvFileToArray(file)\r\n if (this.refInput) this.refInput.value = JSON.stringify(result)\r\n this.setState({ parsedData: result as C[] }, () => {\r\n this.props.onChange && this.props.onChange(result as C[])\r\n this.mergeConfigs.onBlur(this.mergeConfigs.name)\r\n })\r\n } catch (err) {\r\n console.error('Error parsing CSV:', err)\r\n this.mergeConfigs.onBlur(this.mergeConfigs.name)\r\n }\r\n }\r\n }\r\n return InputFileCsvLocalParser\r\n}\r\n\r\nconst DownloadButton = styled((p: TypographyProps & { href: string }) => (\r\n <Typography variant='subtitle2' component='a' target='_blank' download {...p} />\r\n))({\r\n display: 'flex',\r\n alignItems: 'center',\r\n color: 'var(--color-blue)',\r\n cursor: 'pointer',\r\n fontWeight: 600,\r\n marginLeft: '6px',\r\n gap: '4px',\r\n '&:hover': {\r\n textDecoration: 'underline'\r\n }\r\n})\r\n"],"names":["createInputFileCsvLocalParser","params","InputFileCsvLocalParser","props","_this","_classCallCheck","_callSuper","_defineProperty","name","onBlur","messageErrors","label","eMessage","getErrorMessage","mergeConfigs","_objectSpread","error","helperText","message","type","variant","fullWidth","onChange","handleChange","inputProps","accept","InputLabelProps","shrink","labelShrink","textFieldProps","currentProps","_currentProps$slots","_currentProps$slots2","_currentProps$slots$d","_currentProps$slots3","_currentProps$slots$i","_currentProps$slots4","_currentProps$slots$l","_currentProps$slots5","Object","assign","slots","wrapProps","downloadSampleUrl","instructionalText","_ref","_asyncToGenerator","_regeneratorRuntime","mark","_callee","e","_e$target$files","file","result","wrap","_context","prev","next","target","files","abrupt","tryParseCsvFileToArray","sent","refInput","value","JSON","stringify","setState","parsedData","t0","console","stop","_x","apply","this","arguments","mergeConfigsCache","upgradeMergeConfigs","state","_inherits","Component","_createClass","key","get","length","nextProps","_this$mergeConfigs$in","_this$props$name","_this2","_jsxs","Box","children","sx","display","alignItems","mb","_jsx","Typography","component","DownloadButton","href","DownloadIcon","fontSize","hidden","toString","ref","defaultValue","TextField","getTextFieldProps","inputRef","refTextFiled","styled","p","download","color","cursor","fontWeight","marginLeft","gap","textDecoration"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as e,createClass as r,objectSpread2 as n,classCallCheck as t,callSuper as o,defineProperty as p}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i}from"react/jsx-runtime";import{Component as l}from"react";import{TextField as s}from"@mui/material";import{getErrorMessage as u}from"./
|
|
1
|
+
import{inherits as e,createClass as r,objectSpread2 as n,classCallCheck as t,callSuper as o,defineProperty as p}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i}from"react/jsx-runtime";import{Component as l}from"react";import{TextField as s}from"@mui/material";import{getErrorMessage as u}from"./helpers.js";function a(a){var c=function(){function c(){var e;t(this,c);for(var r=arguments.length,n=new Array(r),i=0;i<r;i++)n[i]=arguments[i];return e=o(this,c,[].concat(n)),p(e,"refInput",null),p(e,"getMergeConfig",(function(){var r,n,t;return{accept:null!==(r=null==a?void 0:a.accept)&&void 0!==r?r:e.props.accept,multiple:null!==(n=null!==(t=null==a?void 0:a.multiple)&&void 0!==t?t:e.props.multiple)&&void 0!==n&&n}})),p(e,"handleChange",(function(r){e.props.name&&e.props.onBlur&&e.props.onBlur(e.props.name)})),p(e,"isExploreOpen",!1),p(e,"handleClick",(function(r){e.isExploreOpen=!0})),p(e,"handleFocus",(function(r){if(!0===e.isExploreOpen){if(e.isExploreOpen=!1,!e.props.name)return;e.props.onBlur&&e.props.onBlur(e.props.name),setTimeout((function(){e.refInput&&e.refInput.blur()}),50)}})),e}return e(c,l),r(c,[{key:"render",value:function(){var e,r,t=this,o=u(this.props.messageErrors,this.props.name),p=this.getMergeConfig();return i(s,n(n({inputRef:function(e){return t.refInput=e},name:null===(e=this.props.name)||void 0===e?void 0:e.toString(),error:o.error,helperText:o.message,variant:"outlined",type:"file",fullWidth:!0,onChange:this.handleChange,onClick:this.handleClick,onFocus:this.handleFocus},this.props.textFieldProps),{},{inputProps:n({accept:p.accept,multiple:p.multiple},null===(r=this.props.textFieldProps)||void 0===r?void 0:r.inputProps)}))}}])}();return c}export{a as default};
|
|
2
2
|
//# sourceMappingURL=create.input.file.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.input.file.js","sources":["../../src/form/create.input.file.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { TextField, TextFieldProps } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './
|
|
1
|
+
{"version":3,"file":"create.input.file.js","sources":["../../src/form/create.input.file.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { TextField, TextFieldProps } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\n\r\nexport interface IInputFileProps<T> extends IFormInputBase<T> {\r\n accept?: string\r\n multiple?: boolean\r\n textFieldProps?: TextFieldProps\r\n}\r\n\r\nexport interface IInputFileState {}\r\n\r\nexport interface IInputFileParams {\r\n accept?: string\r\n multiple?: boolean\r\n}\r\n\r\nfunction CreateInputFile<T>(params?: IInputFileParams): ComponentType<IFormInputBase<T>> {\r\n class FormInputFile extends Component<IInputFileProps<T>, IInputFileState> {\r\n refInput: HTMLInputElement | null = null\r\n\r\n render() {\r\n const eMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n const configs = this.getMergeConfig()\r\n return (\r\n <TextField\r\n inputRef={(ref) => (this.refInput = ref)}\r\n name={this.props.name?.toString()}\r\n error={eMessage.error}\r\n helperText={eMessage.message}\r\n variant='outlined'\r\n type='file'\r\n fullWidth\r\n onChange={this.handleChange}\r\n onClick={this.handleClick}\r\n onFocus={this.handleFocus}\r\n {...this.props.textFieldProps}\r\n inputProps={{\r\n accept: configs.accept,\r\n multiple: configs.multiple,\r\n ...this.props.textFieldProps?.inputProps\r\n }}\r\n />\r\n )\r\n }\r\n\r\n getMergeConfig = () => ({\r\n accept: params?.accept ?? this.props.accept,\r\n multiple: params?.multiple ?? this.props.multiple ?? false\r\n })\r\n\r\n handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n }\r\n\r\n isExploreOpen = false\r\n\r\n handleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {\r\n this.isExploreOpen = true\r\n }\r\n\r\n handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {\r\n if (this.isExploreOpen === true) {\r\n this.isExploreOpen = false\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n setTimeout(() => {\r\n this.refInput && this.refInput.blur()\r\n }, 50)\r\n }\r\n }\r\n }\r\n return FormInputFile\r\n}\r\n\r\nexport default CreateInputFile\r\n"],"names":["CreateInputFile","params","FormInputFile","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","_params$accept","_ref","_params$multiple","accept","props","multiple","e","name","onBlur","isExploreOpen","setTimeout","refInput","blur","_inherits","Component","_createClass","key","value","_this$props$name","_this$props$textField","_this2","eMessage","getErrorMessage","messageErrors","configs","getMergeConfig","_jsx","TextField","_objectSpread","inputRef","ref","toString","error","helperText","message","variant","type","fullWidth","onChange","handleChange","onClick","handleClick","onFocus","handleFocus","textFieldProps","inputProps"],"mappings":"kUAkBA,SAASA,EAAmBC,GAAyB,IAC7CC,aAAc,SAAAA,IAAA,IAAAC,EAAAC,OAAAF,GAAA,IAAA,IAAAG,EAAAC,UAAAC,OAAAC,EAAAC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GAqDjB,OArDiBP,EAAAQ,EAAAC,KAAAV,EAAAW,GAAAA,OAAAL,IAAAM,EAAAX,EAAA,WACkB,MAAIW,EAAAX,EA2BvB,kBAAA,WAAA,IAAAY,EAAAC,EAAAC,EAAA,MAAO,CACtBC,OAAsBH,QAAhBA,EAAEd,eAAAA,EAAQiB,kBAAMH,EAAAA,EAAIZ,EAAKgB,MAAMD,OACrCE,SAAiDJ,QAAzCA,EAAkB,QAAlBC,EAAEhB,aAAM,EAANA,EAAQmB,gBAAQH,IAAAA,EAAAA,EAAId,EAAKgB,MAAMC,gBAAQJ,IAAAA,GAAAA,MACjDF,EAAAX,EAEyD,gBAAA,SAACkB,GACrDlB,EAAKgB,MAAMG,MAChBnB,EAAKgB,MAAMI,QAAUpB,EAAKgB,MAAMI,OAAOpB,EAAKgB,MAAMG,SACnDR,EAAAX,EAAA,iBAEe,GAAKW,EAAAX,EAEkC,eAAA,SAACkB,GACtDlB,EAAKqB,eAAgB,KACtBV,EAAAX,EAEwD,eAAA,SAACkB,GACxD,IAA2B,IAAvBlB,EAAKqB,cAAwB,CAE/B,GADArB,EAAKqB,eAAgB,GAChBrB,EAAKgB,MAAMG,KAAM,OACtBnB,EAAKgB,MAAMI,QAAUpB,EAAKgB,MAAMI,OAAOpB,EAAKgB,MAAMG,MAClDG,YAAW,WACTtB,EAAKuB,UAAYvB,EAAKuB,SAASC,MAChC,GAAE,GACJ,KACFxB,CAAA,CAAA,OAAAyB,EAAA1B,EArDyB2B,GAqDzBC,EAAA5B,EAAA,CAAA,CAAA6B,IAAA,SAAAC,MAlDD,WAAM,IAAAC,EAAAC,EAAAC,EAAAvB,KACEwB,EAAWC,EAAgBzB,KAAKO,MAAMmB,cAAe1B,KAAKO,MAAMG,MAChEiB,EAAU3B,KAAK4B,iBACrB,OACEC,EAACC,EAASC,EAAAA,EAAA,CACRC,SAAU,SAACC,GAAG,OAAMV,EAAKT,SAAWmB,CAAI,EACxCvB,KAAqB,QAAjBW,EAAErB,KAAKO,MAAMG,YAAXW,IAAeA,OAAfA,EAAAA,EAAiBa,WACvBC,MAAOX,EAASW,MAChBC,WAAYZ,EAASa,QACrBC,QAAQ,WACRC,KAAK,OACLC,WACA,EAAAC,SAAUzC,KAAK0C,aACfC,QAAS3C,KAAK4C,YACdC,QAAS7C,KAAK8C,aACV9C,KAAKO,MAAMwC,gBAAc,CAAA,EAAA,CAC7BC,WAAUjB,EAAA,CACRzB,OAAQqB,EAAQrB,OAChBE,SAAUmB,EAAQnB,UACU,QADFc,EACvBtB,KAAKO,MAAMwC,sBAAc,IAAAzB,OAAA,EAAzBA,EAA2B0B,cAItC,IAAC,IA6BH,OAAO1D,CACT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as e,createClass as t,objectSpread2 as r,classCallCheck as o,callSuper as a,defineProperty as n,objectWithoutProperties as i,asyncToGenerator as l,regeneratorRuntime as s}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as p,jsx as u,Fragment as d}from"react/jsx-runtime";import{Component as c}from"react";import{styled as m,Box as h,TextField as v,InputAdornment as f,IconButton as g,Collapse as b,CircularProgress as x}from"@mui/material";import S from"@mui/icons-material/ContentPaste";import{mergeObjects as j}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"react-router-dom";import"../utils/query-param.js";import{getErrorMessage as k}from"./
|
|
1
|
+
import{inherits as e,createClass as t,objectSpread2 as r,classCallCheck as o,callSuper as a,defineProperty as n,objectWithoutProperties as i,asyncToGenerator as l,regeneratorRuntime as s}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as p,jsx as u,Fragment as d}from"react/jsx-runtime";import{Component as c}from"react";import{styled as m,Box as h,TextField as v,InputAdornment as f,IconButton as g,Collapse as b,CircularProgress as x}from"@mui/material";import S from"@mui/icons-material/ContentPaste";import{mergeObjects as j}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"react-router-dom";import"../utils/query-param.js";import{getErrorMessage as k}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 y from"../components/image-with-fallback.js";import"../components/help-tooltip.js";import"../components/text-editor.js";var P=["srcGetter","element","alt","fallbackSrc","debounceDelay"],C=function(m){return function(){function x(e){var t,p;return o(this,x),p=a(this,x,[e]),n(p,"_cachedSlots",{}),n(p,"mapTextFieldProps",(function(){var e,t,o,a,n=k(p.props.messageErrors,p.props.name),i={fullWidth:!0,variant:"outlined",name:null===(e=p.props.name)||void 0===e?void 0:e.toString(),error:n.error,helperText:n.message,disabled:p.props.disabled,onBlur:function(){p.props.name&&p.props.onBlur&&p.props.onBlur(p.props.name)},label:p.getLabel(),placeholder:p.props.placeholder,InputLabelProps:p.state.value?{shrink:!0}:{},value:null!==(t=p.state.value)&&void 0!==t?t:"",onChange:p.handleChange};return!0===p.slots.pastenable&&(i.InputProps={endAdornment:u(f,{position:"end",children:u(g,{onClick:p.handlePaste,edge:"end",children:u(S,{})})})}),null!==(o=p.slots)&&void 0!==o&&o.maxLength&&(i.inputProps=r(r({},i.inputProps),{},{maxLength:p.slots.maxLength})),j({},i,null===(a=p.slots)||void 0===a?void 0:a.textFieldProps)})),n(p,"renderImageSide",(function(e){var t,o="left"===e?p.slots.imageLeft:p.slots.imageRight;if(!o)return u(d,{});var a=o.srcGetter,n=o.element,l=o.alt,s=void 0===l?"input-image":l,c=o.fallbackSrc,m=void 0===c?"":c,h=o.debounceDelay,v=void 0===h?700:h,f=i(o,P);if(n)return u(w,{children:u(n,{value:p.state.value,model:p.props.data})});var g=a?a(p.state.value,p.props.data):null!==(t=f.src)&&void 0!==t?t:p.state.value,x={src:g,alt:s,fallbackSrc:m,debounceDelay:v};return u(b,{sx:{mx:"10px"},in:!!g,unmountOnExit:!0,orientation:"horizontal",children:u(w,{children:u(y,r(r(r({},f),x),{},{loading:u(L,{})}))})})})),n(p,"mergeSlots",(function(e){var t=j({},m,e),o=t.imageLeft,a=t.imageRight;return null!=o&&o.mirror&&!a?(t.imageRight=r({},o),delete t.imageRight.mirror):null!=a&&a.mirror&&!o&&(t.imageLeft=r({},a),delete t.imageLeft.mirror),t})),n(p,"getLabel",(function(){var e,t,r;if(p.props.label)return null!==(e=p.slots)&&void 0!==e&&e.maxLength?"".concat(p.props.label," (").concat(null!==(t=null===(r=p.state.value)||void 0===r?void 0:r.length)&&void 0!==t?t:0,"/").concat(p.slots.maxLength,")"):p.props.label})),n(p,"handleChange",(function(e){p.setState((function(t){return r(r({},t),{},{value:e.target.value})}))})),n(p,"handlePaste",l(s().mark((function e(){var t;return s().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,navigator.clipboard.readText();case 3:t=e.sent,p.setState({value:t}),e.next=10;break;case 7:e.prev=7,e.t0=e.catch(0),console.error("Error clipboard:",e.t0);case 10:case"end":return e.stop()}}),e,null,[[0,7]])})))),p._cachedSlots=null!==(t=p.mergeSlots(e.slots))&&void 0!==t?t:{},p.state={value:p.defaulValue},p}return e(x,c),t(x,[{key:"slots",get:function(){return this._cachedSlots}},{key:"defaulValue",get:function(){var e,t,r=this.props,o=r.data,a=r.name;return null!==(e=this.props.defaultValue)&&void 0!==e?e:o&&a?null===(t=o[a])||void 0===t?void 0:t.toString():void 0}},{key:"componentDidUpdate",value:function(e){e.slots!==this.props.slots&&(this._cachedSlots=this.mergeSlots(this.props.slots))}},{key:"shouldComponentUpdate",value:function(e){var t=this.props,r=t.name;t.slots;if(r){var o,a,n,i,l=null!==(o=null===(a=this.props.data)||void 0===a||null===(a=a[r])||void 0===a?void 0:a.toString())&&void 0!==o?o:"",s=null!==(n=null===(i=e.data)||void 0===i||null===(i=i[r])||void 0===i?void 0:i.toString())&&void 0!==n?n:"";if(l!==s)return this.setState({value:s}),!1}return e.slots,!0}},{key:"render",value:function(){var e;return p(h,{sx:{display:"flex",alignItems:"center"},children:[!!this.props.disabled&&u("input",{hidden:!0,name:null===(e=this.props.name)||void 0===e?void 0:e.toString(),defaultValue:this.defaulValue}),this.renderImageSide("left"),u(v,r({},this.mapTextFieldProps())),this.renderImageSide("right")]})}}])}()},L=function(){return u("div",{children:u(x,{size:24})})},w=m(h)({fontSize:"1rem",height:"var(--input-base-image-size, 54px)",width:"var(--input-base-image-size, 54px)",position:"relative",borderRadius:"8px",boxShadow:"rgba(0, 0, 0, 0.16) 0px 1px 4px",overflow:"hidden","& > img":{position:"absolute",top:0,left:0,backgroundRepeat:"no-repeat",height:"100%",width:"100%",backgroundSize:"contain"},"& > div":{position:"absolute",top:0,left:0,height:"100%",width:"100%",background:"#fafafa",zIndex:1,display:"flex",alignItems:"center",justifyContent:"center"}});export{C as default};
|
|
2
2
|
//# sourceMappingURL=create.input.js.map
|