dinocollab-core 1.0.11 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
**DinoCore** là một tập hợp các thành phần và công cụ hỗ trợ với TypeScript + React. Cung cấp thành phần thiết yếu như: form, table, api global,...
|
|
4
4
|
|
|
5
|
+
## 📥 Cài đặt
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
npm install dinocollab-core@latest
|
|
9
|
+
```
|
|
10
|
+
|
|
5
11
|
## 📥 Cài đặt các thư viện phụ thuộc
|
|
6
12
|
|
|
7
13
|
```
|
|
@@ -67,7 +73,7 @@ npm publish
|
|
|
67
73
|
| `npm version minor` | Tăng `MINOR` (ví dụ: `1.2.3` → `1.3.0`) |
|
|
68
74
|
| `npm version major` | Tăng `MAJOR` (ví dụ: `1.2.3` → `2.0.0`) |
|
|
69
75
|
|
|
70
|
-
|
|
76
|
+
> 💡 Mỗi lệnh npm version sẽ tự động cập nhật package.json.
|
|
71
77
|
|
|
72
78
|
Bạn có thể thêm tuỳ chọn --no-git-tag-version nếu không muốn tạo git tag:
|
|
73
79
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e,inherits as t,createClass as
|
|
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"./helper.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 } 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 labelSwitch: 'DateExpired-labelSwitch',\r\n input: 'DateExpired-input',\r\n switch: 'DateExpired-switch'\r\n}\r\n\r\nexport interface IDateExpiredSlots<T> {\r\n /** @default string */\r\n type?: 'number' | 'string'\r\n textFieldProps?: Partial<TextFieldProps>\r\n switchChecked?: boolean\r\n switchCheckedGetter?: (value: any, model?: Partial<T>) => boolean\r\n}\r\n\r\nexport interface IDateExpiredProps<T> extends IFormInputBase<T> {\r\n slots?: IDateExpiredSlots<T>\r\n}\r\n\r\nexport interface IDateExpiredState {\r\n numberOfDays: number\r\n switchChecked: boolean\r\n}\r\n\r\nfunction CreateDateExpired<T>(params?: IDateExpiredSlots<T>): React.ComponentType<IDateExpiredProps<T>> {\r\n class DateExpired extends Component<IDateExpiredProps<T>, IDateExpiredState> {\r\n defaultNumberOfDays: number = 30\r\n private id\r\n constructor(props: IDateExpiredProps<T>) {\r\n super(props)\r\n this.state = {\r\n numberOfDays: this.getNumberOfDays(),\r\n switchChecked: this.slots.switchChecked\r\n }\r\n this.id = new Date().getTime().toString()\r\n }\r\n\r\n get slots(): IDateExpiredSlots<T> & { switchChecked: boolean } {\r\n const { switchChecked, switchCheckedGetter } = this.props.slots ?? {}\r\n const obj = mergeObjects(params, this.props.slots)\r\n let check = (this.defaulValue ? !!this.defaulValue : switchChecked) ?? true\r\n if (switchCheckedGetter) check = switchCheckedGetter(this.defaulValue, this.props.data)\r\n return { ...obj, switchChecked: check }\r\n }\r\n\r\n get defaulValue(): string {\r\n const { data, name } = this.props\r\n return this.props.defaultValue ?? (!!data && !!name ? data[name]?.toString() : undefined)\r\n }\r\n\r\n get defaultValueInput(): string | number {\r\n if (this.slots.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 getNumberOfDays = (): number => {\r\n if (this.slots.type === 'number') {\r\n return tryParseIntRequired(this.defaulValue, this.defaultNumberOfDays)\r\n } else {\r\n return this.getDaysUntilDate(this.defaulValue, this.defaultNumberOfDays)\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={dateExpiredClasses.root}>\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 />\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.slots.textFieldProps)\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 }\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: '#1976d2',\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})\r\n"],"names":["dateExpiredClasses","CreateDateExpired","params","DateExpired","props","_this","_classCallCheck","_callSuper","_defineProperty","slots","type","tryParseIntRequired","defaulValue","defaultNumberOfDays","getDaysUntilDate","_this$props","messageErrors","name","onBlur","disabled","state","switchChecked","obj","fullWidth","className","label","_jsxs","children","_jsx","getOffsetDate","numberOfDays","variant","value","onChange","handleChange","_temp$message","temp","getErrorMessage","error","Boolean","helperText","message","mergeObjects","textFieldProps","e","target","parseInt","setState","num","formatString","arguments","length","undefined","dayjsCustom","add","format","defaultValue","today","diff","Math","round","_unused","getNumberOfDays","id","Date","getTime","toString","_inherits","Component","_createClass","key","get","_this$props$slots","_ref2","_ref","this","switchCheckedGetter","check","data","_objectSpread","_this$props$defaultVa","_data$name","_this$props2","_this$props$name","_this2","LocalizationProvider","dateAdapter","AdapterDayjs","Wrap","hidden","defaultValueInput","TextField","mapTextFieldProps","Typography","component","htmlFor","sx","color","Switch","size","checked","_","styled","Box","display","alignItems","gap","position","concat","margin","flex","b","marginLeft","fontWeight","cursor","top","right","height","paddingRight"],"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 './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":"8rBAQA,IAEMA,EACE,mBADFA,EAEK,sBAFLA,EAGG,oBAHHA,EAIK,sBAJLA,EAKS,0BALTA,EAMG,oBANHA,EAOI,qBA2BV,SAASC,EAAqBC,GAAkB,IACxCC,aAIJ,SAAAA,EAAYC,GAAgB,IAAAC,EAAAC,EAOe,OAPfC,OAAAJ,GAC1BG,EAAAE,EAAAL,KAAAA,GAAMC,IAAMK,EAAAH,EAAA,sBAJgB,IA4D9BG,EAAAH,EAAA,qBAEoB,WAClB,IAAAI,EAAwCJ,EAAKF,MAArCO,EAAaD,EAAbC,cAAeC,EAAIF,EAAJE,KAAMC,EAAMH,EAANG,OACvBC,EAAWR,EAAKF,MAAMU,WAAaR,EAAKS,MAAMC,cAC9CC,EAAsB,CAC1BC,WAAW,EACXC,UAAWnB,EACXoB,MACEC,EAAM,OAAA,CAAAF,UAAWnB,EAEdsB,SAAA,CAAA,cAAAhB,EAAKS,MAAMC,eAAiBO,EAAA,IAAA,CAAAD,SAAIhB,EAAKkB,cAAclB,EAAKS,MAAMU,mBAGnEC,QAAS,WACTC,KAAM,SACNb,SAAUA,EACVc,MAAOtB,EAAKS,MAAMC,cAAgBV,EAAKS,MAAMU,aAAe,EAC5DI,SAAUvB,EAAKwB,cAEjB,GAAMlB,EAAM,CACVK,EAAIJ,OAAS,WAAA,OAAMA,GAAUA,EAAOD,EAAK,EACzC,IACgBmB,EADVC,EAAOC,EAAgBtB,EAAeC,GAC5C,GAAIoB,EAAKE,MACPjB,EAAIiB,MAAQC,QAAQH,EAAKE,OACzBjB,EAAImB,WAAyBL,QAAfA,EAAGC,EAAKK,eAAON,IAAAA,EAAAA,EAAI,EAEpC,CACD,OAAOO,EAA6B,CAAA,EAAIrB,EAAKX,EAAKiC,YAAYC,mBAC/D/B,EAAAH,EAoBc,gBAAA,SAACmC,GACd,IAAMhB,EAAyC,IAAlBgB,EAAEC,OAAOd,MAAce,SAASF,EAAEC,OAAOd,OAAS,EAC/EtB,EAAKsC,SAAS,CAAEnB,aAAAA,IAAgB,WAC9B,IAAMoB,EAAMZ,EAAgB3B,EAAKF,MAAMO,cAAeL,EAAKF,MAAMQ,MAC7Da,EAAe,GAAKoB,EAAIX,OAAO5B,EAAKiC,YAAYO,YACtD,OACDrC,EAAAH,EAAA,kBAEgB,WACf,IAAMyC,EAAU,CAAC/C,GAEjB,OADIM,EAAKS,MAAMU,aAAe,GAAGsB,EAAQC,KAAKhD,GACvC+C,EAAQE,KAAK,QACrBxC,EAAAH,EAAA,mBAEiB,WAChB,MAA8B,WAA1BA,EAAKiC,YAAYZ,KACZuB,EAAoB5C,EAAKiC,YAAYY,YAAa7C,EAAK8C,qBAEvD9C,EAAK+C,iBAAiB/C,EAAKiC,YAAYY,YAAa7C,EAAK8C,wBAEnE3C,EAAAH,EAEe,iBAAA,SAACgD,GAA2D,IAA9CC,EAAYC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAzKlB,aA0KtB,OAAOG,IAAcC,IAAIN,EAAK,OAAOO,OAAON,MAC7C9C,EAAAH,EAEkB,oBAAA,SAACsB,GAA4C,IAA5BkC,EAAYN,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,EACjD,IACE,IAAK5B,EAAO,OAAOkC,EACnB,IAAMpB,EAASiB,EAAY/B,GACrBmC,EAAQJ,IACRK,EAAOtB,EAAOsB,KAAKD,EAAO,OAAO,GACvC,OAAOE,KAAKC,MAAMF,EACnB,CAAC,MAAAG,GACA,OAAOL,CACR,KA3IDxD,EAAK8D,kBAAuD/D,QAAtCA,EAAGC,EAAK+D,kBAAkBjE,EAAMkE,kBAAMjE,EAAAA,EAAI,CAAE,EAClEC,EAAKS,MAAQ,CACXU,aAAcnB,EAAKiE,kBACnBvD,cAAeV,EAAKiC,YAAYvB,eAElCV,EAAKkE,IAAK,IAAIC,MAAOC,UAAUC,WAAUrE,CAC3C,CAAC,OAAAsE,EAAAzE,EAZuB0E,GAYvBC,EAAA3E,EAAA,CAAA,CAAA4E,IAAA,cAAAC,IAED,WACE,OAAOC,KAAKb,iBACd,GAAC,CAAAW,IAAA,oBAAAC,IAED,WACE,MAA8B,WAA1BC,KAAK1C,YAAYZ,KACZsD,KAAKlE,MAAMU,aAEXwD,KAAKzD,cAAcyD,KAAKlE,MAAMU,aAAc,2BAEvD,GAAC,CAAAsD,IAAA,qBAAAnD,MAED,SAAmBsD,GACbA,EAAUZ,QAAUW,KAAK7E,MAAMkE,OAASY,EAAUC,OAASF,KAAK7E,MAAM+E,OACxEF,KAAKb,kBAAoBa,KAAKZ,kBAAkBY,KAAK7E,MAAMkE,OAE/D,GAEA,CAAAS,IAAA,SAAAnD,MACA,WAAM,IAAAwD,EAAAC,EAAAJ,KACJ,OACE1D,EAAC+D,GAAqBC,YAAaC,EACjClE,SAAAD,EAACoE,EAAI,CAACtE,UAAW8D,KAAKS,2BACpBnE,EAAoC,QAAA,CAAAI,KAAK,OAAOgE,QAAM,EAAC/E,KAAqB,QAAjBwE,EAAEH,KAAK7E,MAAMQ,YAAXwE,IAAeA,OAAfA,EAAAA,EAAiBT,WAAYb,aAAcmB,KAAKW,mBAAjGX,KAAKW,mBACjBrE,EAACsE,EAASC,KAAKb,KAAKc,sBACpB1E,EAAA,MAAA,CAAKF,UAAWnB,EAA0BsB,SAAA,CACxCC,EAACyE,EAAUF,EAAAA,EAAA,CACTpE,QAAQ,UACRP,UAAWnB,GACP,CAAEiG,UAAW,QAASC,QAASjB,KAAKT,KAAI,CAAA,EAAA,CAC5C2B,GAAI,CAAEC,MAAOnB,KAAKlE,MAAMC,cAAgB,eAAiB,WAAWM,SAEnE2D,KAAKlE,MAAMC,cAAgB,sBAAwB,mBAEtDO,EAAC8E,EAAMP,EAAA,CACLtB,GAAIS,KAAKT,GACT8B,KAAK,QACLF,MAAM,UACNG,QAAStB,KAAKlE,MAAMC,cACpBa,SAAU,SAAC2E,EAAGD,GAAO,OAAKlB,EAAKzC,SAAS,CAAE5B,cAAeuF,GAAU,GAC/DtB,KAAK1C,YAAYkE,qBAMjC,GAAC,CAAA1B,IAAA,oBAAAnD,MAgCD,SAAkB8E,GAAwB,IAAAC,EACxCC,EAA+CF,QAAAA,EAAgB,CAAE,EAAzD1F,EAAa4F,EAAb5F,cAAe6F,EAAmBD,EAAnBC,oBACjB5F,EAAMqB,EAAapC,EAAQwG,GACjCI,EAA6C7B,KAAK7E,MAA1C+E,EAAI2B,EAAJ3B,KAAMvE,EAAIkG,EAAJlG,KAAMC,EAAMiG,EAANjG,OAAQiD,EAAYgD,EAAZhD,aACtBiD,EAASjD,QAAAA,EAAmBqB,GAAUvE,EAAiB+F,QAAbA,EAAGxB,EAAKvE,UAAL+F,IAAUA,OAAVA,EAAAA,EAAYhC,gBAAajB,EACxEsD,IAAS7B,MAAiB4B,KAAY/F,GAE1C,OADI6F,IAAqBG,EAAQH,EAAoBE,EAAQ5B,IAC7DW,EAAAA,EAAA,CAAA,EACK7E,GAAG,CAAA,EAAA,CACND,cAAegG,EACf7D,YAAa4D,EACbjE,WAAY,WACLlC,GAASC,GACdA,EAAOD,EACT,GAEJ,IAAC,IAwCH,OAAOT,CACT,CAGA,IAAMsF,EAAOwB,EAAOC,EAAPD,CAAWxG,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACtB0G,QAAS,OACTC,WAAY,SACZC,IAAK,OACLC,SAAU,YAAU,IAAAC,OACfvH,GAA8B,CACjCwH,OAAQ,EACRC,KAAM,iBACPF,OACIvH,GAA6B,CAChC0H,EAAG,CACDtB,MAAOuB,EAAOC,KAAK,KACnBC,WAAY,aAEfN,OACIvH,GAAmC,CACtC8H,WAAY,IACZC,OAAQ,gBACTR,OACIvH,GAA+B,CAClCsH,SAAU,WACVU,IAAK,EACLC,MAAO,EACPC,OAAQ,OACRf,QAAS,OACTC,WAAY,eACbG,OACIvH,GAA6B,CAChC,sBAAuB,CACrBmI,aAAc,WAEjBZ,KAAAA,OACKvH,GAA0BS,EAAA,CAAA,EAAA,IAAA8G,OACzBvH,GAA6B,CAChC0H,EAAG,CACDtB,MAAOuB,EAAOS,IAAI"}
|
|
@@ -1,19 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { TextFieldProps } from '@mui/material';
|
|
2
|
+
import { TextFieldProps, SwitchProps } from '@mui/material';
|
|
3
3
|
import { IFormInputBase } from './types';
|
|
4
|
-
|
|
4
|
+
interface ISlots<T> {
|
|
5
5
|
/** @default string */
|
|
6
6
|
type?: 'number' | 'string';
|
|
7
7
|
textFieldProps?: Partial<TextFieldProps>;
|
|
8
|
+
switchProps?: SwitchProps;
|
|
8
9
|
switchChecked?: boolean;
|
|
9
10
|
switchCheckedGetter?: (value: any, model?: Partial<T>) => boolean;
|
|
10
11
|
}
|
|
11
|
-
|
|
12
|
-
slots?:
|
|
12
|
+
interface IProps<T> extends IFormInputBase<T> {
|
|
13
|
+
slots?: ISlots<T>;
|
|
13
14
|
}
|
|
14
|
-
|
|
15
|
-
numberOfDays: number;
|
|
16
|
-
switchChecked: boolean;
|
|
17
|
-
}
|
|
18
|
-
declare function CreateDateExpired<T>(params?: IDateExpiredSlots<T>): React.ComponentType<IDateExpiredProps<T>>;
|
|
15
|
+
declare function CreateDateExpired<T>(params?: ISlots<T>): React.ComponentType<IProps<T>>;
|
|
19
16
|
export default CreateDateExpired;
|