(Component: React.ComponentType
) => {\n const WithUtils: React.SFC> = props => {\n const utils = useUtils();\n return ;\n };\n\n WithUtils.displayName = `WithUtils(${Component.displayName || Component.name})`;\n return WithUtils;\n};\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport Day from './Day';\nimport DayWrapper from './DayWrapper';\nimport CalendarHeader from './CalendarHeader';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport SlideTransition, { SlideDirection } from './SlideTransition';\nimport { Theme } from '@material-ui/core/styles';\nimport { VariantContext } from '../../wrappers/Wrapper';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { runKeyHandler } from '../../_shared/hooks/useKeyDown';\nimport { IconButtonProps } from '@material-ui/core/IconButton';\nimport { withStyles, WithStyles } from '@material-ui/core/styles';\nimport { findClosestEnabledDate } from '../../_helpers/date-utils';\nimport { withUtils, WithUtilsProps } from '../../_shared/WithUtils';\n\nexport interface OutterCalendarProps {\n /** Left arrow icon */\n leftArrowIcon?: React.ReactNode;\n /** Right arrow icon */\n rightArrowIcon?: React.ReactNode;\n /** Custom renderer for day @DateIOType */\n renderDay?: (\n day: MaterialUiPickersDate,\n selectedDate: MaterialUiPickersDate,\n dayInCurrentMonth: boolean,\n dayComponent: JSX.Element\n ) => JSX.Element;\n /**\n * Enables keyboard listener for moving between days in calendar\n * @default true\n */\n allowKeyboardControl?: boolean;\n /**\n * Props to pass to left arrow button\n * @type {Partial}\n */\n leftArrowButtonProps?: Partial;\n /**\n * Props to pass to right arrow button\n * @type {Partial}\n */\n rightArrowButtonProps?: Partial;\n /** Disable specific date @DateIOType */\n shouldDisableDate?: (day: MaterialUiPickersDate) => boolean;\n /** Callback firing on month change. Return promise to render spinner till it will not be resolved @DateIOType */\n onMonthChange?: (date: MaterialUiPickersDate) => void | Promise;\n /** Custom loading indicator */\n loadingIndicator?: JSX.Element;\n}\n\nexport interface CalendarProps\n extends OutterCalendarProps,\n WithUtilsProps,\n WithStyles {\n /** Calendar Date @DateIOType */\n date: MaterialUiPickersDate;\n /** Calendar onChange */\n onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;\n /** Min date @DateIOType */\n minDate?: MaterialUiPickersDate;\n /** Max date @DateIOType */\n maxDate?: MaterialUiPickersDate;\n /** Disable past dates */\n disablePast?: boolean;\n /** Disable future dates */\n disableFuture?: boolean;\n}\n\nexport interface CalendarState {\n slideDirection: SlideDirection;\n currentMonth: MaterialUiPickersDate;\n lastDate?: MaterialUiPickersDate;\n loadingQueue: number;\n}\n\nconst KeyDownListener = ({ onKeyDown }: { onKeyDown: (e: KeyboardEvent) => void }) => {\n React.useEffect(() => {\n window.addEventListener('keydown', onKeyDown);\n return () => {\n window.removeEventListener('keydown', onKeyDown);\n };\n }, [onKeyDown]);\n\n return null;\n};\n\nexport class Calendar extends React.Component {\n static contextType = VariantContext;\n static propTypes: any = {\n renderDay: PropTypes.func,\n shouldDisableDate: PropTypes.func,\n allowKeyboardControl: PropTypes.bool,\n };\n\n static defaultProps: Partial = {\n minDate: new Date('1900-01-01'),\n maxDate: new Date('2100-01-01'),\n disablePast: false,\n disableFuture: false,\n allowKeyboardControl: true,\n };\n\n static getDerivedStateFromProps(nextProps: CalendarProps, state: CalendarState) {\n const { utils, date: nextDate } = nextProps;\n\n if (!utils.isEqual(nextDate, state.lastDate)) {\n const nextMonth = utils.getMonth(nextDate);\n const lastDate = state.lastDate || nextDate;\n const lastMonth = utils.getMonth(lastDate);\n\n return {\n lastDate: nextDate,\n currentMonth: nextProps.utils.startOfMonth(nextDate),\n // prettier-ignore\n slideDirection: nextMonth === lastMonth\n ? state.slideDirection\n : utils.isAfterDay(nextDate, lastDate)\n ? 'left'\n : 'right'\n };\n }\n\n return null;\n }\n\n state: CalendarState = {\n slideDirection: 'left',\n currentMonth: this.props.utils.startOfMonth(this.props.date),\n loadingQueue: 0,\n };\n\n componentDidMount() {\n const { date, minDate, maxDate, utils, disablePast, disableFuture } = this.props;\n\n if (this.shouldDisableDate(date)) {\n const closestEnabledDate = findClosestEnabledDate({\n date,\n utils,\n minDate: utils.date(minDate),\n maxDate: utils.date(maxDate),\n disablePast: Boolean(disablePast),\n disableFuture: Boolean(disableFuture),\n shouldDisableDate: this.shouldDisableDate,\n });\n\n this.handleDaySelect(closestEnabledDate, false);\n }\n }\n\n private pushToLoadingQueue = () => {\n const loadingQueue = this.state.loadingQueue + 1;\n this.setState({ loadingQueue });\n };\n\n private popFromLoadingQueue = () => {\n let loadingQueue = this.state.loadingQueue;\n loadingQueue = loadingQueue <= 0 ? 0 : loadingQueue - 1;\n this.setState({ loadingQueue });\n };\n\n handleChangeMonth = (newMonth: MaterialUiPickersDate, slideDirection: SlideDirection) => {\n this.setState({ currentMonth: newMonth, slideDirection });\n\n if (this.props.onMonthChange) {\n const returnVal = this.props.onMonthChange(newMonth);\n if (returnVal) {\n this.pushToLoadingQueue();\n returnVal.then(() => {\n this.popFromLoadingQueue();\n });\n }\n }\n };\n\n validateMinMaxDate = (day: MaterialUiPickersDate) => {\n const { minDate, maxDate, utils, disableFuture, disablePast } = this.props;\n const now = utils.date();\n\n return Boolean(\n (disableFuture && utils.isAfterDay(day, now)) ||\n (disablePast && utils.isBeforeDay(day, now)) ||\n (minDate && utils.isBeforeDay(day, utils.date(minDate))) ||\n (maxDate && utils.isAfterDay(day, utils.date(maxDate)))\n );\n };\n\n shouldDisablePrevMonth = () => {\n const { utils, disablePast, minDate } = this.props;\n\n const now = utils.date();\n const firstEnabledMonth = utils.startOfMonth(\n disablePast && utils.isAfter(now, utils.date(minDate)) ? now : utils.date(minDate)\n );\n\n return !utils.isBefore(firstEnabledMonth, this.state.currentMonth);\n };\n\n shouldDisableNextMonth = () => {\n const { utils, disableFuture, maxDate } = this.props;\n\n const now = utils.date();\n const lastEnabledMonth = utils.startOfMonth(\n disableFuture && utils.isBefore(now, utils.date(maxDate)) ? now : utils.date(maxDate)\n );\n\n return !utils.isAfter(lastEnabledMonth, this.state.currentMonth);\n };\n\n shouldDisableDate = (day: MaterialUiPickersDate) => {\n const { shouldDisableDate } = this.props;\n\n return this.validateMinMaxDate(day) || Boolean(shouldDisableDate && shouldDisableDate(day));\n };\n\n handleDaySelect = (day: MaterialUiPickersDate, isFinish = true) => {\n const { date, utils } = this.props;\n\n this.props.onChange(utils.mergeDateAndTime(day, date), isFinish);\n };\n\n moveToDay = (day: MaterialUiPickersDate) => {\n const { utils } = this.props;\n\n if (day && !this.shouldDisableDate(day)) {\n if (utils.getMonth(day) !== utils.getMonth(this.state.currentMonth)) {\n this.handleChangeMonth(utils.startOfMonth(day), 'left');\n }\n\n this.handleDaySelect(day, false);\n }\n };\n\n handleKeyDown = (event: KeyboardEvent) => {\n const { theme, date, utils } = this.props;\n\n runKeyHandler(event, {\n ArrowUp: () => this.moveToDay(utils.addDays(date, -7)),\n ArrowDown: () => this.moveToDay(utils.addDays(date, 7)),\n ArrowLeft: () => this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? -1 : 1)),\n ArrowRight: () => this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? 1 : -1)),\n });\n };\n\n private renderWeeks = () => {\n const { utils, classes } = this.props;\n const weeks = utils.getWeekArray(this.state.currentMonth);\n\n return weeks.map(week => (\n \n {this.renderDays(week)}\n \n ));\n };\n\n private renderDays = (week: MaterialUiPickersDate[]) => {\n const { date, renderDay, utils } = this.props;\n\n const now = utils.date();\n const selectedDate = utils.startOfDay(date);\n const currentMonthNumber = utils.getMonth(this.state.currentMonth);\n\n return week.map(day => {\n const disabled = this.shouldDisableDate(day);\n const isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;\n\n let dayComponent = (\n \n {utils.getDayText(day)}\n \n );\n\n if (renderDay) {\n dayComponent = renderDay(day, selectedDate, isDayInCurrentMonth, dayComponent);\n }\n\n return (\n \n {dayComponent}\n \n );\n });\n };\n\n render() {\n const { currentMonth, slideDirection } = this.state;\n const {\n classes,\n allowKeyboardControl,\n leftArrowButtonProps,\n leftArrowIcon,\n rightArrowButtonProps,\n rightArrowIcon,\n loadingIndicator,\n } = this.props;\n const loadingElement = loadingIndicator ? loadingIndicator : ;\n\n return (\n \n {allowKeyboardControl && this.context !== 'static' && (\n \n )}\n\n \n\n \n <>\n {(this.state.loadingQueue > 0 && (\n {loadingElement}\n )) || {this.renderWeeks()}}\n \n \n \n );\n }\n}\n\nexport const styles = (theme: Theme) => ({\n transitionContainer: {\n minHeight: 36 * 6,\n marginTop: theme.spacing(1.5),\n },\n progressContainer: {\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n week: {\n display: 'flex',\n justifyContent: 'center',\n },\n});\n\nexport default withStyles(styles, {\n name: 'MuiPickersCalendar',\n withTheme: true,\n})(withUtils()(Calendar));\n","enum ClockType {\n HOURS = 'hours',\n\n MINUTES = 'minutes',\n\n SECONDS = 'seconds',\n}\n\nexport type ClockViewType = 'hours' | 'minutes' | 'seconds';\n\nexport default ClockType;\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport ClockType, { ClockViewType } from '../../constants/ClockType';\nimport { Theme } from '@material-ui/core/styles';\nimport { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';\n\nexport interface ClockPointerProps extends WithStyles {\n value: number;\n hasSelected: boolean;\n isInner: boolean;\n type: ClockViewType;\n}\n\nexport class ClockPointer extends React.Component {\n public static getDerivedStateFromProps = (\n nextProps: ClockPointerProps,\n state: ClockPointer['state']\n ) => {\n if (nextProps.type !== state.previousType) {\n return {\n toAnimateTransform: true,\n previousType: nextProps.type,\n };\n }\n\n return {\n toAnimateTransform: false,\n previousType: nextProps.type,\n };\n };\n\n public state = {\n toAnimateTransform: false,\n previousType: undefined,\n };\n\n public getAngleStyle = () => {\n const { value, isInner, type } = this.props;\n\n const max = type === ClockType.HOURS ? 12 : 60;\n let angle = (360 / max) * value;\n\n if (type === ClockType.HOURS && value > 12) {\n angle -= 360; // round up angle to max 360 degrees\n }\n\n return {\n height: isInner ? '26%' : '40%',\n transform: `rotateZ(${angle}deg)`,\n };\n };\n\n public render() {\n const { classes, hasSelected } = this.props;\n\n return (\n \n \n
\r\n Developmental Support Plan (DSP)\r\n
\r\n Subscribe to IEMHP newsletter\r\n
\r\n Infant and Early Mental Health Promotion \r\n The Hospital for Sick Children \r\n 555 University Ave, Toronto, ON M5G 1X8 \r\n iemhp.mail@sickkids.ca\r\n
\r\n Copyright© 2024 Infant and Early Mental Health Promotion\r\n
{subjectErrorMessage}
\r\n Infant and Early Mental Health Promotion\r\n
\r\n The Hospital for Sick Children\r\n
\r\n 555 University Ave, Toronto, ON M5G 1X8\r\n
Show Menu
Hide Menu
Menu
\r\n To learn more about supporting Indigenous families, key Indigenous concepts of child development, the current and historical challenges faced by Indigenous people, and the guiding principles used in creating this tool/program, please explore the NTS Handbook here.\r\n \r\n
To change information for your team member, please submit your request below.
{user.status === \"A\" ? \"Active\" : \"Inactive\"}
{user.name}
{user.email}
If you are a Mac user, you can use the built-in Preview App. Here are the steps you will need to take:
1. Open the .jpg image in Preview. You can do this by right clicking the image and selecting “Open With,” then “Preview”.
2. Once the image is open, click on “File” in the top menu, and then select “Export”.
3. A new window will open. Here, click on the “Format” dropdown menu and select “.png”.
4. Click “Save”. You image is now saved as .png.
If you are a Windows user, you can use the built-in Paint App. Here are the steps you will need to take:
1. Right-click the .jpg image and select “Open With,” then click on “Paint”.
2. Once the image is open, click on “File” in the top menu, then select “Save As”, and choose “.png” from the list of formats.
3. Click “Save.” Your image is now saved as a .png.
The “Save Plan” and “Export Plan” options serve different purposes.
“Save Plan” is what you would click on when you have not completed the plan yet and want to continue\r\n working on it in the future, giving you the option to come back and edit the plan later. When you click\r\n on “Save Plan”, the app saves your plan as a “.iemhp” file to your device (this is crucial as our app doesnot store or collect any plan data). When you are ready to return and finish the plan, you would open\r\n the NTS app, click on "Edit Plan", find and select the file that you had saved on your device, and continue\r\n working on it in the app. See Question 2 above.
“Export Plan” is what you would click on when you are finished creating the plan – your plan is complete\r\n and it requires no more edits. When you click on “Export Plan”, the plan you had created will be saved\r\n on your device as a PDF file making it easy to print and share with family members or caregivers. This\r\n .pdf document is a final version of your plan and cannot be edited in our app like the .iemhp file created\r\n when a plan is saved. See Question 3 above.
\r\n We've sent a password recovery link to: \r\n {email}\r\n \r\n Please allow a few minutes while the email is transit\r\n
\r\n {card.title}\r\n
\r\n The Journey to Infant and Early Mental Health\r\n
Supporting the developmental needs of Indigenous Children from birth to six.
\r\n About\r\n
\r\n The Nurturing the Seed App is an online developmental support planning tool (DSP) that helps frontline practitioners create a developmental support plan for young Indigenous children based on the child’s strengths and developmental needs. \r\n
\r\n The Developmental Support Plan\r\n
\r\n A Developmental Support Plan is created based on the child’s strengths, and supports the child from a developmental perspective, while keeping in mind the unique needs of the family. \r\n
\r\n New Communities Welcome!\r\n
\r\n \r\n Want to make the most of this app and further promote the wellness of young Indigenous children and their families? \r\n \r\n Contact us to join the NtS Study today\r\n
\r\n Success! You've created a new password for your account.\r\n
To obtain the access code, you must complete the NTS training. For more information please visit IEMHP website or contact us if you need any help.
Nurturing The Seed requires all users to provide the assigned access code as the proof of our essential training for registration.\r\n \r\n setGetACodeOpen(true)}\r\n className={classes.term_link}>Get your access code!\r\n \r\n
\r\n Please select the item(s) below you would like to change:\r\n
What is Nurturing the Seed?
\r\n Nurturing the Seed (NtS) is a community-based and culturally informed program that supports the mental health and wellbeing of Indigenous children prenatal to age 6. Nurturing the Seed initially began as a resource that was created by Infant and Mental Health Promotion (IEMHP), in partnership with an Elders Council to specifically support Indigenous children. It has now grown into a Canada-wide research project to determine its efficacy amongst Indigenous children. In 2021-2022, over 150 practitioners from 12 Indigenous communities participated in training and Coaching Connect sessions and enrolled 63 new families in the NtS program. The staff involved with the program influenced agency policies, developed and implemented peer mentoring programs and saw themselves as leaders in infant and early mental health in their communities. In a survey completed by parents and caregivers participating in the program, we learned that the program helped them feel less stressed (64%), feel better equipped to meet their child’s needs (100%) and increased their confidence in supporting their child’s development (93%).\r\n
What is Nurturing the Seed App?
\r\n The Nurturing the Seed App is an online developmental support planning tool that was funded by Nishnawbe Aski Nation (NAN) and developed by IEMHP, to help frontline practitioners create developmental support plans (DSPs) for Indigenous children based on the child’s strength and developmental needs. This app provides built-in step by step instructions and prompts that practitioners can easily follow to create a DSP. The responsive design will allow practitioners to create DSPs on their computer or mobile device, during home visit or in the community with families. The App is only available to trained frontline practitioners involved in the NtS Study.
What is a Developmental Support Plan?
\r\n A Developmental Support Plan is created based on the child’s strengths, and supports the child from a developmental perspective, while keeping in mind the unique needs of the family. The DSPs is comprised of five developmental domains including communication, fine motor, gross motor, problem-solving and social emotional.
Are you interested in joining NtS Study?