From 5e4f160e47e77f4ccdb0457160b22d321b25d4fc Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Wed, 29 May 2019 22:20:44 -0700 Subject: [PATCH] Move Calendar and DatePicker to legacy package (#9253) * Move Calendar and DatePicker to legacy package * Fix doc generation for legacy package * Snapshot updates? * Remove codepen links * Change files * Fix PageJsonGenerator to work with multiple packages --- .../src/components/pages/CalendarPage.tsx | 2 +- .../src/components/pages/DatePickerPage.tsx | 2 +- .../webpack.config.js | 5 +- .../webpack.serve.config.js | 10 +- .../Controls/CalendarPage/CalendarPage.doc.ts | 2 +- .../DatePickerPage/DatePickerPage.doc.ts | 2 +- apps/fabric-website/webpack.config.js | 1 + apps/fabric-website/webpack.serve.config.js | 8 +- apps/ssr-tests/webpack.config.js | 1 + .../src/stories/DatePicker.stories.tsx | 3 +- .../api-docs/calendar_2019-05-29-18-11.json | 11 + .../calendar_2019-05-29-18-11.json | 11 + .../date-time/calendar_2019-05-29-18-11.json | 11 + .../calendar_2019-05-29-18-11.json | 11 + .../calendar_2019-05-29-18-11.json | 11 + .../calendar_2019-05-29-18-11.json | 11 + .../legacy/calendar_2019-05-29-18-08.json | 11 + .../legacy/calendar_2019-05-29-18-11.json | 11 + .../calendar_2019-05-29-18-08.json | 11 + .../calendar_2019-05-29-18-11.json | 11 + packages/api-docs/package.json | 5 +- packages/api-docs/src/PageJsonGenerator.tsx | 10 +- .../api-docs/src/generatePageJsonFiles.ts | 7 +- .../src/azure/styles/DatePicker.styles.ts | 2 +- packages/date-time/etc/date-time.api.md | 43 +- .../src/components/Calendar/Calendar.base.tsx | 2 +- .../src/components/Calendar/Calendar.types.ts | 2 +- .../Calendar/CalendarDay/CalendarDay.base.tsx | 2 +- .../CalendarDay/CalendarDay.styles.ts | 2 +- .../components/DatePicker/DatePicker.base.tsx | 4 +- .../components/DatePicker/DatePicker.test.tsx | 2 +- .../components/DatePicker/DatePicker.types.ts | 2 +- .../examples/DatePicker.Basic.Example.tsx | 2 +- .../examples/DatePicker.Bounded.Example.tsx | 2 +- .../examples/DatePicker.Disabled.Example.tsx | 2 +- .../examples/DatePicker.Format.Example.tsx | 2 +- .../examples/DatePicker.Input.Example.tsx | 2 +- .../examples/DatePicker.Required.Example.tsx | 2 +- .../DatePicker.WeekNumbers.Example.tsx | 2 +- .../src/components/pages/CalendarPage.tsx | 2 +- .../src/utilities/dateMath/DateMath.test.ts | 467 ------------------ .../src/utilities/dateMath/DateMath.ts | 397 +-------------- .../src/utilities/dateValues/DateValues.ts | 50 +- .../src/utilities/dateValues/TimeConstants.ts | 15 +- packages/fluent-theme/package.json | 1 + .../src/fluent/styles/DatePicker.styles.ts | 2 +- packages/legacy/etc/legacy.api.md | 234 ++++++++- .../src/Calendar.ts | 0 .../src/DatePicker.ts | 0 .../src/components/Calendar/Calendar.doc.tsx | 26 +- .../src/components/Calendar/Calendar.scss | 3 +- .../src/components/Calendar/Calendar.test.tsx | 4 +- .../src/components/Calendar/Calendar.tsx | 6 +- .../src/components/Calendar/Calendar.types.ts | 4 +- .../src/components/Calendar/CalendarDay.tsx | 21 +- .../src/components/Calendar/CalendarMonth.tsx | 8 +- .../src/components/Calendar/CalendarYear.tsx | 6 +- .../__snapshots__/Calendar.test.tsx.snap | 0 .../components/Calendar/docs/CalendarDonts.md | 2 +- .../components/Calendar/docs/CalendarDos.md | 2 +- .../Calendar/docs/CalendarOverview.md | 2 +- .../examples/Calendar.Button.Example.tsx | 2 +- .../examples/Calendar.Inline.Example.tsx | 3 +- .../src/components/Calendar/index.ts | 0 .../components/DatePicker/DatePicker.base.tsx | 22 +- .../components/DatePicker/DatePicker.doc.tsx | 66 +++ .../DatePicker/DatePicker.styles.ts | 2 +- .../components/DatePicker/DatePicker.test.tsx | 8 +- .../src/components/DatePicker/DatePicker.tsx | 2 +- .../components/DatePicker/DatePicker.types.ts | 10 +- .../__snapshots__/DatePicker.test.tsx.snap | 0 .../DatePicker/docs/DatePickerDonts.md | 2 +- .../DatePicker/docs/DatePickerDos.md | 2 +- .../DatePicker/docs/DatePickerOverview.md | 1 + .../examples/DatePicker.Basic.Example.tsx | 2 +- .../examples/DatePicker.Bounded.Example.tsx | 2 +- .../examples/DatePicker.Disabled.Example.tsx | 2 +- .../examples/DatePicker.Examples.scss | 4 +- .../examples/DatePicker.Format.Example.tsx | 2 +- .../examples/DatePicker.Input.Example.tsx | 2 +- .../examples/DatePicker.Required.Example.tsx | 2 +- .../DatePicker.WeekNumbers.Example.tsx | 2 +- .../src/components/DatePicker/index.ts | 0 .../legacy/src/components/Nav/Nav.doc.tsx | 8 - packages/legacy/src/index.ts | 2 + .../etc/office-ui-fabric-react.api.md | 256 ---------- .../src/common/_variables.scss | 1 - .../components/DatePicker/DatePicker.doc.tsx | 68 --- .../DatePicker/docs/DatePickerOverview.md | 1 - .../DetailsList.Advanced.Example.tsx.shot | 2 +- .../Layer.Basic.Example.tsx.shot | 2 +- packages/office-ui-fabric-react/src/index.ts | 2 - 92 files changed, 558 insertions(+), 1417 deletions(-) create mode 100644 common/changes/@uifabric/api-docs/calendar_2019-05-29-18-11.json create mode 100644 common/changes/@uifabric/azure-themes/calendar_2019-05-29-18-11.json create mode 100644 common/changes/@uifabric/date-time/calendar_2019-05-29-18-11.json create mode 100644 common/changes/@uifabric/fabric-website-resources/calendar_2019-05-29-18-11.json create mode 100644 common/changes/@uifabric/fabric-website/calendar_2019-05-29-18-11.json create mode 100644 common/changes/@uifabric/fluent-theme/calendar_2019-05-29-18-11.json create mode 100644 common/changes/@uifabric/legacy/calendar_2019-05-29-18-08.json create mode 100644 common/changes/@uifabric/legacy/calendar_2019-05-29-18-11.json create mode 100644 common/changes/office-ui-fabric-react/calendar_2019-05-29-18-08.json create mode 100644 common/changes/office-ui-fabric-react/calendar_2019-05-29-18-11.json delete mode 100644 packages/date-time/src/utilities/dateMath/DateMath.test.ts rename packages/{office-ui-fabric-react => legacy}/src/Calendar.ts (100%) rename packages/{office-ui-fabric-react => legacy}/src/DatePicker.ts (100%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/Calendar.doc.tsx (83%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/Calendar.scss (99%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/Calendar.test.tsx (99%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/Calendar.tsx (97%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/Calendar.types.ts (97%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/CalendarDay.tsx (98%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/CalendarMonth.tsx (98%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/CalendarYear.tsx (98%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap (100%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/docs/CalendarDonts.md (93%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/docs/CalendarDos.md (98%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/docs/CalendarOverview.md (71%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/examples/Calendar.Button.Example.tsx (98%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/examples/Calendar.Inline.Example.tsx (97%) rename packages/{office-ui-fabric-react => legacy}/src/components/Calendar/index.ts (100%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/DatePicker.base.tsx (96%) create mode 100644 packages/legacy/src/components/DatePicker/DatePicker.doc.tsx rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/DatePicker.styles.ts (97%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/DatePicker.test.tsx (97%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/DatePicker.tsx (87%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/DatePicker.types.ts (95%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap (100%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/docs/DatePickerDonts.md (93%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/docs/DatePickerDos.md (98%) create mode 100644 packages/legacy/src/components/DatePicker/docs/DatePickerOverview.md rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx (96%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx (95%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx (94%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/examples/DatePicker.Examples.scss (61%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/examples/DatePicker.Format.Example.tsx (97%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/examples/DatePicker.Input.Example.tsx (95%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/examples/DatePicker.Required.Example.tsx (94%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx (96%) rename packages/{office-ui-fabric-react => legacy}/src/components/DatePicker/index.ts (100%) delete mode 100644 packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.doc.tsx delete mode 100644 packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md diff --git a/apps/fabric-website-resources/src/components/pages/CalendarPage.tsx b/apps/fabric-website-resources/src/components/pages/CalendarPage.tsx index ac55f0b6a75fdb..6947253119c9f5 100644 --- a/apps/fabric-website-resources/src/components/pages/CalendarPage.tsx +++ b/apps/fabric-website-resources/src/components/pages/CalendarPage.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { CalendarPageProps } from 'office-ui-fabric-react/lib/components/Calendar/Calendar.doc'; +import { CalendarPageProps } from '@uifabric/legacy/lib/components/Calendar/Calendar.doc'; import { DemoPage } from '../DemoPage'; export const CalendarPage = (props: { isHeaderVisible: boolean }) => ( diff --git a/apps/fabric-website-resources/src/components/pages/DatePickerPage.tsx b/apps/fabric-website-resources/src/components/pages/DatePickerPage.tsx index 2f89d7ac2dc12a..36a88353b04a79 100644 --- a/apps/fabric-website-resources/src/components/pages/DatePickerPage.tsx +++ b/apps/fabric-website-resources/src/components/pages/DatePickerPage.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { DemoPage } from '../DemoPage'; -import { DatePickerPageProps } from 'office-ui-fabric-react/lib/components/DatePicker/DatePicker.doc'; +import { DatePickerPageProps } from '@uifabric/legacy/lib/components/DatePicker/DatePicker.doc'; export const DatePickerPage = (props: { isHeaderVisible: boolean }) => ( =1.0.2 <2.0.0", - "@uifabric/styling": "^6.47.6", + "@uifabric/legacy": "^6.164.5", "@uifabric/merge-styles": "^6.17.4", + "@uifabric/styling": "^6.47.6", + "@uifabric/tslint-rules": ">=1.0.2 <2.0.0", "@uifabric/utilities": "^6.39.0", "office-ui-fabric-react": "^6.185.0" }, diff --git a/packages/api-docs/src/PageJsonGenerator.tsx b/packages/api-docs/src/PageJsonGenerator.tsx index 7994209bfac842..65046763d056bd 100644 --- a/packages/api-docs/src/PageJsonGenerator.tsx +++ b/packages/api-docs/src/PageJsonGenerator.tsx @@ -82,6 +82,11 @@ export function generateJson(options: IPageJsonOptions[]): void { console.log('Deleting contents of ' + option.pageJsonFolderPath); FileSystem.ensureEmptyFolder(option.pageJsonFolderPath); + // Store the data for each page in a map + for (const pageName of option.pageNames) { + collectedData.pageDataByPageName.set(pageName, new PageData(pageName, option.kind)); + } + for (const apiJsonPath of option.apiJsonPaths) { console.log('Loading ' + apiJsonPath); @@ -93,11 +98,6 @@ export function generateJson(options: IPageJsonOptions[]): void { const apiEntryPoint: ApiEntryPoint = apiPackage.entryPoints[0]; // assume there is only one entry point - // Store the data for each page in a map - for (const pageName of option.pageNames) { - collectedData.pageDataByPageName.set(pageName, new PageData(pageName, option.kind)); - } - collectPageData(collectedData, apiEntryPoint, option.kind); } } diff --git a/packages/api-docs/src/generatePageJsonFiles.ts b/packages/api-docs/src/generatePageJsonFiles.ts index 6c5fa14c79f3f3..116a790ac5fde3 100644 --- a/packages/api-docs/src/generatePageJsonFiles.ts +++ b/packages/api-docs/src/generatePageJsonFiles.ts @@ -1,7 +1,7 @@ import * as path from 'path'; import { generateJson } from './PageJsonGenerator'; -// Generate JSON for office-ui-fabric-react, styling, utilities, and merge-styles +// Generate JSON for office-ui-fabric-react, styling, utilities, merge-styles, and legacy generateJson([ { @@ -15,7 +15,10 @@ generateJson([ kind: 'References' }, { - apiJsonPaths: [path.resolve(__dirname, '../../../packages/office-ui-fabric-react/dist/office-ui-fabric-react.api.json')], + apiJsonPaths: [ + path.resolve(__dirname, '../../../packages/office-ui-fabric-react/dist/office-ui-fabric-react.api.json'), + path.resolve(__dirname, '../../../packages/legacy/dist/legacy.api.json') + ], pageJsonFolderPath: path.resolve(__dirname, '../lib/pages/office-ui-fabric-react'), pageNames: [ 'ActivityItem', diff --git a/packages/azure-themes/src/azure/styles/DatePicker.styles.ts b/packages/azure-themes/src/azure/styles/DatePicker.styles.ts index bda25c9b2b86b1..5d37551880ad50 100644 --- a/packages/azure-themes/src/azure/styles/DatePicker.styles.ts +++ b/packages/azure-themes/src/azure/styles/DatePicker.styles.ts @@ -1,6 +1,6 @@ import { FontSizes } from '../AzureType'; import * as StyleConstants from '../Constants'; -import { IDatePickerStyles, IDatePickerStyleProps } from 'office-ui-fabric-react/lib/DatePicker'; +import { IDatePickerStyles, IDatePickerStyleProps } from '@uifabric/legacy/lib/DatePicker'; export const DatePickerStyles = (props: IDatePickerStyleProps): Partial => { const { disabled, theme } = props; diff --git a/packages/date-time/etc/date-time.api.md b/packages/date-time/etc/date-time.api.md index 29f87a11b03caf..8de87827a0defa 100644 --- a/packages/date-time/etc/date-time.api.md +++ b/packages/date-time/etc/date-time.api.md @@ -5,6 +5,9 @@ ```ts import * as CSS from 'csstype'; +import { DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; +import { DayOfWeek } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; +import { FirstWeekOfYear } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; import { IBaseProps } from '@uifabric/utilities'; import { IBaseProps as IBaseProps_2 } from 'office-ui-fabric-react/lib/Utilities'; import { IRefObject } from '@uifabric/utilities'; @@ -20,45 +23,11 @@ import * as PropTypes from 'prop-types'; // @public export const Calendar: React.FunctionComponent; -// @public -export enum DateRangeType { - // (undocumented) - Day = 0, - // (undocumented) - Month = 2, - // (undocumented) - Week = 1, - // (undocumented) - WorkWeek = 3 -} +export { DateRangeType } -// @public -export enum DayOfWeek { - // (undocumented) - Friday = 5, - // (undocumented) - Monday = 1, - // (undocumented) - Saturday = 6, - // (undocumented) - Sunday = 0, - // (undocumented) - Thursday = 4, - // (undocumented) - Tuesday = 2, - // (undocumented) - Wednesday = 3 -} +export { DayOfWeek } -// @public -export enum FirstWeekOfYear { - // (undocumented) - FirstDay = 0, - // (undocumented) - FirstFourDayWeek = 2, - // (undocumented) - FirstFullWeek = 1 -} +export { FirstWeekOfYear } // @public (undocumented) export interface ICalendar { diff --git a/packages/date-time/src/components/Calendar/Calendar.base.tsx b/packages/date-time/src/components/Calendar/Calendar.base.tsx index 8120b1658656ef..13747979b31e29 100644 --- a/packages/date-time/src/components/Calendar/Calendar.base.tsx +++ b/packages/date-time/src/components/Calendar/Calendar.base.tsx @@ -8,7 +8,7 @@ import { ICalendarStyleProps, ICalendarStyles } from './Calendar.types'; -import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues'; +import { DayOfWeek, FirstWeekOfYear, DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; import { CalendarDay } from './CalendarDay/CalendarDay'; import { CalendarMonth } from './CalendarMonth/CalendarMonth'; import { ICalendarDay } from './CalendarDay/CalendarDay.types'; diff --git a/packages/date-time/src/components/Calendar/Calendar.types.ts b/packages/date-time/src/components/Calendar/Calendar.types.ts index 3f8c6f45b7c88d..fdd17d2a19c8b7 100644 --- a/packages/date-time/src/components/Calendar/Calendar.types.ts +++ b/packages/date-time/src/components/Calendar/Calendar.types.ts @@ -1,4 +1,4 @@ -import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues'; +import { DayOfWeek, FirstWeekOfYear, DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; import { IRefObject, IBaseProps, IStyleFunctionOrObject } from '@uifabric/utilities'; import { IStyle, ITheme } from '@uifabric/styling'; import { ICalendarDayProps } from './CalendarDay/CalendarDay.types'; diff --git a/packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.base.tsx b/packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.base.tsx index f8107f17733980..48f83cfd9739a9 100644 --- a/packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.base.tsx +++ b/packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.base.tsx @@ -13,7 +13,7 @@ import { getWeekNumbersInMonth, getMonthStart, getMonthEnd -} from '../../../utilities/dateMath/DateMath'; +} from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; import { ICalendarDayProps, ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types'; import { IProcessedStyleSet } from '@uifabric/styling'; import { DateRangeType } from '../Calendar.types'; diff --git a/packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.styles.ts b/packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.styles.ts index d9924d69c5bf7d..763d6a32d1144d 100644 --- a/packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.styles.ts +++ b/packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.styles.ts @@ -1,6 +1,6 @@ import { ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types'; import { normalize, FontSizes, FontWeights, getFocusStyle, getGlobalClassNames } from '@uifabric/styling'; -import { DateRangeType } from '../../../utilities/dateValues/DateValues'; +import { DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; const GlobalClassNames = { hoverStyle: 'ms-CalendarDay-hoverStyle', diff --git a/packages/date-time/src/components/DatePicker/DatePicker.base.tsx b/packages/date-time/src/components/DatePicker/DatePicker.base.tsx index a518f7b9638f02..a84e76eaf63ef2 100644 --- a/packages/date-time/src/components/DatePicker/DatePicker.base.tsx +++ b/packages/date-time/src/components/DatePicker/DatePicker.base.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import { IDatePicker, IDatePickerProps, IDatePickerStrings, IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types'; import { BaseComponent, KeyCodes, classNamesFunction, getId, getNativeProps, divProperties, css } from '@uifabric/utilities'; import { Calendar, ICalendar, DayOfWeek } from '../../Calendar'; -import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues'; +import { FirstWeekOfYear } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; import { Callout } from 'office-ui-fabric-react/lib/Callout'; import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHint'; import { TextField, ITextField } from 'office-ui-fabric-react/lib/TextField'; -import { compareDates, compareDatePart } from '../../utilities/dateMath/DateMath'; +import { compareDates, compareDatePart } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone'; const getClassNames = classNamesFunction(); diff --git a/packages/date-time/src/components/DatePicker/DatePicker.test.tsx b/packages/date-time/src/components/DatePicker/DatePicker.test.tsx index 9f544d6eca7836..91f4c42c352fd2 100644 --- a/packages/date-time/src/components/DatePicker/DatePicker.test.tsx +++ b/packages/date-time/src/components/DatePicker/DatePicker.test.tsx @@ -5,7 +5,7 @@ import { Calendar, ICalendarStrings } from '../../Calendar'; import { DatePicker } from './DatePicker'; import { DatePickerBase, IDatePickerState } from './DatePicker.base'; import { IDatePickerStrings, IDatePickerProps } from './DatePicker.types'; -import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues'; +import { FirstWeekOfYear } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; import { shallow, mount, ReactWrapper } from 'enzyme'; import { resetIds } from '@uifabric/utilities'; import { Callout } from 'office-ui-fabric-react/lib/Callout'; diff --git a/packages/date-time/src/components/DatePicker/DatePicker.types.ts b/packages/date-time/src/components/DatePicker/DatePicker.types.ts index 0863d4199b1d1b..8634da7866f687 100644 --- a/packages/date-time/src/components/DatePicker/DatePicker.types.ts +++ b/packages/date-time/src/components/DatePicker/DatePicker.types.ts @@ -1,5 +1,5 @@ import { DayOfWeek, ICalendarProps } from '../../Calendar'; -import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues'; +import { FirstWeekOfYear } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; import { ICalendarFormatDateCallbacks } from '../Calendar/Calendar.types'; import { IStyle, ITheme } from '@uifabric/styling'; import { IRefObject, IBaseProps, IStyleFunction, IComponentAs } from '@uifabric/utilities'; diff --git a/packages/date-time/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx b/packages/date-time/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx index 72fe5b1978c802..3a8a988b595e64 100644 --- a/packages/date-time/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx +++ b/packages/date-time/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/date-time/lib/DatePicker'; import './DatePicker.Examples.scss'; const DayPickerStrings: IDatePickerStrings = { diff --git a/packages/date-time/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx b/packages/date-time/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx index f770fbb9418319..fc6e0c101dfb26 100644 --- a/packages/date-time/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx +++ b/packages/date-time/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/date-time/lib/DatePicker'; import { addMonths, addYears } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; import './DatePicker.Examples.scss'; diff --git a/packages/date-time/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx b/packages/date-time/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx index ecc6c0d27530c1..aa0cb6a80fe75a 100644 --- a/packages/date-time/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx +++ b/packages/date-time/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/date-time/lib/DatePicker'; import './DatePicker.Examples.scss'; const DayPickerStrings: IDatePickerStrings = { diff --git a/packages/date-time/src/components/DatePicker/examples/DatePicker.Format.Example.tsx b/packages/date-time/src/components/DatePicker/examples/DatePicker.Format.Example.tsx index cc3ea6076c8d53..3da587ab7a70b2 100644 --- a/packages/date-time/src/components/DatePicker/examples/DatePicker.Format.Example.tsx +++ b/packages/date-time/src/components/DatePicker/examples/DatePicker.Format.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/date-time/lib/DatePicker'; import './DatePicker.Examples.scss'; const DayPickerStrings: IDatePickerStrings = { diff --git a/packages/date-time/src/components/DatePicker/examples/DatePicker.Input.Example.tsx b/packages/date-time/src/components/DatePicker/examples/DatePicker.Input.Example.tsx index 61557d85c432d0..a1b7fe4e2a98fa 100644 --- a/packages/date-time/src/components/DatePicker/examples/DatePicker.Input.Example.tsx +++ b/packages/date-time/src/components/DatePicker/examples/DatePicker.Input.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/date-time/lib/DatePicker'; import './DatePicker.Examples.scss'; const DayPickerStrings: IDatePickerStrings = { diff --git a/packages/date-time/src/components/DatePicker/examples/DatePicker.Required.Example.tsx b/packages/date-time/src/components/DatePicker/examples/DatePicker.Required.Example.tsx index 26101e9a2c9cb6..a9f77f710d21d8 100644 --- a/packages/date-time/src/components/DatePicker/examples/DatePicker.Required.Example.tsx +++ b/packages/date-time/src/components/DatePicker/examples/DatePicker.Required.Example.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/date-time/lib/DatePicker'; import './DatePicker.Examples.scss'; const DayPickerStrings: IDatePickerStrings = { diff --git a/packages/date-time/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx b/packages/date-time/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx index 54bce70d3dcc3c..97066a62627e82 100644 --- a/packages/date-time/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx +++ b/packages/date-time/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/date-time/lib/DatePicker'; import './DatePicker.Examples.scss'; const DayPickerStrings: IDatePickerStrings = { diff --git a/packages/date-time/src/components/pages/CalendarPage.tsx b/packages/date-time/src/components/pages/CalendarPage.tsx index dc638f696eabed..f72b2ec137156e 100644 --- a/packages/date-time/src/components/pages/CalendarPage.tsx +++ b/packages/date-time/src/components/pages/CalendarPage.tsx @@ -3,7 +3,7 @@ import { ExampleCard, ComponentPage, PropertiesTableSet, PageMarkdown } from '@u import { DateRangeType, DayOfWeek } from '../Calendar/Calendar.types'; import { CalendarButtonExample } from '../Calendar/examples/Calendar.Button.Example'; import { CalendarInlineExample } from '../Calendar/examples/Calendar.Inline.Example'; -import { addMonths, addYears, addDays } from '../../utilities/dateMath/DateMath'; +import { addMonths, addYears, addDays } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; const CalendarButtonExampleCode = require('!raw-loader!@uifabric/date-time/src/components/Calendar/examples/Calendar.Button.Example.tsx') as string; const CalendarButtonExampleCodepen = require('!@uifabric/codepen-loader!@uifabric/date-time/src/components/Calendar/examples/Calendar.Button.Example.tsx') as string; diff --git a/packages/date-time/src/utilities/dateMath/DateMath.test.ts b/packages/date-time/src/utilities/dateMath/DateMath.test.ts deleted file mode 100644 index bc185f90be448b..00000000000000 --- a/packages/date-time/src/utilities/dateMath/DateMath.test.ts +++ /dev/null @@ -1,467 +0,0 @@ -import { DayOfWeek, DateRangeType } from '../dateValues/DateValues'; -import * as DateMath from './DateMath'; - -enum Months { - Jan = 0, - Feb = 1, - Mar = 2, - Apr = 3, - May = 4, - Jun = 5, - Jul = 6, - Aug = 7, - Sep = 8, - Oct = 9, - Nov = 10, - Dec = 11 -} -describe('DateMath', () => { - it('can add days', () => { - const startDate = new Date(2016, Months.Apr, 1); - const result = DateMath.addDays(startDate, 5); - const expected = new Date(2016, Months.Apr, 6); - - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can add days across a month boundary', () => { - const startDate = new Date(2016, Months.Mar, 30); - const result = DateMath.addDays(startDate, 5); - const expected = new Date(2016, Months.Apr, 4); - - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can add days across multiple month boundaries', () => { - const startDate = new Date(2016, Months.Mar, 31); - const result = DateMath.addDays(startDate, 65); - const expected = new Date(2016, Months.Jun, 4); - - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can add days across leap day boundaries', () => { - const startDate = new Date(2016, Months.Feb, 28); - const result = DateMath.addDays(startDate, 2); - const expected = new Date(2016, Months.Mar, 1); - - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can add months', () => { - const startDate = new Date(2015, Months.Dec, 31); - - let result = DateMath.addMonths(startDate, 1); - let expected = new Date(2016, Months.Jan, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, 2); - expected = new Date(2016, Months.Feb, 29); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, 3); - expected = new Date(2016, Months.Mar, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, 4); - expected = new Date(2016, Months.Apr, 30); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, 5); - expected = new Date(2016, Months.May, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, 6); - expected = new Date(2016, Months.Jun, 30); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, 7); - expected = new Date(2016, Months.Jul, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, 8); - expected = new Date(2016, Months.Aug, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, 9); - expected = new Date(2016, Months.Sep, 30); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, 10); - expected = new Date(2016, Months.Oct, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, 11); - expected = new Date(2016, Months.Nov, 30); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, 12); - expected = new Date(2016, Months.Dec, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, 14); - expected = new Date(2017, Months.Feb, 28); - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can add years', () => { - let startDate = new Date(2016, Months.Feb, 29); - let result = DateMath.addYears(startDate, 1); - let expected = new Date(2017, Months.Feb, 28); - - expect(result.getTime()).toEqual(expected.getTime()); - - startDate = new Date(2016, Months.Feb, 29); - result = DateMath.addYears(startDate, 4); - expected = new Date(2020, Months.Feb, 29); - - expect(result.getTime()).toEqual(expected.getTime()); - - startDate = new Date(2016, Months.Jan, 1); - result = DateMath.addYears(startDate, 1); - expected = new Date(2017, Months.Jan, 1); - - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can subtract days', () => { - const startDate = new Date(2016, Months.Apr, 30); - const result = DateMath.addDays(startDate, -5); - const expected = new Date(2016, Months.Apr, 25); - - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can subtract days across a month boundry', () => { - const startDate = new Date(2016, Months.Apr, 1); - const result = DateMath.addDays(startDate, -5); - const expected = new Date(2016, Months.Mar, 27); - - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can subtract days across multiple month boundaries', () => { - const startDate = new Date(2016, Months.Jul, 4); - const result = DateMath.addDays(startDate, -65); - const expected = new Date(2016, Months.Apr, 30); - - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can subtract days across leap day boundaries', () => { - const startDate = new Date(2016, Months.Mar, 1); - const result = DateMath.addDays(startDate, -2); - const expected = new Date(2016, Months.Feb, 28); - - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can subtract months', () => { - const startDate = new Date(2016, Months.Dec, 31); - - let result = DateMath.addMonths(startDate, -12); - let expected = new Date(2015, Months.Dec, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, -11); - expected = new Date(2016, Months.Jan, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, -10); - expected = new Date(2016, Months.Feb, 29); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, -9); - expected = new Date(2016, Months.Mar, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, -8); - expected = new Date(2016, Months.Apr, 30); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, -7); - expected = new Date(2016, Months.May, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, -6); - expected = new Date(2016, Months.Jun, 30); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, -5); - expected = new Date(2016, Months.Jul, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, -4); - expected = new Date(2016, Months.Aug, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, -3); - expected = new Date(2016, Months.Sep, 30); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, -2); - expected = new Date(2016, Months.Oct, 31); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, -1); - expected = new Date(2016, Months.Nov, 30); - expect(result.getTime()).toEqual(expected.getTime()); - - result = DateMath.addMonths(startDate, -22); - expected = new Date(2015, Months.Feb, 28); - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can subtract years', () => { - let startDate = new Date(2016, Months.Feb, 29); - let result = DateMath.addYears(startDate, -1); - let expected = new Date(2015, Months.Feb, 28); - - expect(result.getTime()).toEqual(expected.getTime()); - - startDate = new Date(2016, Months.Feb, 29); - result = DateMath.addYears(startDate, -4); - expected = new Date(2012, Months.Feb, 29); - - expect(result.getTime()).toEqual(expected.getTime()); - - startDate = new Date(2016, Months.Jan, 1); - result = DateMath.addYears(startDate, -1); - expected = new Date(2015, Months.Jan, 1); - - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can set the month', () => { - let startDate = new Date(2016, Months.Jan, 31); - let result = DateMath.setMonth(startDate, Months.Feb); - let expected = new Date(2016, Months.Feb, 29); - expect(result.getTime()).toEqual(expected.getTime()); - - startDate = new Date(2016, Months.Jun, 1); - result = DateMath.setMonth(startDate, Months.Feb); - expected = new Date(2016, Months.Feb, 1); - expect(result.getTime()).toEqual(expected.getTime()); - }); - - it('can compare dates', () => { - let date1 = new Date(2016, 4, 1); - let date2 = new Date(2016, 4, 1); - expect(DateMath.compareDates(date1, date2)).toBe(true); - - date1 = new Date(2016, 4, 1, 12, 30, 0); - date2 = new Date(2016, 4, 1, 10, 0, 0); - expect(DateMath.compareDates(date1, date2)).toBe(true); - - date1 = new Date(2016, 4, 1); - date2 = new Date(2016, 4, 2); - expect(DateMath.compareDates(date1, date2)).toBe(false); - - date1 = new Date(2016, 4, 1); - date2 = new Date(2016, 5, 1); - expect(DateMath.compareDates(date1, date2)).toBe(false); - - date1 = new Date(2016, 4, 1); - date2 = new Date(2017, 4, 1); - expect(DateMath.compareDates(date1, date2)).toBe(false); - }); - - it('can get date range array', () => { - const date = new Date(2017, 2, 16); - - // Date range: day - let dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Day, DayOfWeek.Sunday); - expect(dateRangeArray.length).toEqual(1); - expect(DateMath.compareDates(dateRangeArray[0], date)).toBe(true); - - // Date range: week - let expectedDates = Array(7).map((val: undefined, i: number) => new Date(2017, 2, 12 + i)); - dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Week, DayOfWeek.Sunday); - Array(7).forEach((val: undefined, i: number) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true)); - - // Date range: work week - const workWeekDays = [DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Thursday, DayOfWeek.Friday]; - expectedDates = [new Date(2017, 2, 13), new Date(2017, 2, 14), new Date(2017, 2, 16), new Date(2017, 2, 17)]; - dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Week, DayOfWeek.Sunday, workWeekDays); - Array(4).forEach((val: undefined, i: number) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true)); - - // work week defaults - expectedDates = [new Date(2017, 2, 13), new Date(2017, 2, 14), new Date(2017, 2, 15), new Date(2017, 2, 16), new Date(2017, 2, 17)]; - dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Week, DayOfWeek.Sunday); - Array(4).forEach((val: undefined, i: number) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true)); - - // Date range: month - expectedDates = Array(31).map((val: undefined, i: number) => new Date(2017, 2, 1 + i)); - dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Month, DayOfWeek.Sunday); - Array(31).forEach((val: undefined, i: number) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true)); - - // First day of week: Tuesday - expectedDates = Array(7).map((val: undefined, i: number) => new Date(2017, 2, 14 + i)); - dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Week, DayOfWeek.Tuesday); - Array(7).forEach((val: undefined, i: number) => expect(DateMath.compareDates(dateRangeArray[i], date)).toBe(true)); - }); - - // Generating week numbers array per month - it('can calculate week numbers from selected date', () => { - // firstDayOfWeek is Monday, firstWeekOfYear is firstFullWeek - let date = new Date(2017, 0, 4); - let result = DateMath.getWeekNumbersInMonth(6, 1, 1, date); - let expected = 52; - expect(result[0]).toEqual(expected); - - // firstDayOfWeek is Sunday, firstWeekOfYear is firstFullWeek - date = new Date(2000, 11, 31); - result = DateMath.getWeekNumbersInMonth(6, 0, 1, date); - expected = 53; - expect(result[5]).toEqual(expected); - - // firstDayOfWeek is Sunday, firstWeekOfYear is firstFullWeek - date = new Date(2010, 0, 1); - result = DateMath.getWeekNumbersInMonth(6, 0, 1, date); - expected = 52; - expect(result[0]).toEqual(expected); - - // firstDayOfWeek is Sunday, firstWeekOfYear is firstFourDayWeek - date = new Date(2018, 11, 31); - result = DateMath.getWeekNumbersInMonth(6, 0, 2, date); - expected = 1; - expect(result[5]).toEqual(expected); - }); - - // First week of year set to FirstWeekOfYear.FirstDay - it('can calculate week numbers - option 0', () => { - // firstDayOfWeek is Sunday - let date1 = new Date(2018, 0, 1); - let result = DateMath.getWeekNumber(date1, 0, 0); - let expected = 1; - expect(result).toEqual(expected); - - // firstDayOfWeek is Sunday - date1 = new Date(2010, 0, 1); - result = DateMath.getWeekNumber(date1, 0, 0); - expected = 1; - expect(result).toEqual(expected); - - // firstDayOfWeek is Sunday - date1 = new Date(2019, 0, 1); - result = DateMath.getWeekNumber(date1, 0, 0); - expected = 1; - expect(result).toEqual(expected); - - // firstDayOfWeek is Monday - date1 = new Date(2010, 11, 31); - result = DateMath.getWeekNumber(date1, 1, 0); - expected = 53; - expect(result).toEqual(expected); - }); - - // First week of year set to FirstWeekOfYear.FirstFullWeek - it('can calculate week numbers - option 1', () => { - // firstDayOfWeek is Sunday - let date1 = new Date(2018, 0, 1); - let result = DateMath.getWeekNumber(date1, 0, 1); - let expected = 53; - expect(result).toEqual(expected); - - // firstDayOfWeek is Sunday - date1 = new Date(2017, 11, 31); - result = DateMath.getWeekNumber(date1, 0, 1); - expected = 53; - expect(result).toEqual(expected); - - // firstDayOfWeek is Sunday - date1 = new Date(2010, 11, 31); - result = DateMath.getWeekNumber(date1, 0, 1); - expected = 52; - expect(result).toEqual(expected); - - // firstDayOfWeek is Monday - date1 = new Date(2011, 0, 1); - result = DateMath.getWeekNumber(date1, 1, 1); - expected = 52; - expect(result).toEqual(expected); - - // firstDayOfWeek is Sunday - date1 = new Date(2021, 0, 1); - result = DateMath.getWeekNumber(date1, 0, 1); - expected = 52; - expect(result).toEqual(expected); - - // firstDayOfWeek is Monday - date1 = new Date(2021, 0, 1); - result = DateMath.getWeekNumber(date1, 1, 1); - expected = 52; - expect(result).toEqual(expected); - }); - - // First week of year set to FirstWeekOfYear.FirstFourDayWeek - it('can calculate week numbers - option 2', () => { - // firstDayOfWeek is Sunday - let date1 = new Date(2019, 0, 5); - let result = DateMath.getWeekNumber(date1, 0, 2); - let expected = 1; - expect(result).toEqual(expected); - - // firstDayOfWeek is Sunday - date1 = new Date(2018, 0, 6); - result = DateMath.getWeekNumber(date1, 0, 2); - expected = 1; - expect(result).toEqual(expected); - - // firstDayOfWeek is Sunday - date1 = new Date(2014, 11, 31); - result = DateMath.getWeekNumber(date1, 0, 2); - expected = 53; - expect(result).toEqual(expected); - - // firstDayOfWeek is Sunday - date1 = new Date(2015, 0, 1); - result = DateMath.getWeekNumber(date1, 0, 2); - expected = 53; - expect(result).toEqual(expected); - - // firstDayOfWeek is Sunday - date1 = new Date(2010, 11, 31); - result = DateMath.getWeekNumber(date1, 0, 2); - expected = 52; - expect(result).toEqual(expected); - - // firstDayOfWeek is Monday - date1 = new Date(2011, 0, 1); - result = DateMath.getWeekNumber(date1, 1, 2); - expected = 52; - expect(result).toEqual(expected); - - // firstDayOfWeek is Sunday - date1 = new Date(2021, 0, 1); - result = DateMath.getWeekNumber(date1, 0, 2); - expected = 53; - expect(result).toEqual(expected); - - // firstDayOfWeek is Monday - date1 = new Date(2021, 0, 1); - result = DateMath.getWeekNumber(date1, 1, 2); - expected = 53; - expect(result).toEqual(expected); - }); - - it('can get the month start and end', () => { - const date = new Date('Dec 15 2017'); - - // First day of month - expect(DateMath.compareDates(new Date('Dec 1 2017'), DateMath.getMonthStart(date))).toBe(true); - - // Last day of month - expect(DateMath.compareDates(new Date('Dec 31 2017'), DateMath.getMonthEnd(date))).toBe(true); - }); - - it('can get the year start and end', () => { - const date = new Date('Dec 15 2017'); - - // First day of year - expect(DateMath.compareDates(new Date('Jan 1 2017'), DateMath.getYearStart(date))).toBe(true); - - // Last day of year - expect(DateMath.compareDates(new Date('Dec 31 2017'), DateMath.getYearEnd(date))).toBe(true); - }); -}); diff --git a/packages/date-time/src/utilities/dateMath/DateMath.ts b/packages/date-time/src/utilities/dateMath/DateMath.ts index f18d7a47ccaf88..c64cecb00dc41f 100644 --- a/packages/date-time/src/utilities/dateMath/DateMath.ts +++ b/packages/date-time/src/utilities/dateMath/DateMath.ts @@ -1,396 +1 @@ -import { DayOfWeek, MonthOfYear, FirstWeekOfYear, DateRangeType } from '../dateValues/DateValues'; -import TimeConstants from '../dateValues/TimeConstants'; -import { assertNever } from '@uifabric/utilities'; - -/** - * Returns a date offset from the given date by the specified number of days. - * @param {Date} date - The origin date - * @param {number} days - The number of days to offset. 'days' can be negative. - * @return {Date} A new Date object offset from the origin date by the given number of days - */ -export function addDays(date: Date, days: number): Date { - const result = new Date(date.getTime()); - result.setDate(result.getDate() + days); - return result; -} - -/** - * Returns a date offset from the given date by the specified number of weeks. - * @param {Date} date - The origin date - * @param {number} weeks - The number of weeks to offset. 'weeks' can be negative. - * @return {Date} A new Date object offset from the origin date by the given number of weeks - */ -export function addWeeks(date: Date, weeks: number): Date { - return addDays(date, weeks * TimeConstants.DaysInOneWeek); -} - -/** - * Returns a date offset from the given date by the specified number of months. - * The method tries to preserve the day-of-month; however, if the new month does not have enough days - * to contain the original day-of-month, we'll use the last day of the new month. - * @param {Date} date - The origin date - * @param {number} months - The number of months to offset. 'months' can be negative. - * @return {Date} A new Date object offset from the origin date by the given number of months - */ -export function addMonths(date: Date, months: number): Date { - let result = new Date(date.getTime()); - const newMonth = result.getMonth() + months; - result.setMonth(newMonth); - - // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days. - // Loop until we back up to a day the new month has. - // (Weird modulo math is due to Javascript's treatment of negative numbers in modulo) - if (result.getMonth() !== ((newMonth % TimeConstants.MonthInOneYear) + TimeConstants.MonthInOneYear) % TimeConstants.MonthInOneYear) { - result = addDays(result, -result.getDate()); - } - return result; -} - -/** - * Returns a date offset from the given date by the specified number of years. - * The method tries to preserve the day-of-month; however, if the new month does not have enough days - * to contain the original day-of-month, we'll use the last day of the new month. - * @param {Date} date - The origin date - * @param {number} years - The number of years to offset. 'years' can be negative. - * @return {Date} A new Date object offset from the origin date by the given number of years - */ -export function addYears(date: Date, years: number): Date { - let result = new Date(date.getTime()); - result.setFullYear(date.getFullYear() + years); - - // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days. - // Loop until we back up to a day the new month has. - // (Weird modulo math is due to Javascript's treatment of negative numbers in modulo) - if ( - result.getMonth() !== - ((date.getMonth() % TimeConstants.MonthInOneYear) + TimeConstants.MonthInOneYear) % TimeConstants.MonthInOneYear - ) { - result = addDays(result, -result.getDate()); - } - return result; -} - -/** - * Returns a date that is the first day of the month of the provided date. - * @param {Date} date - The origin date - * @return {Date} A new Date object with the day set to the first day of the month. - */ -export function getMonthStart(date: Date): Date { - return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0); -} - -/** - * Returns a date that is the last day of the month of the provided date. - * @param {Date} date - The origin date - * @return {Date} A new Date object with the day set to the last day of the month. - */ -export function getMonthEnd(date: Date): Date { - return new Date(date.getFullYear(), date.getMonth() + 1, 0, 0, 0, 0, 0); -} - -/** - * Returns a date that is the first day of the year of the provided date. - * @param {Date} date - The origin date - * @return {Date} A new Date object with the day set to the first day of the year. - */ -export function getYearStart(date: Date): Date { - return new Date(date.getFullYear(), 0, 1, 0, 0, 0, 0); -} - -/** - * Returns a date that is the last day of the year of the provided date. - * @param {Date} date - The origin date - * @return {Date} A new Date object with the day set to the last day of the year. - */ -export function getYearEnd(date: Date): Date { - return new Date(date.getFullYear() + 1, 0, 0, 0, 0, 0, 0); -} - -/** - * Returns a date that is a copy of the given date, aside from the month changing to the given month. - * The method tries to preserve the day-of-month; however, if the new month does not have enough days - * to contain the original day-of-month, we'll use the last day of the new month. - * @param {Date} date - The origin date - * @param {number} month - The 0-based index of the month to set on the date. - * @return {Date} A new Date object with the given month set. - */ -export function setMonth(date: Date, month: number): Date { - return addMonths(date, month - date.getMonth()); -} - -/** - * Compares two dates, and returns true if the two dates (not accounting for time-of-day) are equal. - * @return {boolean} True if the two dates represent the same date (regardless of time-of-day), false otherwise. - */ -export function compareDates(date1: Date, date2: Date): boolean { - if (!date1 && !date2) { - return true; - } else if (!date1 || !date2) { - return false; - } else { - return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate(); - } -} - -/** - * Compare the date parts of two dates - * @param {Date} date1 - The first date to compare - * @param {Date} date2 - The second date to compare - * @returns {Number} A negative value if date1 is earlier than date2, 0 if the dates are equal, or a positive value - * if date1 is later than date2. - */ -export function compareDatePart(date1: Date, date2: Date): Number { - return getDatePartHashValue(date1) - getDatePartHashValue(date2); -} - -/** - * Gets the date range array including the specified date. The date range array is calculated as the list - * of dates accounting for the specified first day of the week and date range type. - * @param {Date} date - The input date - * @param {DateRangeType} dateRangeType - The desired date range type, i.e., day, week, month, etc. - * @param {DayOfWeek} firstDayOfWeek - The first day of the week. - * @param {DayOfWeek[]} workWeekDays - The allowed days in work week. If not provided, assumes all days are allowed. - * @returns {Date[]} An array of dates representing the date range containing the specified date. - */ -export function getDateRangeArray(date: Date, dateRangeType: DateRangeType, firstDayOfWeek: DayOfWeek, workWeekDays?: DayOfWeek[]): Date[] { - const datesArray = new Array(); - let startDate: Date; - let endDate = null; - - if (!workWeekDays) { - workWeekDays = [DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday]; - } - - switch (dateRangeType) { - case DateRangeType.Day: - startDate = getDatePart(date); - endDate = addDays(startDate, 1); - break; - - case DateRangeType.Week: - case DateRangeType.WorkWeek: - startDate = getStartDateOfWeek(getDatePart(date), firstDayOfWeek); - endDate = addDays(startDate, TimeConstants.DaysInOneWeek); - break; - - case DateRangeType.Month: - startDate = new Date(date.getFullYear(), date.getMonth(), 1); - endDate = addMonths(startDate, 1); - break; - - default: - return assertNever(dateRangeType); - } - - // Populate the dates array with the dates in range - let nextDate = startDate; - - do { - if (dateRangeType !== DateRangeType.WorkWeek) { - // push all days not in work week view - datesArray.push(nextDate); - } else if (workWeekDays.indexOf(nextDate.getDay()) !== -1) { - datesArray.push(nextDate); - } - nextDate = addDays(nextDate, 1); - } while (!compareDates(nextDate, endDate)); - - return datesArray; -} - -/** - * Checks whether the specified date is in the given date range. - * @param {Date} date - The origin date - * @param {Date[]} dateRange - An array of dates to do the lookup on - * @returns {bool} True if the date matches one of the dates in the specified array, false otherwise. - */ -export function isInDateRangeArray(date: Date, dateRange: Date[]): boolean { - for (const dateInRange of dateRange) { - if (compareDates(date, dateInRange)) { - return true; - } - } - return false; -} - -/** - * Returns the week number for a date. - * Week numbers are 1 - 52 (53) in a year - * @param {navigatedDate} Date - A date to find the week number for. - * @param {firstDayOfWeek} DayOfWeek - The first day of the week (0-6, Sunday = 0) - * @param {firstWeekOfYear} FirstWeekOfYear - The first week of the year (1-2) - * @return {weeksArray} The weeks number array for the current month. - */ -export function getWeekNumbersInMonth( - weeksInMonth: number, - firstDayOfWeek: DayOfWeek, - firstWeekOfYear: FirstWeekOfYear, - navigatedDate: Date -): number[] { - const selectedYear = navigatedDate.getFullYear(); - const selectedMonth = navigatedDate.getMonth(); - let dayOfMonth = 1; - const fistDayOfMonth = new Date(selectedYear, selectedMonth, dayOfMonth); - const endOfFirstWeek = - dayOfMonth + (firstDayOfWeek + TimeConstants.DaysInOneWeek - 1) - adjustWeekDay(firstDayOfWeek, fistDayOfMonth.getDay()); - let endOfWeekRange = new Date(selectedYear, selectedMonth, endOfFirstWeek); - dayOfMonth = endOfWeekRange.getDate(); - - const weeksArray = []; - for (let i = 0; i < weeksInMonth; i++) { - // Get week number for end of week - weeksArray.push(getWeekNumber(endOfWeekRange, firstDayOfWeek, firstWeekOfYear)); - dayOfMonth += TimeConstants.DaysInOneWeek; - endOfWeekRange = new Date(selectedYear, selectedMonth, dayOfMonth); - } - return weeksArray; -} - -/** - * Returns the week number for a date. - * Week numbers are 1 - 52 (53) in a year - * @param {Date} date - A date to find the week number for. - * @param {DayOfWeek} firstDayOfWeek - The first day of the week (0-6, Sunday = 0) - * @param {firstWeekOfYear} firstWeekOfYear - The first week of the year (1-2) - * @return {Number} The week's number in the year. - */ -export function getWeekNumber(date: Date, firstDayOfWeek: DayOfWeek, firstWeekOfYear: FirstWeekOfYear): number { - // First four-day week of the year - minumum days count - const fourDayWeek = 4; - - switch (firstWeekOfYear) { - case FirstWeekOfYear.FirstFullWeek: - return getWeekOfYearFullDays(date, firstDayOfWeek, TimeConstants.DaysInOneWeek); - - case FirstWeekOfYear.FirstFourDayWeek: - return getWeekOfYearFullDays(date, firstDayOfWeek, fourDayWeek); - - default: - return getFirstDayWeekOfYear(date, firstDayOfWeek); - } -} - -/** - * Gets a new date with the time portion zeroed out, i.e., set to midnight - * @param {Date} date - The origin date - * @returns {Date} A new date with the time set to midnight - */ -function getDatePart(date: Date): Date { - return new Date(date.getFullYear(), date.getMonth(), date.getDate()); -} - -/** - * Gets the date for the first day of the week based on the given date assuming - * the specified first day of the week. - * @param {Date} date - The date to find the beginning of the week date for. - * @return {Date} A new date object representing the first day of the week containing the input date. - */ -function getStartDateOfWeek(date: Date, firstDayOfWeek: DayOfWeek): Date { - let daysOffset = firstDayOfWeek - date.getDay(); - if (daysOffset > 0) { - // If first day of week is > date, go 1 week back, to ensure resulting date is in the past. - daysOffset -= TimeConstants.DaysInOneWeek; - } - return addDays(date, daysOffset); -} - -/** - * Helper function to assist in date comparisons - */ -function getDatePartHashValue(date: Date): number { - // Generate date hash value created as sum of Date (up to 31 = 5 bits), Month (up to 11 = 4 bits) and Year. - /* tslint:disable:no-bitwise */ - return date.getDate() + (date.getMonth() << 5) + (date.getFullYear() << 9); - /* tslint:enable:no-bitwise */ -} - -/** - * Helper function for getWeekNumber. - * Returns week number for a date - * @param {date} Date - current selected date. - * @param {firstDayOfWeek} DayOfWeek - The first day of week (0-6, Sunday = 0) - * @param {numberOfFullDays} number - week settings. - * @return {Number} The week's number in the year. - */ -function getWeekOfYearFullDays(date: Date, firstDayOfWeek: DayOfWeek, numberOfFullDays: number): number { - const dayOfYear = getDayOfYear(date) - 1; - let num = date.getDay() - (dayOfYear % TimeConstants.DaysInOneWeek); - - const lastDayOfPrevYear = new Date(date.getFullYear() - 1, MonthOfYear.December, 31); - const daysInYear = getDayOfYear(lastDayOfPrevYear) - 1; - - let num2 = (firstDayOfWeek - num + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek; - if (num2 !== 0 && num2 >= numberOfFullDays) { - num2 -= TimeConstants.DaysInOneWeek; - } - - let num3 = dayOfYear - num2; - if (num3 < 0) { - num -= daysInYear % TimeConstants.DaysInOneWeek; - num2 = (firstDayOfWeek - num + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek; - if (num2 !== 0 && num2 + 1 >= numberOfFullDays) { - num2 -= TimeConstants.DaysInOneWeek; - } - - num3 = daysInYear - num2; - } - - return Math.floor(num3 / TimeConstants.DaysInOneWeek + 1); -} - -/** - * Helper function for getWeekNumber. - * Returns week number for a date - * @param {date} Date - current selected date. - * @param {firstDayOfWeek} DayOfWeek - The first day of week (0-6, Sunday = 0) - * @return {Number} The week's number in the year. - */ -function getFirstDayWeekOfYear(date: Date, firstDayOfWeek: number): number { - const num = getDayOfYear(date) - 1; - const num2 = date.getDay() - (num % TimeConstants.DaysInOneWeek); - const num3 = (num2 - firstDayOfWeek + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek; - - return Math.floor((num + num3) / TimeConstants.DaysInOneWeek + 1); -} - -/** - * Helper function for getWeekNumber. - * Returns adjusted week day number when firstDayOfWeek is other than Sunday - * For Week Day Number comparison checks - * @param {firstDayOfWeek} DayOfWeek - The first day of week (0-6, Sunday = 0) - * @param {dateWeekDay} DayOfWeek - shifts number forward to 1 week in case passed as true - * @return {DayOfWeek} The day of week adjusted to firstDayOfWeek. E.g. when FirstDyOfWeek is Monday (1), Sunday becomes = 7 (7 > 1). - */ -function adjustWeekDay(firstDayOfWeek: DayOfWeek, dateWeekDay: DayOfWeek): number { - return firstDayOfWeek !== DayOfWeek.Sunday && dateWeekDay < firstDayOfWeek ? dateWeekDay + TimeConstants.DaysInOneWeek : dateWeekDay; -} - -/** - * Returns the day number for a date in a year - * The number of days since January 1st in the particular year. - * @param {Date} date - A date to find the day number for. - * @return {Number} The day's number in the year. - */ -function getDayOfYear(date: Date): number { - const month = date.getMonth(); - const year = date.getFullYear(); - let daysUntilDate = 0; - - for (let i = 0; i < month; i++) { - daysUntilDate += daysInMonth(i + 1, year); - } - - daysUntilDate += date.getDate(); - - return daysUntilDate; -} - -/** - * Returns the number of days in the month - * @param {number} month - The month number to target (months 1-12). - * @param {number} year - The year to target. - * @return {Number} The number of days in the month. - */ -function daysInMonth(month: number, year: number): number { - return new Date(year, month, 0).getDate(); -} +export * from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; diff --git a/packages/date-time/src/utilities/dateValues/DateValues.ts b/packages/date-time/src/utilities/dateValues/DateValues.ts index 71952dc26f36f6..ecf0a395e73724 100644 --- a/packages/date-time/src/utilities/dateValues/DateValues.ts +++ b/packages/date-time/src/utilities/dateValues/DateValues.ts @@ -1,49 +1 @@ -/** - * The days of the week - */ -export enum DayOfWeek { - Sunday = 0, - Monday = 1, - Tuesday = 2, - Wednesday = 3, - Thursday = 4, - Friday = 5, - Saturday = 6 -} - -/** - * The months - */ -export enum MonthOfYear { - January = 0, - February = 1, - March = 2, - April = 3, - May = 4, - June = 5, - July = 6, - August = 7, - September = 8, - October = 9, - November = 10, - December = 11 -} - -/** - * First week of the year settings types - */ -export enum FirstWeekOfYear { - FirstDay = 0, - FirstFullWeek = 1, - FirstFourDayWeek = 2 -} - -/** - * The supported date range types - */ -export enum DateRangeType { - Day = 0, - Week = 1, - Month = 2, - WorkWeek = 3 -} +export * from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; diff --git a/packages/date-time/src/utilities/dateValues/TimeConstants.ts b/packages/date-time/src/utilities/dateValues/TimeConstants.ts index 78057a176776dc..ce505ebc77262e 100644 --- a/packages/date-time/src/utilities/dateValues/TimeConstants.ts +++ b/packages/date-time/src/utilities/dateValues/TimeConstants.ts @@ -1,15 +1,2 @@ -/** - * Common constants and methods - */ -const TimeConstants = { - MillisecondsInOneDay: 86400000, - MillisecondsIn1Sec: 1000, - MillisecondsIn1Min: 60000, - MillisecondsIn30Mins: 1800000, - MillisecondsIn1Hour: 3600000, - MinutesInOneDay: 1440, - MinutesInOneHour: 60, - DaysInOneWeek: 7, - MonthInOneYear: 12 -}; +import TimeConstants from 'office-ui-fabric-react/lib/utilities/dateValues/TimeConstants'; export default TimeConstants; diff --git a/packages/fluent-theme/package.json b/packages/fluent-theme/package.json index eb80c072465954..fa0e02141e53b8 100644 --- a/packages/fluent-theme/package.json +++ b/packages/fluent-theme/package.json @@ -30,6 +30,7 @@ "@uifabric/tslint-rules": "^1.0.2" }, "dependencies": { + "@uifabric/legacy": "^6.164.5", "@uifabric/merge-styles": "^6.17.4", "@uifabric/set-version": "^1.1.3", "@uifabric/styling": "^6.47.6", diff --git a/packages/fluent-theme/src/fluent/styles/DatePicker.styles.ts b/packages/fluent-theme/src/fluent/styles/DatePicker.styles.ts index e976921df12e67..ce56628d07b318 100644 --- a/packages/fluent-theme/src/fluent/styles/DatePicker.styles.ts +++ b/packages/fluent-theme/src/fluent/styles/DatePicker.styles.ts @@ -1,4 +1,4 @@ -import { IDatePickerStyleProps, IDatePickerStyles } from 'office-ui-fabric-react/lib/DatePicker'; +import { IDatePickerStyleProps, IDatePickerStyles } from '@uifabric/legacy/lib/DatePicker'; export const DatePickerStyles = (props: IDatePickerStyleProps): Partial => { const { theme } = props; diff --git a/packages/legacy/etc/legacy.api.md b/packages/legacy/etc/legacy.api.md index 58d0e53f8fc67e..ebe3fc82c4fee7 100644 --- a/packages/legacy/etc/legacy.api.md +++ b/packages/legacy/etc/legacy.api.md @@ -4,18 +4,250 @@ ```ts +import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities'; import * as CSS from 'csstype'; +import { DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; +import { DayOfWeek } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; +import { FirstWeekOfYear } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; +import { IBaseProps } from 'office-ui-fabric-react/lib/Utilities'; import { IButtonProps } from 'office-ui-fabric-react/lib/Button'; +import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout'; import { IComponentAs } from 'office-ui-fabric-react/lib/Utilities'; import { IIconProps } from 'office-ui-fabric-react/lib/Icon'; import { IRefObject } from 'office-ui-fabric-react/lib/Utilities'; import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities'; import { IStyle } from 'office-ui-fabric-react/lib/Styling'; +import { IStyleFunction } from 'office-ui-fabric-react/lib/Utilities'; import { IStyleFunctionOrObject } from 'office-ui-fabric-react/lib/Utilities'; +import { ITextFieldProps } from 'office-ui-fabric-react/lib/TextField'; import { ITheme } from 'office-ui-fabric-react/lib/Styling'; import * as PropTypes from 'prop-types'; import * as React_2 from 'react'; +// @public (undocumented) +export class Calendar extends BaseComponent implements ICalendar { + constructor(props: ICalendarProps); + // (undocumented) + componentDidUpdate(): void; + // (undocumented) + componentWillReceiveProps(nextProps: ICalendarProps): void; + // (undocumented) + static defaultProps: ICalendarProps; + // (undocumented) + focus(): void; + // (undocumented) + render(): JSX.Element; +} + +// Warning: (ae-forgotten-export) The symbol "React" needs to be exported by the entry point index.d.ts +// +// @public +export const DatePicker: React.StatelessComponent; + +// @public (undocumented) +export class DatePickerBase extends BaseComponent implements IDatePicker { + constructor(props: IDatePickerProps); + // (undocumented) + componentDidUpdate(prevProps: IDatePickerProps, prevState: IDatePickerState): void; + // (undocumented) + componentWillReceiveProps(nextProps: IDatePickerProps): void; + // (undocumented) + static defaultProps: IDatePickerProps; + // (undocumented) + focus(): void; + // (undocumented) + render(): JSX.Element; + // (undocumented) + reset(): void; + } + +export { DateRangeType } + +export { DayOfWeek } + +export { FirstWeekOfYear } + +// @public (undocumented) +export interface ICalendar { + focus: () => void; +} + +// @public (undocumented) +export interface ICalendarFormatDateCallbacks { + formatDay: (date: Date) => string; + formatMonthDayYear: (date: Date, strings?: ICalendarStrings) => string; + formatMonthYear: (date: Date, strings?: ICalendarStrings) => string; + formatYear: (date: Date) => string; +} + +// @public (undocumented) +export interface ICalendarIconStrings { + closeIcon?: string; + leftNavigation?: string; + rightNavigation?: string; +} + +// @public (undocumented) +export interface ICalendarProps extends IBaseProps, React.HTMLAttributes { + allFocusable?: boolean; + autoNavigateOnSelection?: boolean; + className?: string; + componentRef?: IRefObject; + dateRangeType?: DateRangeType; + dateTimeFormatter?: ICalendarFormatDateCallbacks; + firstDayOfWeek?: DayOfWeek; + firstWeekOfYear?: FirstWeekOfYear; + highlightCurrentMonth?: boolean; + highlightSelectedMonth?: boolean; + isDayPickerVisible?: boolean; + isMonthPickerVisible?: boolean; + maxDate?: Date; + minDate?: Date; + navigationIcons?: ICalendarIconStrings; + onDismiss?: () => void; + onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void; + restrictedDates?: Date[]; + selectDateOnClick?: boolean; + // @deprecated + shouldFocusOnMount?: boolean; + showCloseButton?: boolean; + showGoToToday?: boolean; + showMonthPickerAsOverlay?: boolean; + showSixWeeksByDefault?: boolean; + showWeekNumbers?: boolean; + strings: ICalendarStrings | null; + today?: Date; + value?: Date; + workWeekDays?: DayOfWeek[]; + yearPickerHidden?: boolean; +} + +// @public (undocumented) +export interface ICalendarState { + isDayPickerVisible?: boolean; + isMonthPickerVisible?: boolean; + navigatedDayDate?: Date; + navigatedMonthDate?: Date; + selectedDate?: Date; +} + +// @public (undocumented) +export interface ICalendarStrings { + closeButtonAriaLabel?: string; + days: string[]; + goToToday: string; + months: string[]; + nextMonthAriaLabel?: string; + nextYearAriaLabel?: string; + prevMonthAriaLabel?: string; + prevYearAriaLabel?: string; + shortDays: string[]; + shortMonths: string[]; + weekNumberFormatString?: string; +} + +// @public (undocumented) +export interface IDatePicker { + focus(): void; + reset(): void; +} + +// @public (undocumented) +export interface IDatePickerProps extends IBaseProps, React.HTMLAttributes { + allFocusable?: boolean; + allowTextInput?: boolean; + ariaLabel?: string; + borderless?: boolean; + calendarAs?: IComponentAs; + calendarProps?: ICalendarProps; + calloutProps?: ICalloutProps; + className?: string; + componentRef?: IRefObject; + dateTimeFormatter?: ICalendarFormatDateCallbacks; + disableAutoFocus?: boolean; + disabled?: boolean; + firstDayOfWeek?: DayOfWeek; + firstWeekOfYear?: FirstWeekOfYear; + formatDate?: (date?: Date) => string; + highlightCurrentMonth?: boolean; + highlightSelectedMonth?: boolean; + initialPickerDate?: Date; + isMonthPickerVisible?: boolean; + isRequired?: boolean; + label?: string; + maxDate?: Date; + minDate?: Date; + onAfterMenuDismiss?: () => void; + onSelectDate?: (date: Date | null | undefined) => void; + parseDateFromString?: (dateStr: string) => Date | null; + pickerAriaLabel?: string; + placeholder?: string; + showCloseButton?: boolean; + showGoToToday?: boolean; + showMonthPickerAsOverlay?: boolean; + showWeekNumbers?: boolean; + strings?: IDatePickerStrings; + styles?: IStyleFunction; + tabIndex?: number; + textField?: ITextFieldProps; + theme?: ITheme; + today?: Date; + underlined?: boolean; + value?: Date; +} + +// @public (undocumented) +export interface IDatePickerState { + // (undocumented) + errorMessage?: string; + // (undocumented) + formattedDate?: string; + // (undocumented) + isDatePickerShown?: boolean; + // (undocumented) + selectedDate?: Date; +} + +// @public (undocumented) +export interface IDatePickerStrings { + closeButtonAriaLabel?: string; + days: string[]; + goToToday: string; + invalidInputErrorMessage?: string; + isOutOfBoundsErrorMessage?: string; + isRequiredErrorMessage?: string; + months: string[]; + nextMonthAriaLabel?: string; + nextYearAriaLabel?: string; + prevMonthAriaLabel?: string; + prevYearAriaLabel?: string; + shortDays: string[]; + shortMonths: string[]; +} + +// @public (undocumented) +export interface IDatePickerStyleProps { + className?: string; + // (undocumented) + disabled?: boolean; + // (undocumented) + isDatePickerShown?: boolean; + // (undocumented) + label?: boolean; + theme: ITheme; +} + +// @public (undocumented) +export interface IDatePickerStyles { + // (undocumented) + callout: IStyle; + // (undocumented) + icon: IStyle; + root: IStyle; + // (undocumented) + textField: IStyle; +} + // @public (undocumented) export interface INav { selectedKey: string | undefined; @@ -118,8 +350,6 @@ export interface INavStyles { // @public (undocumented) export function isRelativeUrl(url: string): boolean; -// Warning: (ae-forgotten-export) The symbol "React" needs to be exported by the entry point index.d.ts -// // @public (undocumented) export const Nav: React.StatelessComponent; diff --git a/packages/office-ui-fabric-react/src/Calendar.ts b/packages/legacy/src/Calendar.ts similarity index 100% rename from packages/office-ui-fabric-react/src/Calendar.ts rename to packages/legacy/src/Calendar.ts diff --git a/packages/office-ui-fabric-react/src/DatePicker.ts b/packages/legacy/src/DatePicker.ts similarity index 100% rename from packages/office-ui-fabric-react/src/DatePicker.ts rename to packages/legacy/src/DatePicker.ts diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.doc.tsx b/packages/legacy/src/components/Calendar/Calendar.doc.tsx similarity index 83% rename from packages/office-ui-fabric-react/src/components/Calendar/Calendar.doc.tsx rename to packages/legacy/src/components/Calendar/Calendar.doc.tsx index c9b59f6fdaeb56..f5af7dc8047937 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.doc.tsx +++ b/packages/legacy/src/components/Calendar/Calendar.doc.tsx @@ -1,21 +1,19 @@ import * as React from 'react'; -import { DateRangeType, DayOfWeek } from 'office-ui-fabric-react/lib/Calendar'; -import { IDocPageProps } from '../../common/DocPage.types'; +import { DateRangeType, DayOfWeek } from '../../Calendar'; +import { IDocPageProps } from 'office-ui-fabric-react/lib/common/DocPage.types'; import { CalendarButtonExample } from './examples/Calendar.Button.Example'; import { CalendarInlineExample } from './examples/Calendar.Inline.Example'; -import { addMonths, addYears, addWeeks, addDays } from '../../utilities/dateMath/DateMath'; +import { addMonths, addYears, addWeeks, addDays } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; -const CalendarButtonExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx') as string; -const CalendarButtonExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx') as string; -const CalendarInlineExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx') as string; -const CalendarInlineExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx') as string; +const CalendarButtonExampleCode = require('!raw-loader!@uifabric/legacy/src/components/Calendar/examples/Calendar.Button.Example.tsx') as string; +const CalendarInlineExampleCode = require('!raw-loader!@uifabric/legacy/src/components/Calendar/examples/Calendar.Inline.Example.tsx') as string; const today = new Date(Date.now()); export const CalendarPageProps: IDocPageProps = { title: 'Calendar', componentName: 'Calendar', - componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Calendar', + componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/legacy/src/components/Calendar', examples: [ { title: 'Inline Calendar', @@ -28,8 +26,7 @@ export const CalendarPageProps: IDocPageProps = { autoNavigateOnSelection={false} showGoToToday={true} /> - ), - codepenJS: CalendarInlineExampleCodepen + ) }, { title: 'Inline Calendar with overlaid month picker when header is clicked', @@ -191,8 +188,7 @@ export const CalendarPageProps: IDocPageProps = { title: 'Calendar launched from a button', code: CalendarButtonExampleCode, - view: , - codepenJS: CalendarButtonExampleCodepen + view: }, { title: 'Month picker launched from a button', @@ -235,10 +231,10 @@ export const CalendarPageProps: IDocPageProps = { ) } ], - overview: require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md'), + overview: require('!raw-loader!@uifabric/legacy/src/components/Calendar/docs/CalendarOverview.md'), bestPractices: '', - dos: require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md'), - donts: require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md'), + dos: require('!raw-loader!@uifabric/legacy/src/components/Calendar/docs/CalendarDos.md'), + donts: require('!raw-loader!@uifabric/legacy/src/components/Calendar/docs/CalendarDonts.md'), isHeaderVisible: true, isFeedbackVisible: true }; diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss b/packages/legacy/src/components/Calendar/Calendar.scss similarity index 99% rename from packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss rename to packages/legacy/src/components/Calendar/Calendar.scss index 340bb6553cd438..8b71a36575594d 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss +++ b/packages/legacy/src/components/Calendar/Calendar.scss @@ -1,4 +1,5 @@ -@import '../../common/common'; +@import '~office-ui-fabric-react/src/common/common'; + // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. // // Office UI Fabric diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/legacy/src/components/Calendar/Calendar.test.tsx similarity index 99% rename from packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx rename to packages/legacy/src/components/Calendar/Calendar.test.tsx index ba7e5e868025f6..609ca3f15deac3 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx +++ b/packages/legacy/src/components/Calendar/Calendar.test.tsx @@ -7,8 +7,8 @@ import { mount } from 'enzyme'; import { Calendar } from './Calendar'; import { DateRangeType, DayOfWeek } from './Calendar.types'; -import { addDays, compareDates } from '../../utilities/dateMath/DateMath'; -import { resetIds } from '../../Utilities'; +import { addDays, compareDates } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; +import { resetIds } from 'office-ui-fabric-react/lib/Utilities'; describe('Calendar', () => { const dayPickerStrings = { diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/legacy/src/components/Calendar/Calendar.tsx similarity index 97% rename from packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx rename to packages/legacy/src/components/Calendar/Calendar.tsx index eb3b7356276ede..afbb714528a15d 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx +++ b/packages/legacy/src/components/Calendar/Calendar.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { ICalendar, ICalendarProps, ICalendarStrings, ICalendarIconStrings, ICalendarFormatDateCallbacks } from './Calendar.types'; -import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues'; +import { DayOfWeek, FirstWeekOfYear, DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; import { CalendarDay, ICalendarDay } from './CalendarDay'; import { CalendarMonth, ICalendarMonth } from './CalendarMonth'; -import { compareDates, getDateRangeArray } from '../../utilities/dateMath/DateMath'; -import { css, BaseComponent, KeyCodes, getNativeProps, divProperties } from '../../Utilities'; +import { compareDates, getDateRangeArray } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; +import { css, BaseComponent, KeyCodes, getNativeProps, divProperties } from 'office-ui-fabric-react/lib/Utilities'; import * as stylesImport from './Calendar.scss'; const styles: any = stylesImport; diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts b/packages/legacy/src/components/Calendar/Calendar.types.ts similarity index 97% rename from packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts rename to packages/legacy/src/components/Calendar/Calendar.types.ts index bdf07f8be6b01a..32171a1010befd 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.types.ts +++ b/packages/legacy/src/components/Calendar/Calendar.types.ts @@ -1,5 +1,5 @@ -import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues'; -import { IRefObject, IBaseProps } from '../../Utilities'; +import { DayOfWeek, FirstWeekOfYear, DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; +import { IRefObject, IBaseProps } from 'office-ui-fabric-react/lib/Utilities'; export { DayOfWeek, DateRangeType, FirstWeekOfYear }; /** diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/legacy/src/components/Calendar/CalendarDay.tsx similarity index 98% rename from packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx rename to packages/legacy/src/components/Calendar/CalendarDay.tsx index 1f1c647d2afad4..6c81f61994bd46 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx +++ b/packages/legacy/src/components/Calendar/CalendarDay.tsx @@ -1,9 +1,20 @@ import * as React from 'react'; -import { BaseComponent, KeyCodes, css, getId, getRTL, getRTLSafeKeyCode, format, IRefObject, findIndex, find } from '../../Utilities'; +import { + BaseComponent, + KeyCodes, + css, + getId, + getRTL, + getRTLSafeKeyCode, + format, + IRefObject, + findIndex, + find +} from 'office-ui-fabric-react/lib/Utilities'; import { ICalendarStrings, ICalendarIconStrings, ICalendarFormatDateCallbacks } from './Calendar.types'; -import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues'; -import { FocusZone } from '../../FocusZone'; -import { Icon } from '../../Icon'; +import { DayOfWeek, FirstWeekOfYear, DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; +import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; +import { Icon } from 'office-ui-fabric-react/lib/Icon'; import { addDays, addWeeks, @@ -16,7 +27,7 @@ import { getWeekNumbersInMonth, getMonthStart, getMonthEnd -} from '../../utilities/dateMath/DateMath'; +} from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; import * as stylesImport from './Calendar.scss'; const styles: any = stylesImport; diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx b/packages/legacy/src/components/Calendar/CalendarMonth.tsx similarity index 98% rename from packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx rename to packages/legacy/src/components/Calendar/CalendarMonth.tsx index 02e84e0faa3ade..2fdf1148a17176 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx +++ b/packages/legacy/src/components/Calendar/CalendarMonth.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { BaseComponent, KeyCodes, css, getRTL, IRefObject } from '../../Utilities'; +import { BaseComponent, KeyCodes, css, getRTL, IRefObject } from 'office-ui-fabric-react/lib/Utilities'; import { ICalendarStrings, ICalendarIconStrings, ICalendarFormatDateCallbacks } from './Calendar.types'; -import { FocusZone } from '../../FocusZone'; +import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; import { addYears, setMonth, @@ -10,8 +10,8 @@ import { getMonthStart, getMonthEnd, compareDatePart -} from '../../utilities/dateMath/DateMath'; -import { Icon } from '../../Icon'; +} from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; +import { Icon } from 'office-ui-fabric-react/lib/Icon'; import * as stylesImport from './Calendar.scss'; import { CalendarYear, ICalendarYearRange } from './CalendarYear'; const styles: any = stylesImport; diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarYear.tsx b/packages/legacy/src/components/Calendar/CalendarYear.tsx similarity index 98% rename from packages/office-ui-fabric-react/src/components/Calendar/CalendarYear.tsx rename to packages/legacy/src/components/Calendar/CalendarYear.tsx index 5fec5b8ab6ba69..515682fb406ef8 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarYear.tsx +++ b/packages/legacy/src/components/Calendar/CalendarYear.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import { KeyCodes, css, getRTL } from '../../Utilities'; +import { KeyCodes, css, getRTL } from 'office-ui-fabric-react/lib/Utilities'; import { ICalendarIconStrings } from './Calendar.types'; -import { FocusZone } from '../../FocusZone'; +import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; import * as stylesImport from './Calendar.scss'; -import { Icon } from '../../Icon'; +import { Icon } from 'office-ui-fabric-react/lib/Icon'; const styles: any = stylesImport; diff --git a/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap b/packages/legacy/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap similarity index 100% rename from packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap rename to packages/legacy/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap diff --git a/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md b/packages/legacy/src/components/Calendar/docs/CalendarDonts.md similarity index 93% rename from packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md rename to packages/legacy/src/components/Calendar/docs/CalendarDonts.md index 85f2b8d6247079..8f17b085443c44 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md +++ b/packages/legacy/src/components/Calendar/docs/CalendarDonts.md @@ -1,4 +1,4 @@ - Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar. - Don't attempt to force resize the control in any way. - Don't force the control to render one mode vs. the other (year or month/day) -- The flyout selector is a light dismiss control. Don't modify this behavior in any way. \ No newline at end of file +- The flyout selector is a light dismiss control. Don't modify this behavior in any way. diff --git a/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md b/packages/legacy/src/components/Calendar/docs/CalendarDos.md similarity index 98% rename from packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md rename to packages/legacy/src/components/Calendar/docs/CalendarDos.md index 1ce606e7118c01..9491d13ba7080d 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md +++ b/packages/legacy/src/components/Calendar/docs/CalendarDos.md @@ -2,4 +2,4 @@ - Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference). - The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate. - When the control is engaged, the Calendar renders as a flyout and has defined widths (300px -narrow and 440px – wide). Plan your UI implementation accordingly. -- The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format. \ No newline at end of file +- The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format. diff --git a/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md b/packages/legacy/src/components/Calendar/docs/CalendarOverview.md similarity index 71% rename from packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md rename to packages/legacy/src/components/Calendar/docs/CalendarOverview.md index 9cf4fbf40ffa9f..e063c2603f0a9e 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md +++ b/packages/legacy/src/components/Calendar/docs/CalendarOverview.md @@ -1 +1 @@ -The calendar component allows a user to browse through a calendar and pick a date value. \ No newline at end of file +The calendar component allows a user to browse through a calendar and pick a date value. diff --git a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx b/packages/legacy/src/components/Calendar/examples/Calendar.Button.Example.tsx similarity index 98% rename from packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx rename to packages/legacy/src/components/Calendar/examples/Calendar.Button.Example.tsx index c1c5698f5db3ed..7727a4bc1a7cbd 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx +++ b/packages/legacy/src/components/Calendar/examples/Calendar.Button.Example.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/Callout'; -import { Calendar, DayOfWeek } from 'office-ui-fabric-react/lib/Calendar'; +import { Calendar, DayOfWeek } from '@uifabric/legacy/lib/Calendar'; import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone'; const DayPickerStrings = { diff --git a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx b/packages/legacy/src/components/Calendar/examples/Calendar.Inline.Example.tsx similarity index 97% rename from packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx rename to packages/legacy/src/components/Calendar/examples/Calendar.Inline.Example.tsx index 9011458b1f8527..bec5fc343ac9b5 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx +++ b/packages/legacy/src/components/Calendar/examples/Calendar.Inline.Example.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { addDays, getDateRangeArray } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; -import { Calendar, DayOfWeek } from 'office-ui-fabric-react/lib/Calendar'; -import { DateRangeType } from 'office-ui-fabric-react/lib/Calendar'; +import { Calendar, DayOfWeek, DateRangeType } from '@uifabric/legacy/lib/Calendar'; const DayPickerStrings = { months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], diff --git a/packages/office-ui-fabric-react/src/components/Calendar/index.ts b/packages/legacy/src/components/Calendar/index.ts similarity index 100% rename from packages/office-ui-fabric-react/src/components/Calendar/index.ts rename to packages/legacy/src/components/Calendar/index.ts diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.base.tsx b/packages/legacy/src/components/DatePicker/DatePicker.base.tsx similarity index 96% rename from packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.base.tsx rename to packages/legacy/src/components/DatePicker/DatePicker.base.tsx index 939b3fcb3b08db..c8affa007780de 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.base.tsx +++ b/packages/legacy/src/components/DatePicker/DatePicker.base.tsx @@ -1,13 +1,21 @@ import * as React from 'react'; import { IDatePicker, IDatePickerProps, IDatePickerStrings, IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types'; -import { BaseComponent, KeyCodes, classNamesFunction, getId, getNativeProps, divProperties, css } from '../../Utilities'; +import { + BaseComponent, + KeyCodes, + classNamesFunction, + getId, + getNativeProps, + divProperties, + css +} from 'office-ui-fabric-react/lib/Utilities'; import { Calendar, ICalendar, DayOfWeek } from '../../Calendar'; -import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues'; -import { Callout } from '../../Callout'; -import { DirectionalHint } from '../../common/DirectionalHint'; -import { TextField, ITextField } from '../../TextField'; -import { compareDates, compareDatePart } from '../../utilities/dateMath/DateMath'; -import { FocusTrapZone } from '../../FocusTrapZone'; +import { FirstWeekOfYear } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; +import { Callout } from 'office-ui-fabric-react/lib/Callout'; +import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHint'; +import { TextField, ITextField } from 'office-ui-fabric-react/lib/TextField'; +import { compareDates, compareDatePart } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; +import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone'; const getClassNames = classNamesFunction(); diff --git a/packages/legacy/src/components/DatePicker/DatePicker.doc.tsx b/packages/legacy/src/components/DatePicker/DatePicker.doc.tsx new file mode 100644 index 00000000000000..9d523ef80dcdcd --- /dev/null +++ b/packages/legacy/src/components/DatePicker/DatePicker.doc.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +import { DatePickerBasicExample } from './examples/DatePicker.Basic.Example'; +import { DatePickerDisabledExample } from './examples/DatePicker.Disabled.Example'; +import { IDocPageProps } from 'office-ui-fabric-react/lib/common/DocPage.types'; +import { DatePickerWeekNumbersExample } from './examples/DatePicker.WeekNumbers.Example'; +import { DatePickerRequiredExample } from './examples/DatePicker.Required.Example'; +import { DatePickerInputExample } from './examples/DatePicker.Input.Example'; +import { DatePickerFormatExample } from './examples/DatePicker.Format.Example'; +import { DatePickerBoundedExample } from './examples/DatePicker.Bounded.Example'; + +const DatePickerBasicExampleCode = require('!raw-loader!@uifabric/legacy/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx') as string; +const DatePickerDisabledExampleCode = require('!raw-loader!@uifabric/legacy/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx') as string; +const DatePickerWeekNumbersExampleCode = require('!raw-loader!@uifabric/legacy/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx') as string; +const DatePickerRequiredExampleCode = require('!raw-loader!@uifabric/legacy/src/components/DatePicker/examples/DatePicker.Required.Example.tsx') as string; +const DatePickerInputExampleCode = require('!raw-loader!@uifabric/legacy/src/components/DatePicker/examples/DatePicker.Input.Example.tsx') as string; +const DatePickerFormatExampleCode = require('!raw-loader!@uifabric/legacy/src/components/DatePicker/examples/DatePicker.Format.Example.tsx') as string; +const DatePickerBoundedExampleCode = require('!raw-loader!@uifabric/legacy/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx') as string; + +export const DatePickerPageProps: IDocPageProps = { + title: 'DatePicker', + componentName: 'DatePicker', + componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/legacy/src/components/DatePicker', + examples: [ + { + title: 'Default DatePicker', + code: DatePickerBasicExampleCode, + view: + }, + { + title: 'Disabled DatePicker', + code: DatePickerDisabledExampleCode, + view: + }, + { + title: 'DatePicker with week numbers', + code: DatePickerWeekNumbersExampleCode, + view: + }, + { + title: 'DatePicker with required field', + code: DatePickerRequiredExampleCode, + view: + }, + { + title: 'DatePicker allows input date string', + code: DatePickerInputExampleCode, + view: + }, + { + title: 'DatePicker allows dates to be formatted', + code: DatePickerFormatExampleCode, + view: + }, + { + title: 'DatePicker with date boundary (minDate, maxDate)', + code: DatePickerBoundedExampleCode, + view: + } + ], + overview: require('!raw-loader!@uifabric/legacy/src/components/DatePicker/docs/DatePickerOverview.md'), + bestPractices: '', + dos: require('!raw-loader!@uifabric/legacy/src/components/DatePicker/docs/DatePickerDos.md'), + donts: require('!raw-loader!@uifabric/legacy/src/components/DatePicker/docs/DatePickerDonts.md'), + isHeaderVisible: true, + isFeedbackVisible: true +}; diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.styles.ts b/packages/legacy/src/components/DatePicker/DatePicker.styles.ts similarity index 97% rename from packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.styles.ts rename to packages/legacy/src/components/DatePicker/DatePicker.styles.ts index 3de50d61bc37d2..632e307c7db31a 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.styles.ts +++ b/packages/legacy/src/components/DatePicker/DatePicker.styles.ts @@ -1,5 +1,5 @@ import { IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types'; -import { IStyle, normalize, getGlobalClassNames, FontSizes } from '../../Styling'; +import { IStyle, normalize, getGlobalClassNames, FontSizes } from 'office-ui-fabric-react/lib/Styling'; const GlobalClassNames = { root: 'ms-DatePicker', diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.test.tsx b/packages/legacy/src/components/DatePicker/DatePicker.test.tsx similarity index 97% rename from packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.test.tsx rename to packages/legacy/src/components/DatePicker/DatePicker.test.tsx index 15ab8845718908..f6b64349a294b4 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.test.tsx +++ b/packages/legacy/src/components/DatePicker/DatePicker.test.tsx @@ -5,11 +5,11 @@ import { Calendar, ICalendarStrings } from '../../Calendar'; import { DatePicker } from './DatePicker'; import { DatePickerBase } from './DatePicker.base'; import { IDatePickerStrings } from './DatePicker.types'; -import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues'; +import { FirstWeekOfYear } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; import { shallow, mount, ReactWrapper } from 'enzyme'; -import { resetIds, KeyCodes } from '../../Utilities'; -import { Callout } from '../Callout/Callout'; -import { PrimaryButton } from '../Button/PrimaryButton/PrimaryButton'; +import { resetIds, KeyCodes } from 'office-ui-fabric-react/lib/Utilities'; +import { Callout } from 'office-ui-fabric-react/lib/Callout'; +import { PrimaryButton } from 'office-ui-fabric-react/lib/Button'; describe('DatePicker', () => { beforeEach(() => { diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx b/packages/legacy/src/components/DatePicker/DatePicker.tsx similarity index 87% rename from packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx rename to packages/legacy/src/components/DatePicker/DatePicker.tsx index 6bdd71b2d25763..d792ac69f8937e 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx +++ b/packages/legacy/src/components/DatePicker/DatePicker.tsx @@ -1,4 +1,4 @@ -import { styled } from '../../Utilities'; +import { styled } from 'office-ui-fabric-react/lib/Utilities'; import { IDatePickerProps, IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types'; import { DatePickerBase } from './DatePicker.base'; import { styles } from './DatePicker.styles'; diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts b/packages/legacy/src/components/DatePicker/DatePicker.types.ts similarity index 95% rename from packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts rename to packages/legacy/src/components/DatePicker/DatePicker.types.ts index 18c558e0f513a2..ccf44c3af07f93 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts +++ b/packages/legacy/src/components/DatePicker/DatePicker.types.ts @@ -1,10 +1,10 @@ import { DayOfWeek, ICalendarProps } from '../../Calendar'; -import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues'; +import { FirstWeekOfYear } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues'; import { ICalendarFormatDateCallbacks } from '../Calendar/Calendar.types'; -import { IStyle, ITheme } from '../../Styling'; -import { IRefObject, IBaseProps, IStyleFunction, IComponentAs } from '../../Utilities'; -import { ICalloutProps } from '../../Callout'; -import { ITextFieldProps } from '../TextField/TextField.types'; +import { IStyle, ITheme } from 'office-ui-fabric-react/lib/Styling'; +import { IRefObject, IBaseProps, IStyleFunction, IComponentAs } from 'office-ui-fabric-react/lib/Utilities'; +import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout'; +import { ITextFieldProps } from 'office-ui-fabric-react/lib/TextField'; /** * {@docCategory DatePicker} diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/legacy/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap similarity index 100% rename from packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap rename to packages/legacy/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md b/packages/legacy/src/components/DatePicker/docs/DatePickerDonts.md similarity index 93% rename from packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md rename to packages/legacy/src/components/DatePicker/docs/DatePickerDonts.md index 85f2b8d6247079..8f17b085443c44 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md +++ b/packages/legacy/src/components/DatePicker/docs/DatePickerDonts.md @@ -1,4 +1,4 @@ - Don't attempt to break apart year from month/day selectors. If granularity is required, use the Dropdown control or something similar. - Don't attempt to force resize the control in any way. - Don't force the control to render one mode vs. the other (year or month/day) -- The flyout selector is a light dismiss control. Don't modify this behavior in any way. \ No newline at end of file +- The flyout selector is a light dismiss control. Don't modify this behavior in any way. diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md b/packages/legacy/src/components/DatePicker/docs/DatePickerDos.md similarity index 98% rename from packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md rename to packages/legacy/src/components/DatePicker/docs/DatePickerDos.md index 171ad514160e0d..38c7bc8e335bfc 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md +++ b/packages/legacy/src/components/DatePicker/docs/DatePickerDos.md @@ -2,4 +2,4 @@ - Set the default date to the current date unless a specific date is required for context (e.g. the date of the conference). - The control is designed to resize relative to available screen width. Allow it to render in either wide or narrow as appropriate. - When the control is engaged, the DatePicker renders as a flyout and has defined widths (300px -narrow and 440px – wide). Plan your UI implementation accordingly. -- The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format. \ No newline at end of file +- The control renders date in a specific format. If allowing for manual entry of date, provide helper text in the appropriate format. diff --git a/packages/legacy/src/components/DatePicker/docs/DatePickerOverview.md b/packages/legacy/src/components/DatePicker/docs/DatePickerOverview.md new file mode 100644 index 00000000000000..ad79ab955b9cf6 --- /dev/null +++ b/packages/legacy/src/components/DatePicker/docs/DatePickerOverview.md @@ -0,0 +1 @@ +The DatePicker component enables a user to pick a date value. diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx b/packages/legacy/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx similarity index 96% rename from packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx rename to packages/legacy/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx index 4245373eb49396..b4361b8ff6bc28 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx +++ b/packages/legacy/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/legacy'; import './DatePicker.Examples.scss'; const DayPickerStrings: IDatePickerStrings = { diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx b/packages/legacy/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx similarity index 95% rename from packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx rename to packages/legacy/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx index f770fbb9418319..c63d63c5c76a71 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx +++ b/packages/legacy/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/legacy/lib/DatePicker'; import { addMonths, addYears } from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath'; import './DatePicker.Examples.scss'; diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx b/packages/legacy/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx similarity index 94% rename from packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx rename to packages/legacy/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx index 58fcc0813a1e78..6a96a24cd03630 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx +++ b/packages/legacy/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/legacy/lib/DatePicker'; import './DatePicker.Examples.scss'; const DayPickerStrings: IDatePickerStrings = { diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Examples.scss b/packages/legacy/src/components/DatePicker/examples/DatePicker.Examples.scss similarity index 61% rename from packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Examples.scss rename to packages/legacy/src/components/DatePicker/examples/DatePicker.Examples.scss index c6c407c98e043d..35c756624d0da3 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Examples.scss +++ b/packages/legacy/src/components/DatePicker/examples/DatePicker.Examples.scss @@ -1,11 +1,9 @@ -@import '../../../common/_variables'; - :global { .docs-DatePickerExample { .ms-DatePicker, .ms-Dropdown { margin: 0 0 15px 0; - max-width: $maxFieldWidth; + max-width: 300px; } } } diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx b/packages/legacy/src/components/DatePicker/examples/DatePicker.Format.Example.tsx similarity index 97% rename from packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx rename to packages/legacy/src/components/DatePicker/examples/DatePicker.Format.Example.tsx index cc3ea6076c8d53..9ad96033dce5d3 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx +++ b/packages/legacy/src/components/DatePicker/examples/DatePicker.Format.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/legacy/lib/DatePicker'; import './DatePicker.Examples.scss'; const DayPickerStrings: IDatePickerStrings = { diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx b/packages/legacy/src/components/DatePicker/examples/DatePicker.Input.Example.tsx similarity index 95% rename from packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx rename to packages/legacy/src/components/DatePicker/examples/DatePicker.Input.Example.tsx index 61557d85c432d0..32f829e57053af 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx +++ b/packages/legacy/src/components/DatePicker/examples/DatePicker.Input.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/legacy/lib/DatePicker'; import './DatePicker.Examples.scss'; const DayPickerStrings: IDatePickerStrings = { diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx b/packages/legacy/src/components/DatePicker/examples/DatePicker.Required.Example.tsx similarity index 94% rename from packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx rename to packages/legacy/src/components/DatePicker/examples/DatePicker.Required.Example.tsx index 26101e9a2c9cb6..d331f34e35f126 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx +++ b/packages/legacy/src/components/DatePicker/examples/DatePicker.Required.Example.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/legacy/lib/DatePicker'; import './DatePicker.Examples.scss'; const DayPickerStrings: IDatePickerStrings = { diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx b/packages/legacy/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx similarity index 96% rename from packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx rename to packages/legacy/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx index 37d531b451d88f..fdfe0ae3a1ddf6 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx +++ b/packages/legacy/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; -import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker, DayOfWeek, IDatePickerStrings } from '@uifabric/legacy/lib/DatePicker'; import './DatePicker.Examples.scss'; const DayPickerStrings: IDatePickerStrings = { diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/index.ts b/packages/legacy/src/components/DatePicker/index.ts similarity index 100% rename from packages/office-ui-fabric-react/src/components/DatePicker/index.ts rename to packages/legacy/src/components/DatePicker/index.ts diff --git a/packages/legacy/src/components/Nav/Nav.doc.tsx b/packages/legacy/src/components/Nav/Nav.doc.tsx index 8d840dc50dc1ff..b374bb0f7522df 100644 --- a/packages/legacy/src/components/Nav/Nav.doc.tsx +++ b/packages/legacy/src/components/Nav/Nav.doc.tsx @@ -6,13 +6,9 @@ import { NavNestedExample } from './examples/Nav.Nested.Example'; import { NavCustomGroupHeadersExample } from './examples/Nav.CustomGroupHeaders.Example'; const NavBasicExampleCode = require('!raw-loader!@uifabric/legacy/src/components/Nav/examples/Nav.Basic.Example.tsx') as string; -const NavBasicExampleCodepen = require('!@uifabric/codepen-loader!@uifabric/legacy/src/components/Nav/examples/Nav.Basic.Example.tsx') as string; const NavFabricDemoAppExampleCode = require('!raw-loader!@uifabric/legacy/src/components/Nav/examples/Nav.FabricDemoApp.Example.tsx') as string; -const NavFabricDemoAppExampleCodepen = require('!@uifabric/codepen-loader!@uifabric/legacy/src/components/Nav/examples/Nav.FabricDemoApp.Example.tsx') as string; const NavNestedExampleCode = require('!raw-loader!@uifabric/legacy/src/components/Nav/examples/Nav.Nested.Example.tsx') as string; -const NavNestedExampleCodepen = require('!@uifabric/codepen-loader!@uifabric/legacy/src/components/Nav/examples/Nav.Nested.Example.tsx') as string; const NavCustomGroupHeadersExampleCode = require('!raw-loader!@uifabric/legacy/src/components/Nav/examples/Nav.CustomGroupHeaders.Example.tsx') as string; -const NavCustomGroupHeadersExampleCodepen = require('!@uifabric/codepen-loader!@uifabric/legacy/src/components/Nav/examples/Nav.CustomGroupHeaders.Example.tsx') as string; export const NavPageProps: IDocPageProps = { title: 'Nav', @@ -22,25 +18,21 @@ export const NavPageProps: IDocPageProps = { { title: 'Basic nav with sample links', code: NavBasicExampleCode, - codepenJS: NavBasicExampleCodepen, view: }, { title: 'Nav similar to the one in this demo app', code: NavFabricDemoAppExampleCode, - codepenJS: NavFabricDemoAppExampleCodepen, view: }, { title: 'Nav with nested links', code: NavNestedExampleCode, - codepenJS: NavNestedExampleCodepen, view: }, { title: 'Nav with custom group header', code: NavCustomGroupHeadersExampleCode, - codepenJS: NavCustomGroupHeadersExampleCodepen, view: } ], diff --git a/packages/legacy/src/index.ts b/packages/legacy/src/index.ts index 722073f7a5fb85..af4f9d88f31799 100644 --- a/packages/legacy/src/index.ts +++ b/packages/legacy/src/index.ts @@ -1,3 +1,5 @@ +export * from './Calendar'; +export * from './DatePicker'; export * from './Nav'; import './version'; diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md index 81fa73778937a5..a6fba8776429cf 100644 --- a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md +++ b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md @@ -472,21 +472,6 @@ export enum ButtonType { primary = 1 } -// @public (undocumented) -export class Calendar extends BaseComponent implements ICalendar { - constructor(props: ICalendarProps); - // (undocumented) - componentDidUpdate(): void; - // (undocumented) - componentWillReceiveProps(nextProps: ICalendarProps): void; - // (undocumented) - static defaultProps: ICalendarProps; - // (undocumented) - focus(): void; - // (undocumented) - render(): JSX.Element; -} - // Warning: (ae-forgotten-export) The symbol "ICalloutState" needs to be exported by the entry point index.d.ts // // @public (undocumented) @@ -775,56 +760,6 @@ export function createItem(name: string, isValid: boolean): ISuggestionModel; - -// @public (undocumented) -export class DatePickerBase extends BaseComponent implements IDatePicker { - constructor(props: IDatePickerProps); - // (undocumented) - componentDidUpdate(prevProps: IDatePickerProps, prevState: IDatePickerState): void; - // (undocumented) - componentWillReceiveProps(nextProps: IDatePickerProps): void; - // (undocumented) - static defaultProps: IDatePickerProps; - // (undocumented) - focus(): void; - // (undocumented) - render(): JSX.Element; - // (undocumented) - reset(): void; - } - -// @public -export enum DateRangeType { - // (undocumented) - Day = 0, - // (undocumented) - Month = 2, - // (undocumented) - Week = 1, - // (undocumented) - WorkWeek = 3 -} - -// @public -export enum DayOfWeek { - // (undocumented) - Friday = 5, - // (undocumented) - Monday = 1, - // (undocumented) - Saturday = 6, - // (undocumented) - Sunday = 0, - // (undocumented) - Thursday = 4, - // (undocumented) - Tuesday = 2, - // (undocumented) - Wednesday = 3 -} - // @public (undocumented) export const DEFAULT_MASK_CHAR = "_"; @@ -1190,16 +1125,6 @@ export class FacepileBase extends BaseComponent { render(): JSX.Element; } -// @public -export enum FirstWeekOfYear { - // (undocumented) - FirstDay = 0, - // (undocumented) - FirstFourDayWeek = 2, - // (undocumented) - FirstFullWeek = 1 -} - // @public (undocumented) export class FloatingPeoplePicker extends BaseFloatingPeoplePicker { // (undocumented) @@ -1926,85 +1851,6 @@ export interface IButtonStyles { textContainer?: IStyle; } -// @public (undocumented) -export interface ICalendar { - focus: () => void; -} - -// @public (undocumented) -export interface ICalendarFormatDateCallbacks { - formatDay: (date: Date) => string; - formatMonthDayYear: (date: Date, strings?: ICalendarStrings) => string; - formatMonthYear: (date: Date, strings?: ICalendarStrings) => string; - formatYear: (date: Date) => string; -} - -// @public (undocumented) -export interface ICalendarIconStrings { - closeIcon?: string; - leftNavigation?: string; - rightNavigation?: string; -} - -// @public (undocumented) -export interface ICalendarProps extends IBaseProps, React_2.HTMLAttributes { - allFocusable?: boolean; - autoNavigateOnSelection?: boolean; - className?: string; - componentRef?: IRefObject; - dateRangeType?: DateRangeType; - dateTimeFormatter?: ICalendarFormatDateCallbacks; - firstDayOfWeek?: DayOfWeek; - firstWeekOfYear?: FirstWeekOfYear; - highlightCurrentMonth?: boolean; - highlightSelectedMonth?: boolean; - isDayPickerVisible?: boolean; - isMonthPickerVisible?: boolean; - maxDate?: Date; - minDate?: Date; - navigationIcons?: ICalendarIconStrings; - onDismiss?: () => void; - onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void; - restrictedDates?: Date[]; - selectDateOnClick?: boolean; - // @deprecated - shouldFocusOnMount?: boolean; - showCloseButton?: boolean; - showGoToToday?: boolean; - showMonthPickerAsOverlay?: boolean; - showSixWeeksByDefault?: boolean; - showWeekNumbers?: boolean; - strings: ICalendarStrings | null; - today?: Date; - value?: Date; - workWeekDays?: DayOfWeek[]; - yearPickerHidden?: boolean; -} - -// @public (undocumented) -export interface ICalendarState { - isDayPickerVisible?: boolean; - isMonthPickerVisible?: boolean; - navigatedDayDate?: Date; - navigatedMonthDate?: Date; - selectedDate?: Date; -} - -// @public (undocumented) -export interface ICalendarStrings { - closeButtonAriaLabel?: string; - days: string[]; - goToToday: string; - months: string[]; - nextMonthAriaLabel?: string; - nextYearAriaLabel?: string; - prevMonthAriaLabel?: string; - prevYearAriaLabel?: string; - shortDays: string[]; - shortMonths: string[]; - weekNumberFormatString?: string; -} - // @public (undocumented) export interface ICalloutContentStyleProps { backgroundColor?: string; @@ -3037,108 +2883,6 @@ export enum IconType { image = 1 } -// @public (undocumented) -export interface IDatePicker { - focus(): void; - reset(): void; -} - -// @public (undocumented) -export interface IDatePickerProps extends IBaseProps, React_2.HTMLAttributes { - allFocusable?: boolean; - allowTextInput?: boolean; - ariaLabel?: string; - borderless?: boolean; - calendarAs?: IComponentAs; - calendarProps?: ICalendarProps; - calloutProps?: ICalloutProps; - className?: string; - componentRef?: IRefObject; - dateTimeFormatter?: ICalendarFormatDateCallbacks; - disableAutoFocus?: boolean; - disabled?: boolean; - firstDayOfWeek?: DayOfWeek; - firstWeekOfYear?: FirstWeekOfYear; - formatDate?: (date?: Date) => string; - highlightCurrentMonth?: boolean; - highlightSelectedMonth?: boolean; - initialPickerDate?: Date; - isMonthPickerVisible?: boolean; - isRequired?: boolean; - label?: string; - maxDate?: Date; - minDate?: Date; - onAfterMenuDismiss?: () => void; - onSelectDate?: (date: Date | null | undefined) => void; - parseDateFromString?: (dateStr: string) => Date | null; - pickerAriaLabel?: string; - placeholder?: string; - showCloseButton?: boolean; - showGoToToday?: boolean; - showMonthPickerAsOverlay?: boolean; - showWeekNumbers?: boolean; - strings?: IDatePickerStrings; - styles?: IStyleFunction; - tabIndex?: number; - textField?: ITextFieldProps; - theme?: ITheme; - today?: Date; - underlined?: boolean; - value?: Date; -} - -// @public (undocumented) -export interface IDatePickerState { - // (undocumented) - errorMessage?: string; - // (undocumented) - formattedDate?: string; - // (undocumented) - isDatePickerShown?: boolean; - // (undocumented) - selectedDate?: Date; -} - -// @public (undocumented) -export interface IDatePickerStrings { - closeButtonAriaLabel?: string; - days: string[]; - goToToday: string; - invalidInputErrorMessage?: string; - isOutOfBoundsErrorMessage?: string; - isRequiredErrorMessage?: string; - months: string[]; - nextMonthAriaLabel?: string; - nextYearAriaLabel?: string; - prevMonthAriaLabel?: string; - prevYearAriaLabel?: string; - shortDays: string[]; - shortMonths: string[]; -} - -// @public (undocumented) -export interface IDatePickerStyleProps { - className?: string; - // (undocumented) - disabled?: boolean; - // (undocumented) - isDatePickerShown?: boolean; - // (undocumented) - label?: boolean; - theme: ITheme; -} - -// @public (undocumented) -export interface IDatePickerStyles { - // (undocumented) - callout: IStyle; - // (undocumented) - icon: IStyle; - root: IStyle; - // (undocumented) - textField: IStyle; -} - // @public (undocumented) export interface IDetailsCheckboxProps { // (undocumented) diff --git a/packages/office-ui-fabric-react/src/common/_variables.scss b/packages/office-ui-fabric-react/src/common/_variables.scss index 0ddb76368bab82..58236779284622 100644 --- a/packages/office-ui-fabric-react/src/common/_variables.scss +++ b/packages/office-ui-fabric-react/src/common/_variables.scss @@ -1,3 +1,2 @@ $exampleLabel-margin: 10px 0; $exampleCheckbox-margin: 10px 0; -$maxFieldWidth: 300px; \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.doc.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.doc.tsx deleted file mode 100644 index a1089afd57a1be..00000000000000 --- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.doc.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import * as React from 'react'; -import { DatePickerBasicExample } from './examples/DatePicker.Basic.Example'; -import { DatePickerDisabledExample } from './examples/DatePicker.Disabled.Example'; -import { IDocPageProps } from '../../common/DocPage.types'; -import { DatePickerWeekNumbersExample } from './examples/DatePicker.WeekNumbers.Example'; -import { DatePickerRequiredExample } from './examples/DatePicker.Required.Example'; -import { DatePickerInputExample } from './examples/DatePicker.Input.Example'; -import { DatePickerFormatExample } from './examples/DatePicker.Format.Example'; -import { DatePickerBoundedExample } from './examples/DatePicker.Bounded.Example'; - -const DatePickerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx') as string; -const DatePickerDisabledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Disabled.Example.tsx') as string; -const DatePickerBasicExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx') as string; -const DatePickerWeekNumbersExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx') as string; -const DatePickerRequiredExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx') as string; -const DatePickerInputExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx') as string; -const DatePickerFormatExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx') as string; -const DatePickerBoundedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx') as string; - -export const DatePickerPageProps: IDocPageProps = { - title: 'DatePicker', - componentName: 'DatePicker', - componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/DatePicker', - examples: [ - { - title: 'Default DatePicker', - code: DatePickerBasicExampleCode, - view: , - codepenJS: DatePickerBasicExampleCodepen - }, - { - title: 'Disabled DatePicker', - code: DatePickerDisabledExampleCode, - view: - }, - { - title: 'DatePicker with week numbers', - code: DatePickerWeekNumbersExampleCode, - view: - }, - { - title: 'DatePicker with required field', - code: DatePickerRequiredExampleCode, - view: - }, - { - title: 'DatePicker allows input date string', - code: DatePickerInputExampleCode, - view: - }, - { - title: 'DatePicker allows dates to be formatted', - code: DatePickerFormatExampleCode, - view: - }, - { - title: 'DatePicker with date boundary (minDate, maxDate)', - code: DatePickerBoundedExampleCode, - view: - } - ], - overview: require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md'), - bestPractices: '', - dos: require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDos.md'), - donts: require('!raw-loader!office-ui-fabric-react/src/components/DatePicker/docs/DatePickerDonts.md'), - isHeaderVisible: true, - isFeedbackVisible: true -}; diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md b/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md deleted file mode 100644 index 4a3478a0cfe812..00000000000000 --- a/packages/office-ui-fabric-react/src/components/DatePicker/docs/DatePickerOverview.md +++ /dev/null @@ -1 +0,0 @@ -The DatePicker component enables a user to pick a date value. \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot index c0e88547782445..47f95598ef9655 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot @@ -4,7 +4,7 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Layer.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Layer.Basic.Example.tsx.shot index 13b07580c05bd6..d4829332668c36 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/Layer.Basic.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Layer.Basic.Example.tsx.shot @@ -146,7 +146,7 @@ exports[`Component Examples renders Layer.Basic.Example.tsx correctly 1`] = ` Hello world.
- Wed, 06 Dec 2017 04:41:20 GMT + Fri, 06 Jan 2017 04:41:20 GMT
diff --git a/packages/office-ui-fabric-react/src/index.ts b/packages/office-ui-fabric-react/src/index.ts index b818ba268d866c..713d096cd28827 100644 --- a/packages/office-ui-fabric-react/src/index.ts +++ b/packages/office-ui-fabric-react/src/index.ts @@ -3,7 +3,6 @@ export * from './Autofill'; export * from './Announced'; export * from './Breadcrumb'; export * from './Button'; -export * from './Calendar'; export * from './Callout'; export * from './Check'; export * from './Checkbox'; @@ -15,7 +14,6 @@ export * from './ColorPicker'; export * from './ComboBox'; export * from './CommandBar'; export * from './ContextualMenu'; -export * from './DatePicker'; export * from './DetailsList'; export * from './Dialog'; export * from './Divider';