Merge pull request #179 from MeasureAuthoringTool/MAT-5727/fixCanEdit

fixed can edit

Author: sb-prateekkeerthi

react/components/DateField/DateField.jsx

@@ -39,7 +39,7 @@ export const dateTextFieldStyle = {
     },
 };
 
-const DateField = ({ label, value, handleDateChange }) => {
+const DateField = ({ label, value, handleDateChange, disabled }) => {
     return (
         <LocalizationProvider dateAdapter={AdapterDayjs}>
             <InputLabel
@@ -66,6 +66,7 @@ const DateField = ({ label, value, handleDateChange }) => {
             <DatePicker
                 value={value ? value : null}
                 onChange={handleDateChange}
+                disabled={disabled}
                 slotProps={{
                     textField: {
                         id: "date",
@@ -80,6 +81,7 @@ DateField.propTypes = {
     label: PropTypes.string.isRequired,
     value: PropTypes.object,
     handleDateChange: PropTypes.func.isRequired,
+    disabled:PropTypes.bool
 };
 
 export default DateField;

react/components/DateField/DateField.stories.jsx

@@ -16,6 +16,7 @@ export const DateFieldComponent = (args) => {
     return (
         <div className="qpp-u-padding--16">
             <DateField
+                disabled={false}
                 label="Status Date"
                 handleDateChange={handleDateChange}
                 value={value}

react/components/DateTimeField/DateTimeField.jsx

@@ -40,7 +40,8 @@ export const dateTimeTextFieldStyle = {
     },
 };
 
-const DateTimeField = ({ label, dateTimeValue, handleDateTimeChange }) => {
+const DateTimeField = ({ label, dateTimeValue, handleDateTimeChange,disabled }) => {
+    console.log(disabled)
     return (
         <FormControl>
             <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -54,6 +55,7 @@ const DateTimeField = ({ label, dateTimeValue, handleDateTimeChange }) => {
                     value={dateTimeValue ? dateTimeValue : null}
                     onChange={handleDateTimeChange}
                     views={["year", "day", "hours", "minutes"]}
+                    disabled={disabled}
                     slotProps={{
                         textField: {
                             id: "dateTime",
@@ -69,6 +71,7 @@ DateTimeField.propTypes = {
     dateTimeValue: PropTypes.object,
     handleDateTimeChange: PropTypes.func.isRequired,
     label: PropTypes.string.isRequired,
+    disabled:PropTypes.bool
 };
 
 export default DateTimeField;

react/components/DateTimeField/DateTimeField.stories.jsx

@@ -17,6 +17,7 @@ export const TimeDateFieldComponent = (args) => {
     return (
         <div className="qpp-u-padding--16">
             <DateTimeField
+                disabled={true}
                 label="Status Date/Time"
                 handlDateTimeChange={handlDateTimeChange}
                 dateTimeValue={value}

react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@madie/madie-design-system",
-    "version": "1.0.50",
+    "version": "1.0.51",
     "description": "Shared style guide across the Madie program.",
     "main": "dist/index.js",
     "homepage": "https://github.com/MeasureAuthoringTool/madie-design-system",

react/test/components/DateField.test.js

@@ -15,6 +15,7 @@ describe("DateField", () => {
                     label="Status Date"
                     value={dayjs("2022-04-17")}
                     handleDateChange={() => console.log("Status Date")}
+                    disabled={false}
                 />
             );
 

react/test/components/DateTimeField.test.js

@@ -17,6 +17,7 @@ describe("DateTimeField", () => {
                     handleDateTimeChange={() => {
                         return;
                     }}
+                    disabled={false}
                 />
             );