diff --git a/packages/tooling/fast-tooling-react/app/app.tsx b/packages/tooling/fast-tooling-react/app/app.tsx index 8db4943f582..7d0874c76ae 100644 --- a/packages/tooling/fast-tooling-react/app/app.tsx +++ b/packages/tooling/fast-tooling-react/app/app.tsx @@ -3,11 +3,8 @@ import { BrowserRouter, Link, Redirect, Route, Switch } from "react-router-dom"; import { NavigationTestPage } from "./pages/navigation"; import ViewerPage from "./pages/viewer"; import ViewerContentPage from "./pages/viewer/content"; -import { CSSEditorTestPage } from "./pages/css-editor"; -import { StyleEditorsTestPage } from "./pages/style-editors"; import { FormTestPage } from "./pages/form"; import { FormAndNavigationTestPage } from "./pages/form-and-navigation"; -import { CSSPropertyEditorTestPage } from "./pages/css-property-editor"; import { NavigationMenuTestPage } from "./pages/navigation-menu"; import { WebComponentTestPage } from "./pages/web-components"; import WebComponentViewerContent from "./pages/web-components/web-component-viewer-content"; @@ -24,21 +21,6 @@ class App extends React.Component<{}, {}> { path={"/navigation-menu"} component={NavigationMenuTestPage} /> - - - { component={WebComponentViewerContent} /> - + @@ -83,15 +65,6 @@ class App extends React.Component<{}, {}> {
  • Navigation Menu
    • -
  • - CSS Editor -
    • -
  • - CSS Property Editor -
    • -
  • - Style Editors -
  • Form
    • diff --git a/packages/tooling/fast-tooling-react/app/pages/css-editor.tsx b/packages/tooling/fast-tooling-react/app/pages/css-editor.tsx deleted file mode 100644 index ee358242165..00000000000 --- a/packages/tooling/fast-tooling-react/app/pages/css-editor.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import { CSSEditor } from "../../src/css-editor"; - -interface CSSEditorTestPageState { - css: any; -} - -class CSSEditorTestPage extends React.Component<{}, CSSEditorTestPageState> { - constructor(props: {}) { - super(props); - - this.state = { - css: { - margin: "10px", - padding: "20px", - background: "#FFF", - }, - }; - } - - public render(): React.ReactNode { - return ( - - - 
    {JSON.stringify(this.state.css, null, 2)}
    -
    Hello world
    -     - ); - } - - private handleOnChange = (css: any): void => { - this.setState({ - css, - }); - }; -} - -export { CSSEditorTestPage }; diff --git a/packages/tooling/fast-tooling-react/app/pages/css-property-editor.tsx b/packages/tooling/fast-tooling-react/app/pages/css-property-editor.tsx deleted file mode 100644 index 647ddfd42bb..00000000000 --- a/packages/tooling/fast-tooling-react/app/pages/css-property-editor.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react"; -// TODO: Update this to "../../src" when the validation task is complete #1725 -import { CSSPropertyEditor } from "../../src/css-property-editor"; - -interface CSSPropertyEditorTestPageState { - css: { [key: string]: string }; -} - -class CSSPropertyEditorTestPage extends React.Component< - {}, - CSSPropertyEditorTestPageState -> { - constructor(props: {}) { - super(props); - - this.state = { - css: { - margin: "10px", - padding: "20px", - }, - }; - } - - public render(): React.ReactNode { - return ( - - - 
    {JSON.stringify(this.state.css, null, 2)}
    -
    Hello world
    -     - ); - } - - private handleOnChange = (css: any): void => { - this.setState({ - css, - }); - }; -} - -export { CSSPropertyEditorTestPage }; diff --git a/packages/tooling/fast-tooling-react/app/pages/style-editors.tsx b/packages/tooling/fast-tooling-react/app/pages/style-editors.tsx deleted file mode 100644 index 210a90bac42..00000000000 --- a/packages/tooling/fast-tooling-react/app/pages/style-editors.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from "react"; -import { CSSEditor } from "../../src/css-editor"; -import { CSSPropertyEditor } from "../../src/css-property-editor"; - -interface CSSEditorTestPageState { - css: any; -} - -class StyleEditorsTestPage extends React.Component<{}, CSSEditorTestPageState> { - constructor(props: {}) { - super(props); - - this.state = { - css: {}, - }; - } - - public render(): React.ReactNode { - return ( - - - - 
    {JSON.stringify(this.state.css, null, 2)}
    -
    Hello world
    -     - ); - } - - private handleOnChange = (css: any): void => { - this.setState({ - css, - }); - }; -} - -export { StyleEditorsTestPage }; diff --git a/packages/tooling/fast-tooling-react/package.json b/packages/tooling/fast-tooling-react/package.json index 3374672c4e6..679e364842c 100644 --- a/packages/tooling/fast-tooling-react/package.json +++ b/packages/tooling/fast-tooling-react/package.json @@ -47,8 +47,8 @@ "coverageThreshold": { "global": { "statements": 80, - "branches": 60, - "functions": 77, + "branches": 59, + "functions": 76, "lines": 80 } }, diff --git a/packages/tooling/fast-tooling-react/src/css-editor/background/background.props.ts b/packages/tooling/fast-tooling-react/src/css-editor/background/background.props.ts deleted file mode 100644 index f9c0e38a2a7..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/background/background.props.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ManagedClasses } from "@microsoft/fast-jss-manager-react"; -import { CSSBackgroundClassNameContract } from "./background.style"; - -export interface CSSBackgroundValues { - background?: string; -} - -export type CSSBackgroundUnhandledProps = React.HTMLAttributes; - -export interface CSSBackgroundHandledProps - extends ManagedClasses { - /** - * The data - */ - data?: CSSBackgroundValues; - - /** - * The onChange callback - */ - onChange?: (background: CSSBackgroundValues) => void; -} - -export type CSSBackgroundProps = CSSBackgroundHandledProps & CSSBackgroundUnhandledProps; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/background/background.schema.json b/packages/tooling/fast-tooling-react/src/css-editor/background/background.schema.json deleted file mode 100644 index 954f7338d2f..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/background/background.schema.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema#", - "title": "CSS Background", - "description": "A CSS background component's schema definition.", - "id": "@microsoft/fast-tooling-react/css-background", - "type": "object", - "properties": { - "data": { - "title": "CSS Values", - "type": "object", - "properties": { - "background": { - "title": "Background", - "type": "string" - } - } - } - } -} \ No newline at end of file diff --git a/packages/tooling/fast-tooling-react/src/css-editor/background/background.spec.tsx b/packages/tooling/fast-tooling-react/src/css-editor/background/background.spec.tsx deleted file mode 100644 index 0c0b0ffb762..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/background/background.spec.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow } from "enzyme"; -import CSSBackground from "./background"; -import { CSSBackgroundClassNameContract } from "./background.style"; - -/** - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("CSSBackground", () => { - const managedClasses: CSSBackgroundClassNameContract = { - cssBackground: "cssBackground", - cssBackground_colorInputRegion: "cssBackground_colorInputRegion", - cssBackground_control: "cssBackground_control", - cssBackground_input: "cssBackground_input", - cssBackground_label: "cssBackground_label", - }; - - test("should not throw", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - test("should have a displayName that matches the component name", () => { - expect((CSSBackground as any).name).toBe(CSSBackground.displayName); - }); - test("should use the `data` prop as the input value if the `background` is provided", () => { - const backgroundValue: string = "#FFF"; - const rendered: any = mount( - - ); - - expect( - rendered.find(`.${managedClasses.cssBackground_input}`).prop("value") - ).toBe(backgroundValue); - }); - test("should fire the `onChange` event if the input value is updated", () => { - const backgroundValue: string = "#FFF"; - const newBackgroundValue: string = "#000"; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find(`.${managedClasses.cssBackground_input}`) - .simulate("change", { target: { value: newBackgroundValue } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toEqual({ background: newBackgroundValue }); - }); - test("should not change the input from controlled to uncontrolled", () => { - const backgroundValue: string = "#FFF"; - const newBackgroundValue: string = void 0; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find(`.${managedClasses.cssBackground_input}`) - .simulate("change", { target: { value: newBackgroundValue } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toEqual({ background: newBackgroundValue }); - - rendered.setProps({ - data: {}, - }); - - expect( - rendered.find(`.${managedClasses.cssBackground_input}`).prop("value") - ).toBe(""); - }); -}); diff --git a/packages/tooling/fast-tooling-react/src/css-editor/background/background.style.ts b/packages/tooling/fast-tooling-react/src/css-editor/background/background.style.ts deleted file mode 100644 index b512c29eabd..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/background/background.style.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { ComponentStyles } from "@microsoft/fast-jss-manager-react"; -import { - controlRegionStyle, - controlWrapperStyle, - inputStyle, - labelStyle, -} from "../../style"; - -export interface CSSBackgroundClassNameContract { - cssBackground?: string; - cssBackground_colorInputRegion?: string; - cssBackground_control?: string; - cssBackground_input?: string; - cssBackground_label?: string; -} - -const styles: ComponentStyles = { - cssBackground: { - ...controlWrapperStyle, - }, - cssBackground_colorInputRegion: { - borderRadius: "2px", - boxShadow: "0 0 0 1px inset rgba(255, 255, 255, 0.19)", - width: "18%", - }, - cssBackground_control: { - ...controlRegionStyle, - }, - cssBackground_input: { - ...inputStyle, - marginLeft: "4px", - width: "83%", - }, - cssBackground_label: { - ...labelStyle, - }, -}; - -export default styles; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/background/background.tsx b/packages/tooling/fast-tooling-react/src/css-editor/background/background.tsx deleted file mode 100644 index 435705e263a..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/background/background.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from "react"; -import { get } from "lodash-es"; -import Foundation, { - FoundationProps, - HandledProps, -} from "@microsoft/fast-components-foundation-react"; -import { - CSSBackgroundHandledProps, - CSSBackgroundProps, - CSSBackgroundUnhandledProps, -} from "./background.props"; - -export default class CSSBackground extends Foundation< - CSSBackgroundHandledProps, - CSSBackgroundUnhandledProps, - {} -> { - public static displayName: string = "CSSBackground"; - - protected handledProps: HandledProps = { - data: void 0, - onChange: void 0, - managedClasses: void 0, - }; - - public render(): React.ReactNode { - return ( -
    - -
    -
    - -
    - -
    -
    - ); - } - - private handleBackgroundOnChange = (e: React.ChangeEvent): void => { - this.props.onChange({ - background: e.target.value || void 0, - }); - }; -} diff --git a/packages/tooling/fast-tooling-react/src/css-editor/background/index.ts b/packages/tooling/fast-tooling-react/src/css-editor/background/index.ts deleted file mode 100644 index 414ca1bcbb3..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/background/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import manageJss from "@microsoft/fast-jss-manager-react"; -import Background from "./background"; -import CSSBackgroundStyles from "./background.style"; - -/* - * The type returned by manageJss type is very complicated so we'll let the - * compiler infer the type instead of re-declaring just for the package export - */ -const CSSBackground = manageJss(CSSBackgroundStyles)(Background); -type CSSBackground = InstanceType; - -export { CSSBackground }; -export * from "./background.props"; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.props.ts b/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.props.ts deleted file mode 100644 index cc28867a2b7..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.props.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { ManagedClasses } from "@microsoft/fast-jss-manager-react"; -import { CSSBorderRadiusClassNameContract } from "./border-radius.style"; - -export interface CSSBorderRadiusState { - individualValues?: boolean; - hasFocus?: BorderRadiusValue | void; - data?: CSSBorderRadiusValues; -} - -export enum BorderRadiusValue { - borderRadius, - borderTopLeftRadius, - borderTopRightRadius, - borderBottomRightRadius, - borderBottomLeftRadius, -} - -export interface CSSBorderRadiusValues { - borderRadius?: string; -} - -export type CSSBorderRadiusUnhandledProps = React.HTMLAttributes; - -export interface CSSBorderRadiusHandledProps - extends ManagedClasses { - /** - * The data - */ - data?: CSSBorderRadiusValues; - - /** - * The onChange callback - */ - onChange?: (borderRadius: CSSBorderRadiusValues) => void; -} - -export type CSSBorderRadiusProps = CSSBorderRadiusHandledProps & - CSSBorderRadiusUnhandledProps; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.schema.json b/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.schema.json deleted file mode 100644 index ffd7fbf643e..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.schema.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema#", - "title": "CSS border radius", - "description": "A CSS border radius component's schema definition.", - "id": "@microsoft/fast-tooling-react/css-border-radius", - "type": "object", - "properties": { - "data": { - "title": "CSS Values", - "type": "object", - "properties": { - "borderRadius": { - "title": "Border radius", - "type": "string" - } - } - } - } -} \ No newline at end of file diff --git a/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.spec.tsx b/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.spec.tsx deleted file mode 100644 index 3ebd6354755..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.spec.tsx +++ /dev/null @@ -1,346 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow } from "enzyme"; -import CSSBorderRadius from "./border-radius"; -import { CSSBorderRadiusClassNameContract } from "./border-radius.style"; -import { BorderRadiusValue } from "./border-radius.props"; - -/** - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("CSSBorderRadius", () => { - const managedClasses: CSSBorderRadiusClassNameContract = { - cssBorderRadius: "cssBorderRadius", - cssBorderRadius_control: "cssBorderRadius_control", - cssBorderRadius_input: "cssBorderRadius_input", - cssBorderRadius_label: "cssBorderRadius_label", - }; - - test("should not throw", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - test("should not throw if data is empty", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - test("should have a displayName that matches the component name", () => { - expect((CSSBorderRadius as any).name).toBe(CSSBorderRadius.displayName); - }); - test("should use the `data` prop as the input value if the `borderRadius` is provided", () => { - const borderRadiusValue: string = "12px 12px 12px 12px"; - const rendered: any = mount( - - ); - - expect( - rendered.find(`.${managedClasses.cssBorderRadius_input}`).prop("value") - ).toBe(borderRadiusValue); - }); - test("should fire the `onChange` event if the input value is updated", () => { - const borderRadiusValue: string = "12px 12px 12px 12px"; - const newBorderRadiusValue: string = "10px"; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find(`.${managedClasses.cssBorderRadius_input}`) - .simulate("change", { target: { value: newBorderRadiusValue } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toEqual({ borderRadius: newBorderRadiusValue }); - }); - test("should not change the input from controlled to uncontrolled", () => { - const borderRadiusValue: string = "12px 12px 12px 12px"; - const newBorderRadiusValue: string = void 0; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find(`.${managedClasses.cssBorderRadius_input}`) - .simulate("change", { target: { value: newBorderRadiusValue } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toEqual({ borderRadius: newBorderRadiusValue }); - - rendered.setProps({ - data: {}, - }); - - expect( - rendered.find(`.${managedClasses.cssBorderRadius_input}`).prop("value") - ).toBe(""); - }); - - test("should parse the `data` prop and assign individual values when 1 value is passed", () => { - const borderRadiusValue: string = "12px"; - const rendered: any = mount( - - ); - - rendered.setProps({ - data: { - borderRadius: borderRadiusValue, - }, - }); - - rendered.find("button").simulate("click"); - - expect(rendered.find("input").at(0).prop("value")).toBe("12px"); - expect(rendered.find("input").at(1).prop("value")).toBe("12px"); - expect(rendered.find("input").at(2).prop("value")).toBe("12px"); - expect(rendered.find("input").at(3).prop("value")).toBe("12px"); - }); - - test("should parse the `data` prop and assign individual values when 2 values are passed", () => { - const borderRadiusValue: string = "12px 8px"; - const rendered: any = mount( - - ); - - rendered.setProps({ - data: { - borderRadius: borderRadiusValue, - }, - }); - - rendered.find("button").simulate("click"); - - expect(rendered.find("input").at(0).prop("value")).toBe("12px"); - expect(rendered.find("input").at(1).prop("value")).toBe("8px"); - expect(rendered.find("input").at(2).prop("value")).toBe("12px"); - expect(rendered.find("input").at(3).prop("value")).toBe("8px"); - }); - - test("should parse the `data` prop and assign individual values when 3 values are passed", () => { - const borderRadiusValue: string = "12px 8px 3px"; - const rendered: any = mount( - - ); - - rendered.setProps({ - data: { - borderRadius: borderRadiusValue, - }, - }); - - rendered.find("button").simulate("click"); - - expect(rendered.find("input").at(0).prop("value")).toBe("12px"); - expect(rendered.find("input").at(1).prop("value")).toBe("8px"); - expect(rendered.find("input").at(2).prop("value")).toBe("3px"); - expect(rendered.find("input").at(3).prop("value")).toBe("8px"); - }); - - test("should parse the `data` prop and assign individual values when 4 values are passed", () => { - const borderRadiusValue: string = "12px 8px 3px 7px"; - const rendered: any = mount( - - ); - - rendered.setProps({ - data: { - borderRadius: borderRadiusValue, - }, - }); - - rendered.find("button").simulate("click"); - - expect(rendered.find("input").at(0).prop("value")).toBe("12px"); - expect(rendered.find("input").at(1).prop("value")).toBe("8px"); - expect(rendered.find("input").at(2).prop("value")).toBe("3px"); - expect(rendered.find("input").at(3).prop("value")).toBe("7px"); - }); - - test("should set the `hasFocus` state when top left input is focused", () => { - const rendered: any = mount( - - ); - - rendered.find("button").simulate("click"); - - rendered.find("input").at(0).simulate("focus"); - - expect(rendered.state("hasFocus")).toBe(BorderRadiusValue.borderTopLeftRadius); - }); - - test("should set the `hasFocus` state when top right input is focused", () => { - const rendered: any = mount( - - ); - - rendered.find("button").simulate("click"); - - rendered.find("input").at(1).simulate("focus"); - - expect(rendered.state("hasFocus")).toBe(BorderRadiusValue.borderTopRightRadius); - }); - - test("should set the `hasFocus` state when bottom right input is focused", () => { - const rendered: any = mount( - - ); - - rendered.find("button").simulate("click"); - - rendered.find("input").at(2).simulate("focus"); - - expect(rendered.state("hasFocus")).toBe( - BorderRadiusValue.borderBottomRightRadius - ); - }); - - test("should set the `hasFocus` state when bottom left input is focused", () => { - const rendered: any = mount( - - ); - - rendered.find("button").simulate("click"); - - rendered.find("input").at(3).simulate("focus"); - - expect(rendered.state("hasFocus")).toBe(BorderRadiusValue.borderBottomLeftRadius); - - rendered.find("input").at(3).simulate("blur"); - - expect(rendered.state("hasFocus")).toBe(void 0); - }); - - test("should set the `individualValues` state when input toggle is clicked", () => { - const rendered: any = mount( - - ); - - rendered.find("button").simulate("click"); - - expect(rendered.state("individualValues")).toBe(true); - }); - - test("should update top left value on top left value input change", () => { - const newBorderRadius: string = "10px"; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.find("button").simulate("click"); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find("input") - .at(0) - .simulate("change", { target: { value: newBorderRadius } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toStrictEqual({ - borderRadius: "10px 1px 1px 1px", - }); - }); - - test("should update top right value on top right value input change", () => { - const newBorderRadius: string = "10px"; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.find("button").simulate("click"); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find("input") - .at(1) - .simulate("change", { target: { value: newBorderRadius } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toStrictEqual({ - borderRadius: "1px 10px 1px 1px", - }); - }); - - test("should update bottom right value on bottom right value input change", () => { - const newBorderRadius: string = "10px"; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.find("button").simulate("click"); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find("input") - .at(2) - .simulate("change", { target: { value: newBorderRadius } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toStrictEqual({ - borderRadius: "1px 1px 10px 1px", - }); - }); - - test("should update bottom left value on bottom left value input change", () => { - const newBorderRadius: string = "10px"; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.find("button").simulate("click"); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find("input") - .at(3) - .simulate("change", { target: { value: newBorderRadius } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toStrictEqual({ - borderRadius: "1px 1px 1px 10px", - }); - }); -}); diff --git a/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.style.ts b/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.style.ts deleted file mode 100644 index 63c75fa2211..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.style.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { ComponentStyles } from "@microsoft/fast-jss-manager-react"; -import { - controlRegionStyle, - controlWrapperStyle, - inputStyle, - labelStyle, -} from "../../style"; - -export interface CSSBorderRadiusClassNameContract { - cssBorderRadius?: string; - cssBorderRadius_control?: string; - cssBorderRadius_input?: string; - cssBorderRadius_individualInput?: string; - cssBorderRadius_label?: string; - cssBorderRadius_toggleButton?: string; - cssBorderRadius_toggleButton__selected?: string; - cssBorderRadius_toggleButtonGlyph?: string; - cssBorderRadius_toggleButtonGlyphPath__highlight?: string; -} - -const styles: ComponentStyles = { - cssBorderRadius: { - ...controlWrapperStyle, - }, - cssBorderRadius_control: { - ...controlRegionStyle, - }, - cssBorderRadius_input: { - ...inputStyle, - marginRight: "4px", - width: "inherit", - }, - cssBorderRadius_individualInput: { - ...inputStyle, - marginRight: "4px", - width: "inherit", - }, - cssBorderRadius_label: { - ...labelStyle, - }, - cssBorderRadius_toggleButton: { - ...inputStyle, - backgroundColor: "transparent", - display: "flex", - alignContent: "center", - justifyContent: "center", - padding: "0 5px", - minWidth: "12%", - }, - cssBorderRadius_toggleButton__selected: { - ...inputStyle, - }, - cssBorderRadius_toggleButtonGlyph: { - fill: "rgba(255,255,255, 0.5)", - overflow: "unset", - transition: "all 0.1s ease-in-out", - }, - cssBorderRadius_toggleButtonGlyphPath__highlight: { - fill: "rgba(255,255,255, 1)", - transform: "scale(1.5)", - transition: "all 0.1s ease-in-out", - }, -}; - -export default styles; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.tsx b/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.tsx deleted file mode 100644 index d3ddd8503fe..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/border-radius/border-radius.tsx +++ /dev/null @@ -1,245 +0,0 @@ -import React from "react"; -import { get, pick } from "lodash-es"; -import Foundation, { - FoundationProps, - HandledProps, -} from "@microsoft/fast-components-foundation-react"; -import { - BorderRadiusValue, - CSSBorderRadiusHandledProps, - CSSBorderRadiusProps, - CSSBorderRadiusState, - CSSBorderRadiusUnhandledProps, - CSSBorderRadiusValues, -} from "./border-radius.props"; -import { parseCSSString } from "../../utilities/parse-css-string"; - -export default class CSSBorderRadius extends Foundation< - CSSBorderRadiusHandledProps, - CSSBorderRadiusUnhandledProps, - CSSBorderRadiusState -> { - public static displayName: string = "CSSBorderRadius"; - - protected handledProps: HandledProps = { - data: void 0, - onChange: void 0, - managedClasses: void 0, - }; - - constructor(props: CSSBorderRadiusProps) { - super(props); - - this.state = { - individualValues: false, - hasFocus: void 0, - data: this.props.data, - }; - } - - public render(): React.ReactNode { - return ( -
    - -
    - {this.renderInputs()} - -
    -
    - ); - } - - private renderBorderRadiusGlyph(): React.ReactNode { - return ( - - - - - - - ); - } - - private renderInputs(): React.ReactFragment { - if (this.state.individualValues === true) { - const parsedString: string[] = parseCSSString( - get(this.props.data, "borderRadius", "") - ); - return ( - - {this.renderIndividualInputs( - BorderRadiusValue.borderTopLeftRadius, - parsedString[0] - )} - {this.renderIndividualInputs( - BorderRadiusValue.borderTopRightRadius, - parsedString[1] - )} - {this.renderIndividualInputs( - BorderRadiusValue.borderBottomRightRadius, - parsedString[2] - )} - {this.renderIndividualInputs( - BorderRadiusValue.borderBottomLeftRadius, - parsedString[3] - )} - - ); - } - - return ( - - ); - } - - private renderIndividualInputs( - position: BorderRadiusValue, - value: string - ): React.ReactNode { - const normalizedValue: string = value === "0" ? "" : value; - return ( - - ); - } - - private handleBorderRadiusOnChange( - cssKey: BorderRadiusValue - ): (e: React.ChangeEvent) => void { - return (e: React.ChangeEvent): void => { - const borderRadius: CSSBorderRadiusValues = pick(this.props.data, [ - "borderRadius", - ]); - - const validatedValue: string = e.target.value === "" ? "0" : e.target.value; - - const parsedString: string[] = parseCSSString( - get(this.props.data, "borderRadius", "") - ); - switch (cssKey) { - case BorderRadiusValue.borderRadius: - borderRadius.borderRadius = e.target.value; - break; - case BorderRadiusValue.borderBottomLeftRadius: - borderRadius.borderRadius = `${parsedString[0]} ${parsedString[1]} ${parsedString[2]} ${validatedValue}`; - break; - case BorderRadiusValue.borderBottomRightRadius: - borderRadius.borderRadius = `${parsedString[0]} ${parsedString[1]} ${validatedValue} ${parsedString[3]}`; - break; - case BorderRadiusValue.borderTopLeftRadius: - borderRadius.borderRadius = `${validatedValue} ${parsedString[1]} ${parsedString[2]} ${parsedString[3]}`; - break; - case BorderRadiusValue.borderTopRightRadius: - borderRadius.borderRadius = `${parsedString[0]} ${validatedValue} ${parsedString[2]} ${parsedString[3]}`; - break; - } - this.props.onChange(borderRadius); - }; - } - - private toggleInputs = (): void => { - this.setState({ - individualValues: !this.state.individualValues, - }); - }; - - private generateToggleClassNames(): string { - let className: string = get( - this.props, - "managedClasses.cssBorderRadius_toggleButton" - ); - - if (this.state.individualValues) { - className = `${className} ${get( - this.props, - "managedClasses.cssBorderRadius_toggleButton__selected" - )}`; - } - - return className; - } - - private generatePathClassNames(cssKey: BorderRadiusValue): string { - if (this.state.hasFocus === cssKey) { - return get( - this.props, - "managedClasses.cssBorderRadius_toggleButtonGlyphPath__highlight" - ); - } - } - - private handleInputOnFocus( - cssKey: BorderRadiusValue - ): (e: React.FocusEvent) => void { - return (e: React.FocusEvent): void => { - this.setState({ - hasFocus: cssKey, - }); - }; - } - - private handleInputBlur = (e: React.FocusEvent): void => { - this.setState({ - hasFocus: void 0, - }); - }; -} diff --git a/packages/tooling/fast-tooling-react/src/css-editor/border-radius/index.ts b/packages/tooling/fast-tooling-react/src/css-editor/border-radius/index.ts deleted file mode 100644 index 6e6d7e2dcc7..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/border-radius/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import manageJss from "@microsoft/fast-jss-manager-react"; -import BorderRadius from "./border-radius"; -import CSSBorderRadiusStyles from "./border-radius.style"; - -/* - * The type returned by manageJss type is very complicated so we'll let the - * compiler infer the type instead of re-declaring just for the package export - */ -const CSSBorderRadius = manageJss(CSSBorderRadiusStyles)(BorderRadius); -type CSSBorderRadius = InstanceType; - -export { CSSBorderRadius }; -export * from "./border-radius.props"; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/border/border.props.ts b/packages/tooling/fast-tooling-react/src/css-editor/border/border.props.ts deleted file mode 100644 index 28b67e16df1..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/border/border.props.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { ManagedClasses } from "@microsoft/fast-jss-manager-react"; -import { CSSBorderClassNameContract } from "./border.style"; - -export enum BorderStyleValue { - dashed = "dashed", - dotted = "dotted", - double = "double", - groove = "groove", - hidden = "hidden", - inherit = "inherit", - initial = "initial", - inset = "inset", - none = "none", - outset = "outset", - ridge = "ridge", - solid = "solid", - unset = "unset", -} - -/** - * The CSS border keys - */ -export enum BorderProperty { - borderColor = "borderColor", - borderStyle = "borderStyle", - borderWidth = "borderWidth", -} - -export interface CSSBorderValues { - borderColor?: string; - borderStyle?: BorderStyleValue; - borderWidth?: string; -} - -export type CSSBorderUnhandledProps = React.HTMLAttributes; - -export interface CSSBorderHandledProps - extends ManagedClasses { - /** - * The data - */ - data?: CSSBorderValues; - - /** - * The onChange callback - */ - onChange?: (border: CSSBorderValues) => void; -} - -export type CSSBorderProps = CSSBorderHandledProps & CSSBorderUnhandledProps; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/border/border.schema.json b/packages/tooling/fast-tooling-react/src/css-editor/border/border.schema.json deleted file mode 100644 index bfe721e7d7d..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/border/border.schema.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema#", - "title": "CSS Border", - "description": "A CSS border component's schema definition.", - "id": "@microsoft/fast-tooling-react/css-border", - "type": "object", - "properties": { - "data": { - "title": "CSS Values", - "type": "object", - "properties": { - "borderColor": { - "title": "Color", - "type": "string" - }, - "borderStyle": { - "title": "Style", - "type": "string", - "enum": [ - "dashed", - "dotted", - "double", - "groove", - "hidden", - "inherit", - "initial", - "inset", - "none", - "outset", - "ridge", - "solid", - "unset" - ] - }, - "borderSize": { - "title": "Size", - "type": "string" - } - } - } - } -} \ No newline at end of file diff --git a/packages/tooling/fast-tooling-react/src/css-editor/border/border.spec.tsx b/packages/tooling/fast-tooling-react/src/css-editor/border/border.spec.tsx deleted file mode 100644 index 6d28a618232..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/border/border.spec.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow } from "enzyme"; -import { BorderStyleValue } from "./border.props"; -import CSSBorder from "./border"; -import { CSSBorderClassNameContract } from "./border.style"; - -/** - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("CSSBorder", () => { - const managedClasses: CSSBorderClassNameContract = { - cssBorder: "cssBorder", - cssBorder_colorInputRegion: "cssBorder_colorInputRegion", - cssBorder_control: "cssBorder_control", - cssBorder_input: "cssBorder_input", - cssBorder_label: "cssBorder_label", - cssBorder_selectControl: "cssBorder_selectControl", - cssBorder_select: "cssBorder_select", - }; - - test("should not throw", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - test("should have a displayName that matches the component name", () => { - expect((CSSBorder as any).name).toBe(CSSBorder.displayName); - }); - test("should use the `data` prop as the input value if the `borderWidth` is provided", () => { - const borderWidth: string = "3px"; - const rendered: any = mount( - - ); - - expect(rendered.find(`.${managedClasses.cssBorder_input}`).prop("value")).toBe( - borderWidth - ); - }); - - test("should set borderColor value in onChange event", () => { - const borderColor: string = "#000"; - const newBorderColor: string = "#FFF"; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - const input: any = rendered.find("input").at(0); - - input.simulate("change", { target: { value: newBorderColor } }); - - expect(callback.mock.calls[0][0]).toStrictEqual({ borderColor: newBorderColor }); - }); - - test("should set borderStyle value in onChange event", () => { - const borderStyle: BorderStyleValue = BorderStyleValue.solid; - const newBorderStyle: BorderStyleValue = BorderStyleValue.dotted; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - const input: any = rendered.find(`.${managedClasses.cssBorder_select}`); - - input.simulate("change", { target: { value: newBorderStyle } }); - - expect(callback.mock.calls[0][0]).toStrictEqual({ borderStyle: newBorderStyle }); - }); - - test("should set borderWidth value in onChange event", () => { - const borderWidth: string = "1px"; - const newBorderWidth: string = "10px"; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - const input: any = rendered.find(`.${managedClasses.cssBorder_input}`); - - input.simulate("change", { target: { value: newBorderWidth } }); - - expect(callback.mock.calls[0][0]).toStrictEqual({ borderWidth: newBorderWidth }); - }); -}); diff --git a/packages/tooling/fast-tooling-react/src/css-editor/border/border.style.ts b/packages/tooling/fast-tooling-react/src/css-editor/border/border.style.ts deleted file mode 100644 index c92220649d7..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/border/border.style.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { ComponentStyles } from "@microsoft/fast-jss-manager-react"; -import { - controlRegionStyle, - controlWrapperStyle, - inputStyle, - labelStyle, - selectInputStyle, - selectSpanStyle, -} from "../../style"; - -export interface CSSBorderClassNameContract { - cssBorder?: string; - cssBorder_colorInputRegion?: string; - cssBorder_control?: string; - cssBorder_input?: string; - cssBorder_label?: string; - cssBorder_selectControl?: string; - cssBorder_select?: string; -} - -const styles: ComponentStyles = { - cssBorder: { - ...controlWrapperStyle, - }, - cssBorder_colorInputRegion: { - borderRadius: "2px", - position: "relative", - boxShadow: "0 0 0 1px inset rgba(255, 255, 255, 0.19)", - width: "18%", - }, - cssBorder_control: { - ...controlRegionStyle, - }, - cssBorder_input: { - ...inputStyle, - width: "22%", - marginLeft: "4px", - }, - cssBorder_label: { - ...labelStyle, - }, - cssBorder_selectControl: { - ...selectSpanStyle, - marginLeft: "4px", - width: "60%", - }, - cssBorder_select: { - ...selectInputStyle, - padding: "3px 15px 2px 5px", - }, -}; - -export default styles; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/border/border.tsx b/packages/tooling/fast-tooling-react/src/css-editor/border/border.tsx deleted file mode 100644 index 72049906dda..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/border/border.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import React from "react"; -import { get, pick } from "lodash-es"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { - BorderProperty, - BorderStyleValue, - CSSBorderHandledProps, - CSSBorderProps, - CSSBorderUnhandledProps, - CSSBorderValues, -} from "./border.props"; - -export default class CSSBorder extends Foundation< - CSSBorderHandledProps, - CSSBorderUnhandledProps, - {} -> { - public static displayName: string = "CSSBorder"; - - protected handledProps: HandledProps = { - data: void 0, - onChange: void 0, - managedClasses: void 0, - }; - - private defaultBorderColor: string = "#000000"; - - public render(): React.ReactNode { - return ( -
    - -
    -
    - -
    - - - - -
    -
    - ); - } - - private renderBorderOption(style: string): JSX.Element { - return ( - - ); - } - - private handleInputOnChange( - cssKey: BorderProperty - ): (e: React.ChangeEvent) => void { - return (e: React.ChangeEvent): void => { - const border: CSSBorderValues = pick(this.props.data, [ - BorderProperty.borderColor, - BorderProperty.borderStyle, - BorderProperty.borderWidth, - ]); - - switch (cssKey) { - case BorderProperty.borderStyle: - border[cssKey] = e.target.value as BorderStyleValue; - break; - default: - border[cssKey] = e.target.value; - break; - } - - this.props.onChange(border); - }; - } -} diff --git a/packages/tooling/fast-tooling-react/src/css-editor/border/index.ts b/packages/tooling/fast-tooling-react/src/css-editor/border/index.ts deleted file mode 100644 index f5055ccd365..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/border/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import manageJss from "@microsoft/fast-jss-manager-react"; -import Border from "./border"; -import CSSBorderStyles from "./border.style"; - -/* - * The type returned by manageJss type is very complicated so we'll let the - * compiler infer the type instead of re-declaring just for the package export - */ -const CSSBorder = manageJss(CSSBorderStyles)(Border); -type CSSBorder = InstanceType; - -export { CSSBorder }; -export * from "./border.props"; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/box-shadow.props.tsx b/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/box-shadow.props.tsx deleted file mode 100644 index 39fb2e67bcb..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/box-shadow.props.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { ManagedClasses } from "@microsoft/fast-jss-manager-react"; -import { CSSBoxShadowClassNameContract } from "./box-shadow.style"; - -export interface CSSBoxShadowState { - boxShadowColor?: string; - boxShadowOpacity?: number; - boxShadowOffsetX?: string; - boxShadowOffsetY?: string; - boxShadowBlurRadius?: string; -} - -export interface CSSBoxShadowValues { - boxShadow?: string; -} - -export interface CSSBoxShadowUnhandledProps - extends React.HTMLAttributes {} - -export interface CSSBoxShadowHandledProps - extends ManagedClasses { - /** - * The data - */ - data?: CSSBoxShadowValues; - - /** - * The onChange callback - */ - onChange?: (boxShadow: CSSBoxShadowValues) => void; -} - -export type CSSBoxShadowProps = CSSBoxShadowHandledProps & CSSBoxShadowUnhandledProps; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/box-shadow.schema.json b/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/box-shadow.schema.json deleted file mode 100644 index 764f7bceec9..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/box-shadow.schema.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema#", - "title": "CSS box shadow", - "description": "A CSS box shadow component's schema definition.", - "id": "@microsoft/fast-tooling-react/css-box-shadow", - "type": "object", - "properties": { - "data": { - "title": "CSS Values", - "type": "object", - "properties": { - "boxShadow": { - "title": "Box shadow", - "type": "string" - } - } - } - } -} \ No newline at end of file diff --git a/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/box-shadow.style.ts b/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/box-shadow.style.ts deleted file mode 100644 index 9f9bb4a4c20..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/box-shadow.style.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { ComponentStyles } from "@microsoft/fast-jss-manager-react"; -import { controlRegionStyle, inputStyle, labelStyle } from "../../style"; - -export interface CSSBoxShadowClassNameContract { - cssBoxShadow?: string; - cssBoxShadow_colorInputRegion?: string; - cssBoxShadow_control?: string; - cssBoxShadow_controlRegion?: string; - cssBoxShadow_colorRegion?: string; - cssBoxShadow_opacityInput?: string; - cssBoxShadow_xInput?: string; - cssBoxShadow_yInput?: string; - cssBoxShadow_blurInput?: string; - cssBoxShadow_label?: string; -} - -const styles: ComponentStyles = { - cssBoxShadow: { - display: "flex", - }, - cssBoxShadow_colorInputRegion: { - borderRadius: "2px", - boxShadow: "0 0 0 1px inset rgba(255, 255, 255, 0.19)", - width: "49%", - position: "relative", - "&::after": { - fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif", - content: "'%'", - fontSize: "12px", - position: "absolute", - right: "-38px", - top: "4px", - pointerEvents: "none", - }, - }, - cssBoxShadow_colorRegion: { - width: "37%", - }, - cssBoxShadow_control: { - ...controlRegionStyle, - }, - cssBoxShadow_controlRegion: { - display: "flex", - flexDirection: "column", - width: "21%", - marginLeft: "4px", - }, - cssBoxShadow_opacityInput: { - ...inputStyle, - width: "51%", - height: "25px", - }, - cssBoxShadow_xInput: { - ...inputStyle, - height: "25px", - }, - cssBoxShadow_yInput: { - ...inputStyle, - height: "25px", - }, - cssBoxShadow_blurInput: { - ...inputStyle, - height: "25px", - }, - cssBoxShadow_label: { - ...labelStyle, - }, -}; - -export default styles; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/box-shadow.tsx b/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/box-shadow.tsx deleted file mode 100644 index 574f03eb9da..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/box-shadow.tsx +++ /dev/null @@ -1,216 +0,0 @@ -import React from "react"; -import { get } from "lodash-es"; -import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; -import { - CSSBoxShadowHandledProps, - CSSBoxShadowProps, - CSSBoxShadowState, - CSSBoxShadowUnhandledProps, -} from "./box-shadow.props"; -import { ColorRGBA64, parseColorHexRGB } from "@microsoft/fast-colors"; - -export default class CSSBoxShadow extends Foundation< - CSSBoxShadowHandledProps, - CSSBoxShadowUnhandledProps, - CSSBoxShadowState -> { - public static displayName: string = "CSSBoxShadow"; - - protected handledProps: HandledProps = { - data: void 0, - onChange: void 0, - managedClasses: void 0, - }; - - private defaultBoxShadowColor: string = "#000"; - private defaultBoxShadowBlurRadius: string = "4px"; - private defaultBoxShadowOffsetX: string = "0"; - private defaultBoxShadowOffsetY: string = "4px"; - private defaultBoxShadowOpacity: number = 0.25; - - constructor(props: CSSBoxShadowProps) { - super(props); - - this.state = { - boxShadowColor: this.defaultBoxShadowColor, - boxShadowBlurRadius: this.defaultBoxShadowBlurRadius, - boxShadowOffsetX: this.defaultBoxShadowOffsetX, - boxShadowOffsetY: this.defaultBoxShadowOffsetY, - boxShadowOpacity: this.defaultBoxShadowOpacity, - }; - } - - public componentDidUpdate( - prevProps: CSSBoxShadowProps, - prevState: CSSBoxShadowState - ): void { - if (this.state !== prevState) { - const rgb: ColorRGBA64 = parseColorHexRGB(this.state.boxShadowColor); - const rgba: ColorRGBA64 = ColorRGBA64.fromObject({ - r: rgb.r, - g: rgb.g, - b: rgb.b, - a: this.state.boxShadowOpacity, - }); - - const boxShadowArray: string[] = [ - this.state.boxShadowOffsetX, - this.state.boxShadowOffsetY, - this.state.boxShadowBlurRadius, - rgba.toStringWebRGBA(), - ]; - - this.props.onChange({ - boxShadow: boxShadowArray.reduce( - (accum: string, current: string): string => { - return current.length ? accum.concat(" ", current.trim()) : accum; - } - ), - }); - } - } - - public render(): React.ReactNode { - return ( -
    -
    - -
    -
    - -
    - -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - ); - } - - private handleBoxShadowColorOnChange = ( - e: React.ChangeEvent - ): void => { - this.setState({ - boxShadowColor: e.target.value || this.defaultBoxShadowColor, - }); - }; - - private handleBoxShadowOpacityOnChange = ( - e: React.ChangeEvent - ): void => { - this.setState({ - boxShadowOpacity: - e.target.valueAsNumber / 100 || this.defaultBoxShadowOpacity, - }); - }; - - private handleBoxShadowXOnChange = (e: React.ChangeEvent): void => { - this.setState({ - boxShadowOffsetX: e.target.value || this.defaultBoxShadowOffsetX, - }); - }; - - private handleBoxShadowYOnChange = (e: React.ChangeEvent): void => { - this.setState({ - boxShadowOffsetY: e.target.value || this.defaultBoxShadowOffsetY, - }); - }; - - private handleBoxShadowBlurOnChange = ( - e: React.ChangeEvent - ): void => { - this.setState({ - boxShadowBlurRadius: e.target.value || this.defaultBoxShadowBlurRadius, - }); - }; -} diff --git a/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/index.ts b/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/index.ts deleted file mode 100644 index 9d9bad44344..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/box-shadow/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import manageJss from "@microsoft/fast-jss-manager-react"; -import BoxShadow from "./box-shadow"; -import BoxShadowStyles from "./box-shadow.style"; - -/* - * The type returned by manageJss type is very complicated so we'll let the - * compiler infer the type instead of re-declaring just for the package export - */ -const CSSBoxShadow = manageJss(BoxShadowStyles)(BoxShadow); -type CSSBoxShadow = InstanceType; - -export { CSSBoxShadow }; -export * from "./box-shadow.props"; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/color/color.props.ts b/packages/tooling/fast-tooling-react/src/css-editor/color/color.props.ts deleted file mode 100644 index e9e4e4fffb8..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/color/color.props.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ManagedClasses } from "@microsoft/fast-jss-manager-react"; -import { CSSColorClassNameContract } from "./color.style"; - -export interface CSSColorValues { - color?: string; -} - -export type CSSColorUnhandledProps = React.HTMLAttributes; - -export interface CSSColorHandledProps extends ManagedClasses { - /** - * The data - */ - data?: CSSColorValues; - - /** - * The onChange callback - */ - onChange?: (color: CSSColorValues) => void; -} - -export type CSSColorProps = CSSColorHandledProps & CSSColorUnhandledProps; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/color/color.schema.json b/packages/tooling/fast-tooling-react/src/css-editor/color/color.schema.json deleted file mode 100644 index ab131679af4..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/color/color.schema.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema#", - "title": "CSS Color", - "description": "A CSS color component's schema definition.", - "id": "@microsoft/fast-tooling-react/css-color", - "type": "object", - "properties": { - "data": { - "title": "CSS Values", - "type": "object", - "properties": { - "color": { - "title": "Color", - "type": "string" - } - } - } - } -} \ No newline at end of file diff --git a/packages/tooling/fast-tooling-react/src/css-editor/color/color.spec.tsx b/packages/tooling/fast-tooling-react/src/css-editor/color/color.spec.tsx deleted file mode 100644 index 76c9e961d5a..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/color/color.spec.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow } from "enzyme"; -import CSSColor from "./color"; -import { CSSColorClassNameContract } from "./color.style"; - -/** - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("CSSColor", () => { - const managedClasses: CSSColorClassNameContract = { - cssColor: "cssColor", - cssColor_colorInputRegion: "cssColor_colorInputRegion", - cssColor_control: "cssColor_control", - cssColor_input: "cssColor_input", - cssColor_label: "cssColor_label", - }; - - test("should not throw", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - test("should have a displayName that matches the component name", () => { - expect((CSSColor as any).name).toBe(CSSColor.displayName); - }); - test("should use the `data` prop as the input value if the `color` is provided", () => { - const colorValue: string = "#FFF"; - const rendered: any = mount( - - ); - - expect(rendered.find(`.${managedClasses.cssColor_input}`).prop("value")).toBe( - colorValue - ); - }); - test("should fire the `onChange` event if the input value is updated", () => { - const colorValue: string = "#FFF"; - const newColorValue: string = "#000"; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find(`.${managedClasses.cssColor_input}`) - .simulate("change", { target: { value: newColorValue } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toEqual({ color: newColorValue }); - }); - test("should not change the input from controlled to uncontrolled", () => { - const colorValue: string = "#FFF"; - const newColorValue: string = void 0; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find(`.${managedClasses.cssColor_input}`) - .simulate("change", { target: { value: newColorValue } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toEqual({ color: newColorValue }); - - rendered.setProps({ - data: {}, - }); - - expect(rendered.find(`.${managedClasses.cssColor_input}`).prop("value")).toBe(""); - }); -}); diff --git a/packages/tooling/fast-tooling-react/src/css-editor/color/color.style.ts b/packages/tooling/fast-tooling-react/src/css-editor/color/color.style.ts deleted file mode 100644 index 2ecbce7cadf..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/color/color.style.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { ComponentStyles } from "@microsoft/fast-jss-manager-react"; -import { - controlRegionStyle, - controlWrapperStyle, - inputStyle, - labelStyle, -} from "../../style"; - -export interface CSSColorClassNameContract { - cssColor?: string; - cssColor_colorInputRegion?: string; - cssColor_control?: string; - cssColor_input?: string; - cssColor_label?: string; -} - -const styles: ComponentStyles = { - cssColor: { - ...controlWrapperStyle, - }, - cssColor_colorInputRegion: { - borderRadius: "2px", - boxShadow: "0 0 0 1px inset rgba(255, 255, 255, 0.19)", - width: "18%", - }, - cssColor_control: { - ...controlRegionStyle, - }, - cssColor_input: { - ...inputStyle, - marginLeft: "4px", - width: "83%", - }, - cssColor_label: { - ...labelStyle, - }, -}; - -export default styles; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/color/color.tsx b/packages/tooling/fast-tooling-react/src/css-editor/color/color.tsx deleted file mode 100644 index d7353c87384..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/color/color.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from "react"; -import { get } from "lodash-es"; -import Foundation, { - FoundationProps, - HandledProps, -} from "@microsoft/fast-components-foundation-react"; -import { - CSSColorHandledProps, - CSSColorProps, - CSSColorUnhandledProps, -} from "./color.props"; - -export default class CSSColor extends Foundation< - CSSColorHandledProps, - CSSColorUnhandledProps, - {} -> { - public static displayName: string = "CSSColor"; - - protected handledProps: HandledProps = { - data: void 0, - onChange: void 0, - managedClasses: void 0, - }; - - public render(): React.ReactNode { - return ( -
    - -
    -
    - -
    - -
    -
    - ); - } - - private handleColorOnChange = (e: React.ChangeEvent): void => { - this.props.onChange({ - color: e.target.value || void 0, - }); - }; -} diff --git a/packages/tooling/fast-tooling-react/src/css-editor/color/index.ts b/packages/tooling/fast-tooling-react/src/css-editor/color/index.ts deleted file mode 100644 index ab66cd47ce1..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/color/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import manageJss from "@microsoft/fast-jss-manager-react"; -import Color from "./color"; -import CSSColorStyles from "./color.style"; - -/* - * The type returned by manageJss type is very complicated so we'll let the - * compiler infer the type instead of re-declaring just for the package export - */ -const CSSColor = manageJss(CSSColorStyles)(Color); -type CSSColor = InstanceType; - -export { CSSColor }; -export * from "./color.props"; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/editor.props.ts b/packages/tooling/fast-tooling-react/src/css-editor/editor.props.ts deleted file mode 100644 index a746228e731..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/editor.props.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { ManagedClasses } from "@microsoft/fast-jss-manager-react"; -import { CSSEditorClassNameContract } from "./editor.style"; -import { CSSSpacingValues } from "./spacing"; -import { CSSPositionValues } from "./position"; -import { CSSWidthValues } from "./width"; -import { CSSHeightValues } from "./height"; -import { CSSColorValues } from "./color"; -import { CSSBorderValues } from "./border"; -import { CSSBoxShadowValues } from "./box-shadow"; -import { CSSBackgroundValues } from "./background"; -import { CSSBorderRadiusValues } from "./border-radius"; - -export enum CSSComponent { - spacing, - position, - width, - height, - color, - border, - boxShadow, - background, - borderRadius, -} - -export interface CSSEditorValues - extends CSSSpacingValues, - CSSPositionValues, - CSSWidthValues, - CSSHeightValues, - CSSColorValues, - CSSBorderValues, - CSSBoxShadowValues, - CSSBackgroundValues, - CSSBorderRadiusValues {} - -export type CSSOnChange = (CSS: CSSEditorValues) => void; - -export type CSSEditorUnhandledProps = React.HTMLAttributes; - -export interface CSSEditorHandledProps - extends ManagedClasses { - /** - * The onChange event for updating the data - */ - onChange?: CSSOnChange; - - /** - * The CSS data - */ - data?: CSSEditorValues; -} - -export type CSSEditorProps = CSSEditorHandledProps & CSSEditorUnhandledProps; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/editor.schema.json b/packages/tooling/fast-tooling-react/src/css-editor/editor.schema.json deleted file mode 100644 index fefa4165535..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/editor.schema.json +++ /dev/null @@ -1,71 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema#", - "title": "CSS Editor", - "description": "A CSS editor component's schema definition.", - "id": "@microsoft/fast-tooling-react/css-editor", - "type": "object", - "properties": { - "data": { - "title": "CSS Values", - "type": "object", - "properties": { - "position": { - "title": "Position", - "type": "string", - "enum": [ - "absolute", - "static" - ] - }, - "left": { - "title": "Left", - "type": "string" - }, - "right": { - "title": "Right", - "type": "string" - }, - "top": { - "title": "Top", - "type": "string" - }, - "bottom": { - "title": "Bottom", - "type": "string" - }, - "marginTop": { - "title": "Margin top", - "type": "string" - }, - "marginBottom": { - "title": "Margin bottom", - "type": "string" - }, - "marginLeft": { - "title": "Margin left", - "type": "string" - }, - "marginRight": { - "title": "Margin right", - "type": "string" - }, - "paddingTop": { - "title": "Padding top", - "type": "string" - }, - "paddingBottom": { - "title": "Padding bottom", - "type": "string" - }, - "paddingLeft": { - "title": "Padding left", - "type": "string" - }, - "paddingRight": { - "title": "Padding right", - "type": "string" - } - } - } - } -} diff --git a/packages/tooling/fast-tooling-react/src/css-editor/editor.spec.tsx b/packages/tooling/fast-tooling-react/src/css-editor/editor.spec.tsx deleted file mode 100644 index 1546e0f5a2b..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/editor.spec.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow } from "enzyme"; -import Editor from "./editor"; -import { CSSEditor, PositionValue, SpacingType } from "./"; -import { SpacingProperty } from "./spacing"; -import { CSSEditorValues } from "./editor.props"; - -/** - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("CSSEditor", () => { - test("should not throw", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - test("should have a displayName that matches the component name", () => { - expect((Editor as any).name).toBe(Editor.displayName); - }); - test("should implement the CSSPosition component", () => { - const rendered: any = mount(); - - expect(rendered.find("CSSPosition").length).toBe(1); - }); - test("should pass all position props to the CSSPosition component", () => { - const positionValue: PositionValue = PositionValue.absolute; - const topValue: string = "1"; - const leftValue: string = "2"; - const bottomValue: string = "3"; - const rightValue: string = "4"; - const callback: any = jest.fn(); - const data: CSSEditorValues = { - position: positionValue, - top: topValue, - left: leftValue, - bottom: bottomValue, - right: rightValue, - }; - const rendered: any = mount(); - - const cssPosition: any = rendered.find("CSSPosition"); - - expect(cssPosition.prop("data").position).toBe(positionValue); - expect(cssPosition.prop("data").top).toBe(topValue); - expect(cssPosition.prop("data").left).toBe(leftValue); - expect(cssPosition.prop("data").bottom).toBe(bottomValue); - expect(cssPosition.prop("data").right).toBe(rightValue); - expect(typeof cssPosition.prop("onChange")).toEqual("function"); - }); - test("should execute the `onChange` callback to recieve the correct CSSPosition props", () => { - const updatedPositionValue: string = "5"; - const positionValue: PositionValue = PositionValue.absolute; - const topValue: string = "1"; - const leftValue: string = "2"; - const callbackPosition: any = jest.fn((args: any): void => { - expect(args).toEqual({ - top: updatedPositionValue, - position: positionValue, - left: leftValue, - }); - }); - const data: CSSEditorValues = { - position: positionValue, - top: topValue, - left: leftValue, - }; - const rendered: any = mount( - - ); - - const renderedCSSPosition: any = rendered.find("CSSPosition"); - const topPositionInput: any = renderedCSSPosition.find("input").at(0); - topPositionInput.simulate("change", { - target: { value: updatedPositionValue }, - }); - - expect(callbackPosition).toHaveBeenCalled(); - }); - test("should pass all position props to the CSSSpacing component", () => { - const topValue: string = "1"; - const leftValue: string = "2"; - const bottomValue: string = "3"; - const rightValue: string = "4"; - const callback: any = jest.fn(); - const data: CSSEditorValues = { - marginTop: topValue, - marginLeft: leftValue, - marginBottom: bottomValue, - marginRight: rightValue, - paddingTop: topValue, - paddingLeft: leftValue, - paddingBottom: bottomValue, - paddingRight: rightValue, - }; - - const rendered: any = mount(); - - const cssPosition: any = rendered.find("CSSSpacing"); - - expect(cssPosition.prop("data")[SpacingProperty.marginTop]).toBe(topValue); - expect(cssPosition.prop("data")[SpacingProperty.marginLeft]).toBe(leftValue); - expect(cssPosition.prop("data")[SpacingProperty.marginBottom]).toBe(bottomValue); - expect(cssPosition.prop("data")[SpacingProperty.marginRight]).toBe(rightValue); - expect(cssPosition.prop("data")[SpacingProperty.paddingTop]).toBe(topValue); - expect(cssPosition.prop("data")[SpacingProperty.paddingLeft]).toBe(leftValue); - expect(cssPosition.prop("data")[SpacingProperty.paddingBottom]).toBe(bottomValue); - expect(cssPosition.prop("data")[SpacingProperty.paddingRight]).toBe(rightValue); - expect(typeof cssPosition.prop("onChange")).toEqual(typeof Function); - }); - test("should execute the `onChange` callback to receive the correct CSSSpacing props", () => { - const updatedSpacingValue: string = "5"; - const topValue: string = "1"; - const leftValue: string = "2"; - const callbackSpacing: any = jest.fn((args: any): void => { - expect(args).toEqual({ - marginLeft: leftValue, - marginTop: updatedSpacingValue, - }); - }); - const data: CSSEditorValues = { - marginTop: topValue, - marginLeft: leftValue, - }; - const rendered: any = mount(); - - const renderedCSSSpacing: any = rendered.find("CSSSpacing"); - const topSpacingInput: any = renderedCSSSpacing.find("input").at(0); - topSpacingInput.simulate("change", { - target: { value: updatedSpacingValue }, - }); - - expect(callbackSpacing).toHaveBeenCalled(); - }); -}); diff --git a/packages/tooling/fast-tooling-react/src/css-editor/editor.style.ts b/packages/tooling/fast-tooling-react/src/css-editor/editor.style.ts deleted file mode 100644 index 510a0658f22..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/editor.style.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { ComponentStyles } from "@microsoft/fast-jss-manager-react"; -import { L4CSSProperty, textColorCSSProperty } from "../style"; -import { CSSPositionClassNameContract } from "./position/position.style"; - -export interface CSSEditorClassNameContract extends CSSPositionClassNameContract { - cssEditor?: string; -} - -const styles: ComponentStyles = { - cssEditor: { - background: L4CSSProperty, - color: textColorCSSProperty, - height: "100%", - padding: "0 10px", - }, -}; - -export default styles; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/editor.tsx b/packages/tooling/fast-tooling-react/src/css-editor/editor.tsx deleted file mode 100644 index 0368502402e..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/editor.tsx +++ /dev/null @@ -1,257 +0,0 @@ -import React from "react"; -import { get, omit, pick } from "lodash-es"; -import Foundation, { - FoundationProps, - HandledProps, -} from "@microsoft/fast-components-foundation-react"; -import { - CSSComponent, - CSSEditorHandledProps, - CSSEditorUnhandledProps, - CSSEditorValues, -} from "./editor.props"; -import { CSSPosition, CSSPositionValues, Location, PositionValue } from "./position"; -import { CSSSpacing, CSSSpacingValues, SpacingProperty } from "./spacing"; -import { CSSWidth, CSSWidthValues } from "./width"; -import { CSSHeight, CSSHeightValues } from "./height"; -import { CSSColor, CSSColorValues } from "./color"; -import { CSSBorder, CSSBorderValues } from "./border"; -import { CSSBoxShadow, CSSBoxShadowValues } from "./box-shadow"; -import { CSSBackground, CSSBackgroundValues } from "./background"; -import { CSSBorderRadius, CSSBorderRadiusValues } from "./border-radius"; - -export default class CSSEditor extends Foundation< - CSSEditorHandledProps, - CSSEditorUnhandledProps, - {} -> { - public static displayName: string = "CSSEditor"; - - protected handledProps: HandledProps = { - data: void 0, - onChange: void 0, - managedClasses: void 0, - }; - - private spacingPropertyNames: string[] = [ - SpacingProperty.marginBottom, - SpacingProperty.marginLeft, - SpacingProperty.marginRight, - SpacingProperty.marginTop, - SpacingProperty.paddingBottom, - SpacingProperty.paddingLeft, - SpacingProperty.paddingRight, - SpacingProperty.paddingTop, - ]; - - private postionPropertyNames: string[] = [ - "position", - Location.left, - Location.right, - Location.top, - Location.bottom, - ]; - - private heightPropertyNames: string[] = ["height"]; - - private widthPropertyNames: string[] = ["width"]; - - private backgroundPropertyNames: string[] = ["background"]; - - private colorPropertyNames: string[] = ["color"]; - - private borderPropertyNames: string[] = ["borderColor", "borderStyle", "borderWidth"]; - - private boxShadowPropertyNames: string[] = ["boxShadow"]; - - private borderRadiusPropertyNames: string[] = [ - "borderRadius", - "borderTopLeftRadius", - "borderTopRightRadius", - "borderBottomRightRadius", - "borderBottomLeftRadius", - ]; - - public render(): React.ReactNode { - return ( -
    - {this.renderPosition()} -
    - ); - } - - private renderPosition(): React.ReactNode { - return ( - - - - - - - - - - - - ); - } - - private getSpacingData(): CSSSpacingValues { - const spacingData: CSSSpacingValues = pick( - this.props.data, - this.spacingPropertyNames - ); - - return spacingData; - } - - private getPositionData(): CSSPositionValues { - const positionData: CSSPositionValues = pick( - this.props.data, - this.postionPropertyNames - ); - - return positionData; - } - - /** - * Gets the height value - */ - private getHeightData(): CSSHeightValues { - return pick(this.props.data, this.heightPropertyNames); - } - - /** - * Gets the width value - */ - private getWidthData(): CSSWidthValues { - return pick(this.props.data, this.widthPropertyNames); - } - - /** - * Gets the color value - */ - private getColorData(): CSSColorValues { - return pick(this.props.data, this.colorPropertyNames); - } - - /** - * Gets the bac kground value - */ - private getBackgroundData(): CSSBackgroundValues { - return pick(this.props.data, this.backgroundPropertyNames); - } - - /** - * Gets the border value - */ - private getBorderData(): CSSBorderValues { - const borderData: CSSBorderValues = pick( - this.props.data, - this.borderPropertyNames - ); - return borderData; - } - - /** - * Gets the box shadow value - */ - private getBoxShadowData(): CSSBoxShadowValues { - return pick(this.props.data, this.boxShadowPropertyNames); - } - - /** - * Gets the box shadow value - */ - private getBorderRadiusData(): CSSBorderRadiusValues { - return pick(this.props.data, this.borderRadiusPropertyNames); - } - - private handleCSSUpdate = ( - component: CSSComponent - ): ((updatedComponentCSS: D) => void) => { - return (updatedComponentCSS: D): void => { - if (typeof this.props.onChange === "function") { - let updatedCSS: Partial; - - switch (component) { - case CSSComponent.spacing: - updatedCSS = omit(this.props.data, this.spacingPropertyNames); - break; - case CSSComponent.border: - updatedCSS = omit(this.props.data, this.borderPropertyNames); - break; - case CSSComponent.borderRadius: - updatedCSS = omit( - this.props.data, - this.borderRadiusPropertyNames - ); - break; - case CSSComponent.boxShadow: - updatedCSS = omit(this.props.data, this.boxShadowPropertyNames); - break; - case CSSComponent.color: - updatedCSS = omit(this.props.data, this.colorPropertyNames); - break; - case CSSComponent.background: - updatedCSS = omit(this.props.data, this.backgroundPropertyNames); - break; - case CSSComponent.height: - updatedCSS = omit(this.props.data, this.heightPropertyNames); - break; - case CSSComponent.width: - updatedCSS = omit(this.props.data, this.widthPropertyNames); - break; - case CSSComponent.position: - updatedCSS = omit(this.props.data, this.postionPropertyNames); - break; - } - - const reducedData: Partial = Object.keys( - updatedComponentCSS - ).reduce( - ( - filteredProperties: Partial, - key: string - ): Partial => { - const value: unknown = updatedComponentCSS[key]; - return typeof value === "string" && value.trim().length - ? { ...filteredProperties, [key]: value } - : filteredProperties; - }, - {} - ); - - this.props.onChange(Object.assign({}, updatedCSS, reducedData)); - } - }; - }; -} diff --git a/packages/tooling/fast-tooling-react/src/css-editor/height/height.props.ts b/packages/tooling/fast-tooling-react/src/css-editor/height/height.props.ts deleted file mode 100644 index f7f34d5c051..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/height/height.props.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ManagedClasses } from "@microsoft/fast-jss-manager-react"; -import { CSSHeightClassNameContract } from "./height.style"; - -export interface CSSHeightValues { - height?: string; -} - -export type CSSHeightUnhandledProps = React.HTMLAttributes; - -export interface CSSHeightHandledProps - extends ManagedClasses { - /** - * The data - */ - data?: CSSHeightValues; - - /** - * The onChange callback - */ - onChange?: (height: CSSHeightValues) => void; -} - -export type CSSHeightProps = CSSHeightHandledProps & CSSHeightUnhandledProps; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/height/height.schema.json b/packages/tooling/fast-tooling-react/src/css-editor/height/height.schema.json deleted file mode 100644 index b318affdf6b..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/height/height.schema.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema#", - "title": "CSS Height", - "description": "A CSS height component's schema definition.", - "id": "@microsoft/fast-tooling-react/css-height", - "type": "object", - "properties": { - "data": { - "title": "CSS Values", - "type": "object", - "properties": { - "height": { - "title": "Height", - "type": "string" - } - } - } - } -} \ No newline at end of file diff --git a/packages/tooling/fast-tooling-react/src/css-editor/height/height.spec.tsx b/packages/tooling/fast-tooling-react/src/css-editor/height/height.spec.tsx deleted file mode 100644 index fefe5c316ec..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/height/height.spec.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow } from "enzyme"; -import CSSHeight from "./height"; -import { CSSHeightClassNameContract } from "./height.style"; - -/** - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("CSSHeight", () => { - const managedClasses: CSSHeightClassNameContract = { - cssHeight: "cssHeight", - cssHeight_control: "cssHeight_control", - cssHeight_input: "cssHeight_input", - cssHeight_label: "cssHeight_label", - }; - - test("should not throw", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - test("should have a displayName that matches the component name", () => { - expect((CSSHeight as any).name).toBe(CSSHeight.displayName); - }); - test("should use the `data` prop as the input value if the `height` is provided", () => { - const heightValue: string = "12px"; - const rendered: any = mount( - - ); - - expect(rendered.find(`.${managedClasses.cssHeight_input}`).prop("value")).toBe( - heightValue - ); - }); - test("should fire the `onChange` event if the input value is updated", () => { - const heightValue: string = "12px"; - const newHeightValue: string = "40px"; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find(`.${managedClasses.cssHeight_input}`) - .simulate("change", { target: { value: newHeightValue } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toEqual({ height: newHeightValue }); - }); - test("should not change the input from controlled to uncontrolled", () => { - const heightValue: string = "12px"; - const newHeightValue: string = void 0; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find(`.${managedClasses.cssHeight_input}`) - .simulate("change", { target: { value: newHeightValue } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toEqual({ height: newHeightValue }); - - rendered.setProps({ - data: {}, - }); - - expect(rendered.find(`.${managedClasses.cssHeight_input}`).prop("value")).toBe( - "" - ); - }); -}); diff --git a/packages/tooling/fast-tooling-react/src/css-editor/height/height.style.ts b/packages/tooling/fast-tooling-react/src/css-editor/height/height.style.ts deleted file mode 100644 index 3064a57c288..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/height/height.style.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { ComponentStyles } from "@microsoft/fast-jss-manager-react"; -import { - controlRegionStyle, - controlWrapperStyle, - inputStyle, - labelStyle, -} from "../../style"; - -export interface CSSHeightClassNameContract { - cssHeight?: string; - cssHeight_control?: string; - cssHeight_input?: string; - cssHeight_label?: string; -} - -const styles: ComponentStyles = { - cssHeight: { - ...controlWrapperStyle, - }, - cssHeight_control: { - ...controlRegionStyle, - }, - cssHeight_input: { - ...inputStyle, - width: "50%", - marginLeft: "4px", - }, - cssHeight_label: { - ...labelStyle, - width: "50%", - }, -}; - -export default styles; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/height/height.tsx b/packages/tooling/fast-tooling-react/src/css-editor/height/height.tsx deleted file mode 100644 index e195a72a4f3..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/height/height.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react"; -import { get } from "lodash-es"; -import Foundation, { - FoundationProps, - HandledProps, -} from "@microsoft/fast-components-foundation-react"; -import { CSSHeightHandledProps, CSSHeightUnhandledProps } from "./height.props"; - -export default class CSSHeight extends Foundation< - CSSHeightHandledProps, - CSSHeightUnhandledProps, - {} -> { - public static displayName: string = "CSSHeight"; - - protected handledProps: HandledProps = { - data: void 0, - onChange: void 0, - managedClasses: void 0, - }; - - public render(): React.ReactNode { - return ( -
    -
    - - -
    -
    - ); - } - - private handleHeightOnChange = (e: React.ChangeEvent): void => { - this.props.onChange({ - height: e.target.value || void 0, - }); - }; -} diff --git a/packages/tooling/fast-tooling-react/src/css-editor/height/index.ts b/packages/tooling/fast-tooling-react/src/css-editor/height/index.ts deleted file mode 100644 index c656a1009d4..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/height/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import manageJss from "@microsoft/fast-jss-manager-react"; -import Height from "./height"; -import CSSHeightStyles from "./height.style"; - -/* - * The type returned by manageJss type is very complicated so we'll let the - * compiler infer the type instead of re-declaring just for the package export - */ -const CSSHeight = manageJss(CSSHeightStyles)(Height); -type CSSHeight = InstanceType; - -export { CSSHeight }; -export * from "./height.props"; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/index.ts b/packages/tooling/fast-tooling-react/src/css-editor/index.ts deleted file mode 100644 index 6a0a1dfb176..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -import manageJss from "@microsoft/fast-jss-manager-react"; -import Editor from "./editor"; -import CSSEditorStyles from "./editor.style"; - -/* - * The type returned by manageJss type is very complicated so we'll let the - * compiler infer the type instead of re-declaring just for the package export - */ -const CSSEditor = manageJss(CSSEditorStyles)(Editor); -type CSSEditor = InstanceType; - -export { CSSEditor }; -export * from "./editor.props"; -export * from "./position"; -export * from "./spacing"; -export * from "./height"; -export * from "./width"; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/position/index.ts b/packages/tooling/fast-tooling-react/src/css-editor/position/index.ts deleted file mode 100644 index a988c27f13b..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/position/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import manageJss from "@microsoft/fast-jss-manager-react"; -import Position from "./position"; -import CSSPositionStyles from "./position.style"; - -/* - * The type returned by manageJss type is very complicated so we'll let the - * compiler infer the type instead of re-declaring just for the package export - */ -const CSSPosition = manageJss(CSSPositionStyles)(Position); -type CSSPosition = InstanceType; - -export { CSSPosition }; -export * from "./position.props"; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/position/position.props.ts b/packages/tooling/fast-tooling-react/src/css-editor/position/position.props.ts deleted file mode 100644 index 710f8ac101b..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/position/position.props.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { ManagedClasses } from "@microsoft/fast-jss-manager-react"; -import { CSSPositionClassNameContract } from "./position.style"; - -export enum PositionValue { - static = "static", - absolute = "absolute", - relative = "relative", - fixed = "fixed", -} - -export enum Location { - top = "top", - left = "left", - right = "right", - bottom = "bottom", -} - -export interface LocationsMappedToClassNames { - location: Location; - className: string; -} - -export type CSSPositionUnhandledProps = React.HTMLAttributes; - -export interface CSSPositionValues { - position?: PositionValue; - left?: string; - right?: string; - top?: string; - bottom?: string; -} - -export interface CSSPositionHandledProps - extends ManagedClasses { - /** - * The data - */ - data?: CSSPositionValues; - - /** - * The onChange callback - */ - onChange?: (position: CSSPositionValues) => void; -} - -export type CSSPositionProps = CSSPositionHandledProps & CSSPositionUnhandledProps; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/position/position.schema.json b/packages/tooling/fast-tooling-react/src/css-editor/position/position.schema.json deleted file mode 100644 index c2b4bef757a..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/position/position.schema.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema#", - "title": "CSS Position", - "description": "A CSS position component's schema definition.", - "id": "@microsoft/fast-tooling-react/css-position", - "type": "object", - "properties": { - "data": { - "title": "CSS Values", - "type": "object", - "properties": { - "position": { - "title": "Position", - "type": "string", - "enum": [ - "absolute", - "static" - ] - }, - "left": { - "title": "Left", - "type": "string" - }, - "right": { - "title": "Right", - "type": "string" - }, - "top": { - "title": "Top", - "type": "string" - }, - "bottom": { - "title": "Bottom", - "type": "string" - } - } - } - } -} diff --git a/packages/tooling/fast-tooling-react/src/css-editor/position/position.spec.tsx b/packages/tooling/fast-tooling-react/src/css-editor/position/position.spec.tsx deleted file mode 100644 index 6bd1be0d99d..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/position/position.spec.tsx +++ /dev/null @@ -1,284 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, render, shallow } from "enzyme"; -import BaseCSSPosition from "./position"; -import { CSSPosition } from "./"; -import { CSSPositionValues, PositionValue } from "./position.props"; - -/** - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("CSSPosition", () => { - const topPosition: number = 0; - const leftPosition: number = 1; - const rightPosition: number = 2; - const bottomPosition: number = 3; - - test("should not throw", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - test("should have a displayName that matches the component name", () => { - expect((BaseCSSPosition as any).name).toBe(BaseCSSPosition.displayName); - }); - test("should show the position input elements if the position prop is set to `absolute`", () => { - const rendered: any = mount( - - ); - - expect(rendered.find("input").length).toBe(4); - }); - test("should show the position input elements if the position prop is set to `fixed`", () => { - const rendered: any = mount( - - ); - - expect(rendered.find("input").length).toBe(4); - }); - test("should show the position input elements if the position prop is set to `relative`", () => { - const rendered: any = mount( - - ); - - expect(rendered.find("input").length).toBe(4); - }); - test("should not show the position input elements if the position is set to `static`", () => { - const rendered: any = mount( - - ); - - expect(rendered.find("input").length).toBe(0); - }); - test("should pass the `position` prop values to the select element", () => { - const renderedAbsolute: any = mount( - - ); - const renderedFixed: any = mount( - - ); - const renderedRelative: any = mount( - - ); - const renderedStatic: any = mount( - - ); - - expect(renderedAbsolute.find("select").prop("value")).toBe( - PositionValue.absolute - ); - expect(renderedFixed.find("select").prop("value")).toBe(PositionValue.fixed); - expect(renderedRelative.find("select").prop("value")).toBe( - PositionValue.relative - ); - expect(renderedStatic.find("select").prop("value")).toBe(PositionValue.static); - }); - test("should pass the `top` prop values to the top input", () => { - const value: string = "25px"; - const rendered: any = mount( - - ); - const input: any = rendered.find("input").at(topPosition); - - expect(input.prop("value")).toBe(value); - }); - test("should pass the `left` prop values to the left input", () => { - const value: string = "25px"; - const rendered: any = mount( - - ); - const input: any = rendered.find("input").at(leftPosition); - - expect(input.prop("value")).toBe(value); - }); - test("should pass the `right` prop values to the right input", () => { - const value: string = "25px"; - const rendered: any = mount( - - ); - const input: any = rendered.find("input").at(rightPosition); - - expect(input.prop("value")).toBe(value); - }); - test("should pass the `bottom` prop values to the bottom input", () => { - const value: string = "25px"; - const rendered: any = mount( - - ); - const input: any = rendered.find("input").at(bottomPosition); - - expect(input.prop("value")).toBe(value); - }); - test("should fire `onChange` callback if the `position` prop is changed", () => { - const callback: any = jest.fn((args: any): void => { - expect(args.position).toBe(PositionValue.static); - }); - const rendered: any = mount( - - ); - rendered.find("select").simulate("change", { - target: { - value: PositionValue.static, - }, - }); - - expect(callback).toHaveBeenCalled(); - }); - test("should fire `onChange` callback if the `top` prop is changed", () => { - const value: string = "25px"; - const callback: any = jest.fn((args: any): void => { - expect(args.top).toBe(value); - }); - const rendered: any = mount( - - ); - const input: any = rendered.find("input").at(topPosition); - input.simulate("change", { - target: { value }, - }); - - expect(callback).toHaveBeenCalled(); - }); - test("should fire `onChange` callback if the `left` prop is changed", () => { - const value: string = "25px"; - const callback: any = jest.fn((args: any): void => { - expect(args.left).toBe(value); - }); - const rendered: any = mount( - - ); - const input: any = rendered.find("input").at(leftPosition); - input.simulate("change", { - target: { value }, - }); - - expect(callback).toHaveBeenCalled(); - }); - test("should fire `onChange` callback if the `right` prop is changed", () => { - const value: string = "25px"; - const callback: any = jest.fn((args: any): void => { - expect(args.right).toBe(value); - }); - const rendered: any = mount( - - ); - const input: any = rendered.find("input").at(rightPosition); - input.simulate("change", { - target: { value }, - }); - - expect(callback).toHaveBeenCalled(); - }); - test("should fire `onChange` callback if the `bottom` prop is changed", () => { - const value: string = "25px"; - const callback: any = jest.fn((args: any): void => { - expect(args.bottom).toBe(value); - }); - const rendered: any = mount( - - ); - const input: any = rendered.find("input").at(bottomPosition); - input.simulate("change", { - target: { value }, - }); - - expect(callback).toHaveBeenCalled(); - }); - test("should not allow the `left` prop value to be added to the `onChange` callback if the `right` prop is being set", () => { - const value: string = "25px"; - const callback: any = jest.fn((args: any): void => { - expect(args.right).toBe(value); - expect(args.left).toBe(undefined); - expect(args.position).toBe("absolute"); - }); - const rendered: any = mount( - - ); - const input: any = rendered.find("input").at(rightPosition); - input.simulate("change", { - target: { value }, - }); - - expect(callback).toHaveBeenCalled(); - }); - test("should not allow the `right` prop value to be added to the `onChange` callback if the `left` prop is being set", () => { - const value: string = "25px"; - const callback: any = jest.fn((args: any): void => { - expect(args.left).toBe(value); - expect(args.right).toBe(undefined); - expect(args.position).toBe("absolute"); - }); - const rendered: any = mount( - - ); - const input: any = rendered.find("input").at(leftPosition); - input.simulate("change", { - target: { value }, - }); - - expect(callback).toHaveBeenCalled(); - }); - test("should not allow the `bottom` prop value to be added to the `onChange` callback if the `top` prop is being set", () => { - const value: string = "25px"; - const callback: any = jest.fn((args: any): void => { - expect(args.top).toBe(value); - expect(args.bottom).toBe(undefined); - expect(args.position).toBe("absolute"); - }); - const rendered: any = mount( - - ); - const input: any = rendered.find("input").at(topPosition); - input.simulate("change", { - target: { value }, - }); - - expect(callback).toHaveBeenCalled(); - }); - test("should not allow the `top` prop value to be added to the `onChange` callback if the `bottom` prop is being set", () => { - const value: string = "25px"; - const callback: any = jest.fn((args: any): void => { - expect(args.bottom).toBe(value); - expect(args.top).toBe(undefined); - expect(args.position).toBe("absolute"); - }); - const rendered: any = mount( - - ); - const input: any = rendered.find("input").at(bottomPosition); - input.simulate("change", { - target: { value }, - }); - - expect(callback).toHaveBeenCalled(); - }); -}); diff --git a/packages/tooling/fast-tooling-react/src/css-editor/position/position.style.ts b/packages/tooling/fast-tooling-react/src/css-editor/position/position.style.ts deleted file mode 100644 index 258b0ed5cac..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/position/position.style.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { ComponentStyles } from "@microsoft/fast-jss-manager-react"; -import { - controlWrapperStyle, - inputStyle, - L1CSSProperty, - selectInputStyle, - selectSpanStyle, - textColorCSSProperty, -} from "../../style"; - -export interface CSSPositionClassNameContract { - cssPosition?: string; - cssPosition_control?: string; - cssPosition_select?: string; - cssPosition_input?: string; - absoluteInput_row?: string; - absoluteInput?: string; - absoluteInput_centerRow?: string; - absoluteInput_centerRow__activeTop?: string; - absoluteInput_centerRow__activeBottom?: string; - absoluteInput_centerRow__activeLeft?: string; - absoluteInput_centerRow__activeRight?: string; - absoluteInput_centerRowContent?: string; -} - -const styles: ComponentStyles = { - cssPosition: { - fontSize: "11px", - ...controlWrapperStyle, - }, - cssPosition_control: { - ...selectSpanStyle, - }, - cssPosition_select: { - ...selectInputStyle, - }, - cssPosition_input: { - ...inputStyle, - alignSelf: "center", - width: "45px", - }, - absoluteInput: { - marginTop: "10px", - }, - absoluteInput_row: { - display: "flex", - justifyContent: "center", - }, - absoluteInput_centerRow: { - position: "relative", - padding: "10px", - "&::before, &::after": { - content: "''", - position: "absolute", - top: "calc(50% - 1px)", - width: "5px", - height: "2px", - background: L1CSSProperty, - zIndex: 1, - }, - "&::before": { - left: "2px", - }, - "&::after": { - right: "2px", - }, - }, - absoluteInput_centerRow__activeTop: { - "& $absoluteInput_centerRowContent": { - "&::before": { - background: textColorCSSProperty, - }, - }, - }, - absoluteInput_centerRow__activeBottom: { - "& $absoluteInput_centerRowContent": { - "&::after": { - background: textColorCSSProperty, - }, - }, - }, - absoluteInput_centerRow__activeLeft: { - "&::before": { - background: textColorCSSProperty, - }, - }, - absoluteInput_centerRow__activeRight: { - "&::after": { - background: textColorCSSProperty, - }, - }, - absoluteInput_centerRowContent: { - "&::before, &::after": { - content: "''", - position: "absolute", - left: "calc(50% - 1px)", - width: "2px", - height: "5px", - background: L1CSSProperty, - zIndex: 1, - }, - "&::before": { - top: "2px", - }, - "&::after": { - bottom: "2px", - }, - }, -}; - -export default styles; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/position/position.tsx b/packages/tooling/fast-tooling-react/src/css-editor/position/position.tsx deleted file mode 100644 index b60229b6c91..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/position/position.tsx +++ /dev/null @@ -1,218 +0,0 @@ -import React from "react"; -import { get, pick } from "lodash-es"; -import Foundation, { - FoundationProps, - HandledProps, -} from "@microsoft/fast-components-foundation-react"; -import { - CSSPositionHandledProps, - CSSPositionUnhandledProps, - CSSPositionValues, - Location, - LocationsMappedToClassNames, - PositionValue, -} from "./position.props"; - -export default class CSSPosition extends Foundation< - CSSPositionHandledProps, - CSSPositionUnhandledProps, - {} -> { - public static displayName: string = "CSSPosition"; - - protected handledProps: HandledProps = { - data: void 0, - onChange: void 0, - managedClasses: void 0, - }; - - public render(): React.ReactNode { - const position: PositionValue = get( - this.props, - `data.position`, - PositionValue.static - ); - - return ( -
    - - - - {this.renderControls(position)} -
    - ); - } - - private renderControls(position?: PositionValue): JSX.Element { - switch (position) { - case PositionValue.absolute: - case PositionValue.fixed: - case PositionValue.relative: - return ( -
    -
    - {this.renderLocationInput(Location.top)} -
    -
    - {this.renderLocationInput(Location.left)} -
    -
    - {"offset".toUpperCase()} -
    -
    - {this.renderLocationInput(Location.right)} -
    -
    - {this.renderLocationInput(Location.bottom)} -
    -
    - ); - case PositionValue.static: - default: - return null; - } - } - - private renderLocationInput(location: Location): JSX.Element { - return ( - - ); - } - - private generateCenterRowClassNames(): string { - let classNames: string = this.props.managedClasses.absoluteInput_centerRow; - - [ - { - location: Location.top, - className: this.props.managedClasses.absoluteInput_centerRow__activeTop, - }, - { - location: Location.bottom, - className: this.props.managedClasses - .absoluteInput_centerRow__activeBottom, - }, - { - location: Location.left, - className: this.props.managedClasses.absoluteInput_centerRow__activeLeft, - }, - { - location: Location.right, - className: this.props.managedClasses.absoluteInput_centerRow__activeRight, - }, - ].forEach((locationsMappedToClassNames: LocationsMappedToClassNames): void => { - classNames = this.props[locationsMappedToClassNames.location] - ? `${classNames} ${locationsMappedToClassNames.className}` - : classNames; - }); - - return classNames; - } - - private handlePositionOnChange = (e: React.ChangeEvent): void => { - this.handleOnChange(e.target.value, "position"); - }; - - private handleLocationInputOnChange = ( - location: Location - ): ((e: React.ChangeEvent) => void) => { - return (e: React.ChangeEvent): void => { - this.handleOnChange(e.target.value, location); - }; - }; - - private handleOnChange = (value: string, cssKey: Location | "position"): void => { - const updatedProps: CSSPositionValues = this.assignUpdatedProps( - ["position", Location.top, Location.left, Location.right, Location.bottom], - cssKey, - value - ); - - if (typeof this.props.onChange === "function") { - this.props.onChange(updatedProps); - } - }; - - private assignUpdatedProps( - props: string[], - updatedPropKey: string, - updatedPropValue: string - ): CSSPositionValues { - let updatedProps: Partial = {}; - - switch (updatedPropKey) { - case "position": - updatedProps[updatedPropKey] = updatedPropValue as PositionValue; - break; - case Location.left: - case Location.right: - case Location.top: - case Location.bottom: - updatedProps = this.getUpdatedPositions( - props, - updatedPropKey, - updatedPropValue - ); - - const position: PositionValue = get(this.props, "data.position"); - - if (typeof position !== "undefined") { - updatedProps.position = position; - } - break; - } - - return updatedProps; - } - - private getUpdatedPositions( - props: string[], - updatedPropKey: Location, - updatedPropValue: string - ): Partial { - const updatedProps: Partial = {}; - const excludedProp: Location = this.getExcludedLocation(updatedPropKey); - - props.forEach((prop: string): void => { - if (get(this.props, `data.${prop}`) && prop !== excludedProp) { - updatedProps[prop] = this.props.data[prop]; - } - }); - - updatedProps[updatedPropKey] = updatedPropValue; - - return updatedProps; - } - - // Get the location that should be excluded from being added to the object, - // this should be used for the opposing location, eg. if left is being set, - // do not set right value. - private getExcludedLocation(updatedPropKey: Location): Location { - return updatedPropKey === Location.left - ? Location.right - : updatedPropKey === Location.right - ? Location.left - : updatedPropKey === Location.top - ? Location.bottom - : Location.top; - } -} diff --git a/packages/tooling/fast-tooling-react/src/css-editor/spacing/index.ts b/packages/tooling/fast-tooling-react/src/css-editor/spacing/index.ts deleted file mode 100644 index d9ff398cc77..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/spacing/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import manageJss from "@microsoft/fast-jss-manager-react"; -import Spacing from "./spacing"; -import CSSSpacingStyles from "./spacing.style"; - -/* - * The type returned by manageJss type is very complicated so we'll let the - * compiler infer the type instead of re-declaring just for the package export - */ -const CSSSpacing = manageJss(CSSSpacingStyles)(Spacing); -type CSSSpacing = InstanceType; - -export { CSSSpacing }; -export * from "./spacing.props"; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.props.ts b/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.props.ts deleted file mode 100644 index cf2d7891dc9..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.props.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { ManagedClasses } from "@microsoft/fast-jss-manager-react"; -import { CSSSpacingClassNameContract } from "./spacing.style"; - -/** - * Spacing can be either "margin" or "padding" - * this component should be able to control both - * for a more efficient UI - */ -export enum SpacingType { - margin = "margin", - padding = "padding", -} - -/** - * The CSS property keys - */ -export enum SpacingProperty { - marginTop = "marginTop", - marginLeft = "marginLeft", - marginRight = "marginRight", - marginBottom = "marginBottom", - paddingTop = "paddingTop", - paddingBottom = "paddingBottom", - paddingLeft = "paddingLeft", - paddingRight = "paddingRight", -} - -export interface CSSSpacingState { - activeType: SpacingType; - - hoverType: SpacingType | undefined; -} - -export type CSSSpacingUnhandledProps = React.HTMLAttributes; - -export interface CSSSpacingValues { - marginTop?: string; - marginRight?: string; - marginBottom?: string; - marginLeft?: string; - paddingTop?: string; - paddingRight?: string; - paddingBottom?: string; - paddingLeft?: string; -} - -export interface CSSSpacingHandledProps - extends ManagedClasses { - /** - * The data - */ - data?: CSSSpacingValues; - - /** - * The update callback - */ - onChange?: (data: CSSSpacingValues) => void; -} - -export type CSSSpacingProps = CSSSpacingHandledProps & CSSSpacingUnhandledProps; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.schema.json b/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.schema.json deleted file mode 100644 index 0f7f987c9e4..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.schema.json +++ /dev/null @@ -1,47 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema#", - "title": "CSS Spacing", - "description": "A CSS spacing component's schema definition.", - "id": "@microsoft/fast-tooling-react/css-spacing", - "type": "object", - "properties": { - "data": { - "title": "CSS Values", - "type": "object", - "properties": { - "marginTop": { - "title": "Margin top", - "type": "string" - }, - "marginBottom": { - "title": "Margin bottom", - "type": "string" - }, - "marginLeft": { - "title": "Margin left", - "type": "string" - }, - "marginRight": { - "title": "Margin right", - "type": "string" - }, - "paddingTop": { - "title": "Padding top", - "type": "string" - }, - "paddingBottom": { - "title": "Padding bottom", - "type": "string" - }, - "paddingLeft": { - "title": "Padding left", - "type": "string" - }, - "paddingRight": { - "title": "Padding right", - "type": "string" - } - } - } - } -} diff --git a/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.spec.tsx b/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.spec.tsx deleted file mode 100644 index b83b9b593ac..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.spec.tsx +++ /dev/null @@ -1,360 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow } from "enzyme"; -import Spacing from "./spacing"; -import { CSSSpacingClassNameContract } from "./spacing.style"; -import { CSSSpacing, SpacingType } from "./"; - -/** - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("CSSSpacing", () => { - const managedClasses: CSSSpacingClassNameContract = { - cssSpacing: "cssSpacing", - cssSpacing_row: "cssSpacing_row", - cssSpacing_type: "cssSpacing_type", - cssSpacing_type_contentRegion: "cssSpacing_type_contentRegion", - cssSpacing_type__margin: "cssSpacing_type__margin", - cssSpacing_type__padding: "cssSpacing_type__padding", - cssSpacing_type__marginActive: "cssSpacing_type__marginActive", - cssSpacing_type__paddingActive: "cssSpacing_type__paddingActive", - cssSpacing_type__marginHover: "cssSpacing_type__marginHover", - cssSpacing_type__paddingHover: "cssSpacing_type__paddingHover", - cssSpacing_input: "cssSpacing_input", - }; - const top: number = 0; - const left: number = 1; - const right: number = 2; - const bottom: number = 3; - - test("should not throw", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - test("should display the `spacingType` as margin intitially", () => { - const rendered: any = mount(); - - expect(rendered.find("span").text()).toEqual("MARGIN"); - }); - test("should display the `spacingType` as padding when padding is clicked", () => { - const rendered: any = mount(); - - rendered.find(`.${managedClasses.cssSpacing_type__padding}`).simulate("click"); - - expect(rendered.find("span").text()).toEqual("PADDING"); - }); - test("should display the `spacingType` as margin when margin is clicked", () => { - const rendered: any = mount(); - - rendered.find(`.${managedClasses.cssSpacing_type__padding}`).simulate("click"); - rendered.find(`.${managedClasses.cssSpacing_type__margin}`).simulate("click"); - - expect(rendered.find("span").text()).toEqual("MARGIN"); - }); - test("should add an active class to margin `spacingType` region initially", () => { - const rendered: any = mount(); - const classes: string[] = rendered - .find(`.${managedClasses.cssSpacing_type__margin}`) - .prop("className") - .split(" "); - - expect( - classes.find( - (className: string) => - className === managedClasses.cssSpacing_type__marginActive - ) - ).not.toBe(undefined); - }); - test("should add an active class to the padding `spacingType` region when padding is clicked", () => { - const rendered: any = mount(); - - rendered.find(`.${managedClasses.cssSpacing_type__padding}`).simulate("click"); - - const classes: string[] = rendered - .find(`.${managedClasses.cssSpacing_type__padding}`) - .prop("className") - .split(" "); - - expect( - classes.find( - (className: string) => - className === managedClasses.cssSpacing_type__paddingActive - ) - ).not.toBe(undefined); - }); - test("should add a class to the hovered margin `spacingType` region when the region is hovered", () => { - const rendered: any = shallow(); - rendered - .find(`.${managedClasses.cssSpacing_type__margin}`) - .simulate("mouseover", { currentTarget: true, target: true }); - - const classes: string[] = rendered - .find(`.${managedClasses.cssSpacing_type__margin}`) - .prop("className") - .split(" "); - - expect( - classes.find( - (className: string) => - className === managedClasses.cssSpacing_type__marginHover - ) - ).not.toBe(undefined); - }); - test("should add a class to the hovered padding `spacingType` region when the region is hovered", () => { - const rendered: any = shallow(); - rendered - .find(`.${managedClasses.cssSpacing_type__padding}`) - .simulate("mouseover", { currentTarget: true, target: true }); - - const classes: string[] = rendered - .find(`.${managedClasses.cssSpacing_type__padding}`) - .prop("className") - .split(" "); - - expect( - classes.find( - (className: string) => - className === managedClasses.cssSpacing_type__paddingHover - ) - ).not.toBe(undefined); - }); - test("should remove the hover active class when mouseout of the `spacingType` regions", () => { - const rendered: any = shallow(); - rendered - .find(`.${managedClasses.cssSpacing_type__padding}`) - .simulate("mouseout", { currentTarget: true, target: true }); - - const classes: string[] = rendered - .find(`.${managedClasses.cssSpacing_type__padding}`) - .prop("className") - .split(" "); - - expect( - classes.find( - (className: string) => - className === managedClasses.cssSpacing_type__paddingHover - ) - ).toBe(undefined); - }); - test("should remove the hover active class when mouseover of the inner span", () => { - const rendered: any = shallow(); - rendered - .find(`.${managedClasses.cssSpacing_type__padding}`) - .simulate("mouseover", { currentTarget: true, target: true }); - - const classesBefore: string[] = rendered - .find(`.${managedClasses.cssSpacing_type__padding}`) - .prop("className") - .split(" "); - - expect( - classesBefore.find( - (className: string) => - className === managedClasses.cssSpacing_type__paddingHover - ) - ).not.toBe(undefined); - - rendered.find("span").simulate("mouseenter"); - - const classesAfter: string[] = rendered - .find(`.${managedClasses.cssSpacing_type__padding}`) - .prop("className") - .split(" "); - - expect( - classesAfter.find( - (className: string) => - className === managedClasses.cssSpacing_type__paddingHover - ) - ).toBe(undefined); - }); - test("should fire the `onChange` callback when the top margin input values are changed", () => { - const value: string = "top-value-example"; - const onChangeCallback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.find("input").at(top).simulate("change", { target: { value } }); - - expect(onChangeCallback).toHaveBeenCalled(); - expect(onChangeCallback.mock.calls[0][0]).toEqual({ marginTop: value }); - }); - test("should fire the `onChange` callback when the bottom margin input values are changed", () => { - const value: string = "bottom-value-example"; - const onChangeCallback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.find("input").at(bottom).simulate("change", { target: { value } }); - - expect(onChangeCallback).toHaveBeenCalled(); - expect(onChangeCallback.mock.calls[0][0]).toEqual({ marginBottom: value }); - }); - test("should fire the `onChange` callback when the left margin input values are changed", () => { - const value: string = "left-value-example"; - const onChangeCallback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.find("input").at(left).simulate("change", { target: { value } }); - - expect(onChangeCallback).toHaveBeenCalled(); - expect(onChangeCallback.mock.calls[0][0]).toEqual({ marginLeft: value }); - }); - test("should fire the `onChange` callback when the right margin input values are changed", () => { - const value: string = "right-value-example"; - const onChangeCallback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.find("input").at(right).simulate("change", { target: { value } }); - - expect(onChangeCallback).toHaveBeenCalled(); - expect(onChangeCallback.mock.calls[0][0]).toEqual({ marginRight: value }); - }); - test("should fire the `onChange` callback when multiple margin input values are changed", () => { - const rightValue: string = "right-value-example"; - const leftValue: string = "left-value-example"; - const onChangeCallback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered - .find("input") - .at(left) - .simulate("change", { target: { value: leftValue } }); - - expect(onChangeCallback).toHaveBeenCalled(); - expect(onChangeCallback.mock.calls[0][0]).toEqual({ - marginRight: rightValue, - marginLeft: leftValue, - }); - }); - test("should fire the `onChange` callback when the top padding input values are changed", () => { - const value: string = "top-value-example"; - const onChangeCallback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.setState({ activeType: SpacingType.padding }); - - rendered.find("input").at(top).simulate("change", { target: { value } }); - - expect(onChangeCallback).toHaveBeenCalled(); - expect(onChangeCallback.mock.calls[0][0]).toEqual({ paddingTop: value }); - }); - test("should fire the `onChange` callback when the bottom padding input values are changed", () => { - const value: string = "bottom-value-example"; - const onChangeCallback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.setState({ activeType: SpacingType.padding }); - - rendered.find("input").at(bottom).simulate("change", { target: { value } }); - - expect(onChangeCallback).toHaveBeenCalled(); - expect(onChangeCallback.mock.calls[0][0]).toEqual({ - paddingBottom: value, - }); - }); - test("should fire the `onChange` callback when the left padding input values are changed", () => { - const value: string = "left-value-example"; - const onChangeCallback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.setState({ activeType: SpacingType.padding }); - - rendered.find("input").at(left).simulate("change", { target: { value } }); - - expect(onChangeCallback).toHaveBeenCalled(); - expect(onChangeCallback.mock.calls[0][0]).toEqual({ paddingLeft: value }); - }); - test("should fire the `onChange` callback when the right padding input values are changed", () => { - const value: string = "right-value-example"; - const onChangeCallback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.setState({ activeType: SpacingType.padding }); - - rendered.find("input").at(right).simulate("change", { target: { value } }); - - expect(onChangeCallback).toHaveBeenCalled(); - expect(onChangeCallback.mock.calls[0][0]).toEqual({ paddingRight: value }); - }); - test("should fire the `onChange` callback when multiple padding input values are changed", () => { - const rightValue: string = "right-value-example"; - const leftValue: string = "left-value-example"; - const onChangeCallback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.setState({ activeType: SpacingType.padding }); - - rendered - .find("input") - .at(left) - .simulate("change", { target: { value: leftValue } }); - - expect(onChangeCallback).toHaveBeenCalled(); - expect(onChangeCallback.mock.calls[0][0]).toEqual({ - paddingRight: rightValue, - paddingLeft: leftValue, - }); - }); - test("should fire the `onChange` callback when multiple margin input values and padding values are changed", () => { - const rightValue: string = "right-value-example"; - const leftValue: string = "left-value-example"; - const topValue: string = "top-value-example"; - const onChangeCallback: any = jest.fn(); - const rendered: any = mount( - - ); - - rendered.setState({ activeType: SpacingType.padding }); - - rendered - .find("input") - .at(left) - .simulate("change", { target: { value: leftValue } }); - - expect(onChangeCallback).toHaveBeenCalled(); - expect(onChangeCallback.mock.calls[0][0]).toEqual({ - paddingRight: rightValue, - paddingLeft: leftValue, - marginTop: topValue, - }); - }); -}); diff --git a/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.style.ts b/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.style.ts deleted file mode 100644 index cdcfba46e1b..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.style.ts +++ /dev/null @@ -1,126 +0,0 @@ -import { ComponentStyles } from "@microsoft/fast-jss-manager-react"; -import { toPx } from "@microsoft/fast-jss-utilities"; -import { controlWrapperStyle, inputStyle } from "../../style"; - -export interface CSSSpacingClassNameContract { - cssSpacing?: string; - cssSpacing_row?: string; - cssSpacing_type?: string; - cssSpacing_type_contentRegion?: string; - cssSpacing_type__margin?: string; - cssSpacing_type__padding?: string; - cssSpacing_type__marginActive?: string; - cssSpacing_type__paddingActive?: string; - cssSpacing_type__marginHover?: string; - cssSpacing_type__paddingHover?: string; - cssSpacing_input?: string; -} - -const typeThickness: number = 11; -const outlineStrokeThickness: number = 2; -const locationIndicatorHeight: number = typeThickness - 4; -const marginTypeColor: string = "1, 209, 199"; -const paddingTypeColor: string = "118, 108, 255"; -const leftRightPositionActiveMargin: number = typeThickness - 1; -const topBottomPositionActiveMargin: number = 2 * locationIndicatorHeight + 4; -const leftRightPositionActivePadding: number = 1; -const topBottomPositionActivePadding: number = typeThickness / 2 + 1; - -const styles: ComponentStyles = { - cssSpacing: { - fontSize: "11px", - ...controlWrapperStyle, - }, - cssSpacing_row: { - display: "flex", - justifyContent: "center", - }, - cssSpacing_type: { - position: "relative", - borderRadius: "2px", - width: "135px", - height: "48px", - "&::before, &::after": { - content: "''", - position: "absolute", - width: toPx(locationIndicatorHeight), - height: "2px", - background: "white", - zIndex: 1, - }, - }, - cssSpacing_type_contentRegion: { - display: "inline-block", - width: "100%", - lineHeight: "26px", - }, - cssSpacing_type__margin: { - position: "relative", - border: `${toPx(typeThickness)} solid rgba(${marginTypeColor}, 0.5)`, - textAlign: "center", - margin: "4px", - "&::before, &::after": { - top: "calc(50% - 1px)", - }, - "&::before": { - left: toPx(leftRightPositionActivePadding), - }, - "&::after": { - right: toPx(leftRightPositionActivePadding), - }, - "&$cssSpacing_type__marginActive": { - "&::before": { - left: `-${toPx(leftRightPositionActiveMargin)}`, - }, - "&::after": { - right: `-${toPx(leftRightPositionActiveMargin)}`, - }, - }, - }, - cssSpacing_type__padding: { - position: "relative", - boxShadow: `0 0 0 ${toPx(outlineStrokeThickness)} #FFFFFF`, - border: `${toPx(typeThickness)} solid rgba(${paddingTypeColor}, 0.5)`, - width: `calc(100% - ${toPx(2 * typeThickness)})`, - height: `calc(100% - ${toPx(2 * typeThickness)})`, - "&::before, &::after": { - left: "calc(50% - 1px)", - transform: "rotate(90deg)", - }, - "&::before": { - top: `-${toPx(topBottomPositionActiveMargin)}`, - }, - "&::after": { - bottom: `-${toPx(topBottomPositionActiveMargin)}`, - }, - "&$cssSpacing_type__paddingActive": { - "&::before": { - top: `-${toPx(topBottomPositionActivePadding)}`, - }, - "&::after": { - bottom: `-${toPx(topBottomPositionActivePadding)}`, - }, - }, - }, - cssSpacing_type__marginActive: { - border: `${toPx(typeThickness)} solid rgb(${marginTypeColor})`, - color: `rgb(${marginTypeColor})`, - }, - cssSpacing_type__paddingActive: { - border: `${toPx(typeThickness)} solid rgb(${paddingTypeColor})`, - color: `rgb(${paddingTypeColor})`, - }, - cssSpacing_type__marginHover: { - borderColor: `rgba(${marginTypeColor}, 1)`, - }, - cssSpacing_type__paddingHover: { - borderColor: `rgba(${paddingTypeColor}, 1)`, - }, - cssSpacing_input: { - ...inputStyle, - alignSelf: "center", - width: "45px", - }, -}; - -export default styles; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.tsx b/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.tsx deleted file mode 100644 index f3955bccaa5..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/spacing/spacing.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import React from "react"; -import Foundation, { - FoundationProps, - HandledProps, -} from "@microsoft/fast-components-foundation-react"; -import { get, pick } from "lodash-es"; -import { - CSSSpacingHandledProps, - CSSSpacingProps, - CSSSpacingState, - CSSSpacingUnhandledProps, - CSSSpacingValues, - SpacingProperty, - SpacingType, -} from "./spacing.props"; - -export default class CSSSpacing extends Foundation< - CSSSpacingHandledProps, - CSSSpacingUnhandledProps, - CSSSpacingState -> { - public static displayName: string = "CSSSpacing"; - - protected handledProps: HandledProps = { - data: void 0, - onChange: void 0, - managedClasses: void 0, - }; - - constructor(props: CSSSpacingProps) { - super(props); - - this.state = { - activeType: SpacingType.margin, - hoverType: void 0, - }; - } - - public render(): React.ReactNode { - return ( -
    - {this.renderGrid()} -
    - ); - } - - private renderBase(activeType: SpacingType): React.ReactNode { - return ( -
    -
    -
    - - {activeType.toUpperCase()} - -
    -
    -
    - ); - } - - private renderGrid(): React.ReactNode { - const isMargin: boolean = this.state.activeType === SpacingType.margin; - - return ( - -
    - {this.renderInput( - isMargin ? SpacingProperty.marginTop : SpacingProperty.paddingTop - )} -
    -
    - {this.renderInput( - isMargin - ? SpacingProperty.marginLeft - : SpacingProperty.paddingLeft - )} - {this.renderBase(isMargin ? SpacingType.margin : SpacingType.padding)} - {this.renderInput( - isMargin - ? SpacingProperty.marginRight - : SpacingProperty.paddingRight - )} -
    -
    - {this.renderInput( - isMargin - ? SpacingProperty.marginBottom - : SpacingProperty.paddingBottom - )} -
    -     - ); - } - - private renderInput(spacingKey: SpacingProperty): React.ReactNode { - return ( - - ); - } - - private getTypeClassNames(spacingType: SpacingType): string { - let classes: string = get(this.props, "managedClasses.cssSpacing_type"); - - classes += ` ${get( - this.props, - `managedClasses.cssSpacing_type__${spacingType}`, - "" - )}`; - - if (spacingType === this.state.activeType) { - classes += ` ${get( - this.props, - `managedClasses.cssSpacing_type__${spacingType}Active`, - "" - )}`; - } - - if (spacingType === this.state.hoverType) { - classes += ` ${get( - this.props, - `managedClasses.cssSpacing_type__${spacingType}Hover`, - "" - )}`; - } - - return classes; - } - - private handleTypeClick( - spacingType: SpacingType - ): (e: React.MouseEvent) => void { - return (e: React.MouseEvent): void => { - if (e.currentTarget === e.target) { - this.setState({ - activeType: spacingType, - }); - } - }; - } - - private handleMouseOver( - spacingType?: SpacingType - ): (e: React.MouseEvent) => void { - return (e: React.MouseEvent): void => { - if (spacingType && e.currentTarget === e.target) { - this.setState({ - hoverType: spacingType, - }); - } else if (spacingType === undefined) { - this.setState({ - hoverType: void 0, - }); - } - }; - } - - private handleMouseOut = (e: React.MouseEvent): void => { - if (e.currentTarget === e.target) { - this.setState({ - hoverType: void 0, - }); - } - }; - - private handleInputOnChange( - cssKey: SpacingProperty - ): (e: React.ChangeEvent) => void { - return (e: React.ChangeEvent): void => { - const spacing: CSSSpacingValues = pick(this.props.data, [ - SpacingProperty.marginBottom, - SpacingProperty.marginTop, - SpacingProperty.marginLeft, - SpacingProperty.marginRight, - SpacingProperty.paddingBottom, - SpacingProperty.paddingTop, - SpacingProperty.paddingLeft, - SpacingProperty.paddingRight, - ]); - - spacing[cssKey] = e.target.value; - - this.props.onChange(spacing); - }; - } -} diff --git a/packages/tooling/fast-tooling-react/src/css-editor/width/index.ts b/packages/tooling/fast-tooling-react/src/css-editor/width/index.ts deleted file mode 100644 index 9a91651f77c..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/width/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import manageJss from "@microsoft/fast-jss-manager-react"; -import Width from "./width"; -import CSSWidthStyles from "./width.style"; - -/* - * The type returned by manageJss type is very complicated so we'll let the - * compiler infer the type instead of re-declaring just for the package export - */ -const CSSWidth = manageJss(CSSWidthStyles)(Width); -type CSSWidth = InstanceType; - -export { CSSWidth }; -export * from "./width.props"; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/width/width.props.ts b/packages/tooling/fast-tooling-react/src/css-editor/width/width.props.ts deleted file mode 100644 index 21bcb6bac4a..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/width/width.props.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ManagedClasses } from "@microsoft/fast-jss-manager-react"; -import { CSSWidthClassNameContract } from "./width.style"; - -export interface CSSWidthValues { - width?: string; -} - -export type CSSWidthUnhandledProps = React.HTMLAttributes; - -export interface CSSWidthHandledProps extends ManagedClasses { - /** - * The data - */ - data?: CSSWidthValues; - - /** - * The onChange callback - */ - onChange?: (width: CSSWidthValues) => void; -} - -export type CSSWidthProps = CSSWidthHandledProps & CSSWidthUnhandledProps; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/width/width.schema.json b/packages/tooling/fast-tooling-react/src/css-editor/width/width.schema.json deleted file mode 100644 index 2553aa992fc..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/width/width.schema.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "$schema": "http://json-schema.org/schema#", - "title": "CSS Width", - "description": "A CSS width component's schema definition.", - "id": "@microsoft/fast-tooling-react/css-width", - "type": "object", - "properties": { - "data": { - "title": "CSS Values", - "type": "object", - "properties": { - "width": { - "title": "Width", - "type": "string" - } - } - } - } -} \ No newline at end of file diff --git a/packages/tooling/fast-tooling-react/src/css-editor/width/width.spec.tsx b/packages/tooling/fast-tooling-react/src/css-editor/width/width.spec.tsx deleted file mode 100644 index 52a6f52261a..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/width/width.spec.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, shallow } from "enzyme"; -import CSSWidth from "./width"; -import { CSSWidthClassNameContract } from "./width.style"; - -/** - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("CSSWidth", () => { - const managedClasses: CSSWidthClassNameContract = { - cssWidth: "cssWidth", - cssWidth_control: "cssWidth_control", - cssWidth_input: "cssWidth_input", - cssWidth_label: "cssWidth_label", - }; - - test("should not throw", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - test("should have a displayName that matches the component name", () => { - expect((CSSWidth as any).name).toBe(CSSWidth.displayName); - }); - test("should use the `data` prop as the input value if the `width` is provided", () => { - const widthValue: string = "12px"; - const rendered: any = mount( - - ); - - expect(rendered.find(`.${managedClasses.cssWidth_input}`).prop("value")).toBe( - widthValue - ); - }); - test("should fire the `onChange` event if the input value is updated", () => { - const widthValue: string = "12px"; - const newWidthValue: string = "40px"; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find(`.${managedClasses.cssWidth_input}`) - .simulate("change", { target: { value: newWidthValue } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toEqual({ width: newWidthValue }); - }); - test("should not change the input from controlled to uncontrolled", () => { - const widthValue: string = "12px"; - const newWidthValue: string = void 0; - const callback: any = jest.fn(); - const rendered: any = mount( - - ); - - expect(callback).toHaveBeenCalledTimes(0); - - rendered - .find(`.${managedClasses.cssWidth_input}`) - .simulate("change", { target: { value: newWidthValue } }); - - expect(callback).toHaveBeenCalledTimes(1); - expect(callback.mock.calls[0][0]).toEqual({ width: newWidthValue }); - - rendered.setProps({ - data: {}, - }); - - expect(rendered.find(`.${managedClasses.cssWidth_input}`).prop("value")).toBe(""); - }); -}); diff --git a/packages/tooling/fast-tooling-react/src/css-editor/width/width.style.ts b/packages/tooling/fast-tooling-react/src/css-editor/width/width.style.ts deleted file mode 100644 index 8d443ad96cf..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/width/width.style.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { ComponentStyles } from "@microsoft/fast-jss-manager-react"; -import { - controlRegionStyle, - controlWrapperStyle, - inputStyle, - labelStyle, -} from "../../style"; - -export interface CSSWidthClassNameContract { - cssWidth?: string; - cssWidth_control?: string; - cssWidth_input?: string; - cssWidth_label?: string; -} - -const styles: ComponentStyles = { - cssWidth: { - ...controlWrapperStyle, - }, - cssWidth_control: { - ...controlRegionStyle, - }, - cssWidth_input: { - ...inputStyle, - width: "50%", - marginLeft: "4px", - }, - cssWidth_label: { - ...labelStyle, - width: "50%", - }, -}; - -export default styles; diff --git a/packages/tooling/fast-tooling-react/src/css-editor/width/width.tsx b/packages/tooling/fast-tooling-react/src/css-editor/width/width.tsx deleted file mode 100644 index a770c14c2bc..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-editor/width/width.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react"; -import { get } from "lodash-es"; -import Foundation, { - FoundationProps, - HandledProps, -} from "@microsoft/fast-components-foundation-react"; -import { CSSWidthHandledProps, CSSWidthUnhandledProps } from "./width.props"; - -export default class CSSWidth extends Foundation< - CSSWidthHandledProps, - CSSWidthUnhandledProps, - {} -> { - public static displayName: string = "CSSWidth"; - - protected handledProps: HandledProps = { - data: void 0, - onChange: void 0, - managedClasses: void 0, - }; - - public render(): React.ReactNode { - return ( -
    -
    - - -
    -
    - ); - } - - private handleWidthOnChange = (e: React.ChangeEvent): void => { - this.props.onChange({ - width: e.target.value || void 0, - }); - }; -} diff --git a/packages/tooling/fast-tooling-react/src/css-property-editor/index.ts b/packages/tooling/fast-tooling-react/src/css-property-editor/index.ts deleted file mode 100644 index 121556a83bb..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-property-editor/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import manageJss from "@microsoft/fast-jss-manager-react"; -import PropertyEditor from "./property-editor"; -import CSSPropertyEditorStyles from "./property-editor.style"; - -/* - * The type returned by manageJss type is very complicated so we'll let the - * compiler infer the type instead of re-declaring just for the package export - */ -const CSSPropertyEditor = manageJss(CSSPropertyEditorStyles)(PropertyEditor); -type CSSPropertyEditor = InstanceType; - -export { CSSPropertyEditor }; -export * from "./property-editor.props"; diff --git a/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor-row.props.ts b/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor-row.props.ts deleted file mode 100644 index c7c0daee949..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor-row.props.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { ManagedClasses } from "@microsoft/fast-jss-manager-react"; - -export interface CSSPropertyEditorRowClassNameContract { - cssPropertyEditorRow?: string; - cssPropertyEditorRow_input?: string; - cssPropertyEditorRow_inputKey?: string; - cssPropertyEditorRow_inputValue?: string; -} - -export type CSSPropertyEditorRowUnhandledProps = React.HTMLAttributes; - -export interface CSSPropertyEditorRowHandledProps - extends ManagedClasses { - /** - * The index of the row - */ - rowIndex: number; - - /** - * The name associated with the value being edited - */ - cssPropertyName: string; - - /** - * The value for the property being edited - */ - value: string; - - /** - * Called when the value changes - */ - onValueChange: (newValue: string, rowKey: string, rowIndex: number) => void; - - /** - * Called when the key value changes - */ - onPropertyNameChange: (newkey: string, oldKey: string, rowIndex: number) => void; - - /** - * Property name should be committed (name input loses focus, user hits enter) - */ - onCommitPropertyNameEdit: (rowKey: string, rowIndex: number) => void; - - /** - * Called when mouse click outside the inputs - */ - onClickOutside: (rowKey: string, rowIndex: number) => void; - - /** - * Called when row gains focus - */ - onRowFocus: (rowKey: string, rowIndex: number) => void; - - /** - * Called when row loses focus - */ - onRowBlur: (rowKey: string, rowIndex: number) => void; - - /** - * Enter key press on value edit input - */ - onValueInputKeyDown: ( - rowKey: string, - rowIndex: number, - event: React.KeyboardEvent - ) => void; -} - -export type CSSPropertyEditorRowProps = CSSPropertyEditorRowHandledProps & - CSSPropertyEditorRowUnhandledProps; diff --git a/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor-row.tsx b/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor-row.tsx deleted file mode 100644 index 799082852ec..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor-row.tsx +++ /dev/null @@ -1,261 +0,0 @@ -import React from "react"; -import { get, isNil } from "lodash-es"; -import Foundation, { - FoundationProps, - HandledProps, -} from "@microsoft/fast-components-foundation-react"; -import { - CSSPropertyEditorRowHandledProps, - CSSPropertyEditorRowUnhandledProps, -} from "./property-editor-row.props"; -import { keyCodeEnter, spinalCase } from "@microsoft/fast-web-utilities"; - -export default class CSSPropertyEditorRow extends Foundation< - CSSPropertyEditorRowHandledProps, - CSSPropertyEditorRowUnhandledProps, - {} -> { - public static displayName: string = "CSSPropertyEditorRow"; - - protected handledProps: HandledProps = { - cssPropertyName: void 0, - value: void 0, - rowIndex: void 0, - onPropertyNameChange: void 0, - onValueChange: void 0, - onClickOutside: void 0, - onValueInputKeyDown: void 0, - onCommitPropertyNameEdit: void 0, - onRowFocus: void 0, - onRowBlur: void 0, - managedClasses: void 0, - }; - - private monospaceFontWidthMultiplier: number = 7.6; - private rowRef: React.RefObject = React.createRef(); - private nameInputRef: React.RefObject = React.createRef< - HTMLInputElement - >(); - private valueInputRef: React.RefObject = React.createRef< - HTMLInputElement - >(); - - constructor(props: CSSPropertyEditorRowHandledProps) { - super(props); - - this.state = { - propertyKeyLastCharacterIsDash: false, - }; - } - - public componentDidMount(): void { - if ( - isNil(this.rowRef.current) || - isNil(this.nameInputRef.current) || - isNil(this.valueInputRef.current) - ) { - return; - } - - // force focus to a new row when it mounts - if ( - this.props.cssPropertyName === "" && - this.props.value === "" && - !this.rowRef.current.contains(document.activeElement) - ) { - this.nameInputRef.current.focus(); - } - } - - /** - * main render function for the row - */ - public render(): React.ReactNode { - return ( -
    - - : - - ; -
    - ); - } - - /** - * calculate mono space width of an input - */ - private getMonospaceInputWidth = (inputValue: string): number => { - if (isNil(inputValue)) { - return 0; - } - return inputValue.length * this.monospaceFontWidthMultiplier; - }; - - /** - * get classes for name input - */ - private generateNameInputClassNames(): string { - return `${get(this.props.managedClasses, "cssPropertyEditorRow_input", "")} ${get( - this.props.managedClasses, - "cssPropertyEditorRow_inputKey", - "" - )}`; - } - - /** - * get classes for value input - */ - private generateValueInputClassNames(): string { - return `${get(this.props.managedClasses, "cssPropertyEditorRow_input", "")} ${get( - this.props.managedClasses, - "cssPropertyEditorRow_inputValue", - "" - )}`; - } - - /** - * value has changed in key input - */ - private handleNameInputChange = (e: React.ChangeEvent): void => { - const newName: string = e.target.value; - - if (this.props.cssPropertyName !== newName) { - this.setState({ - propertyKeyLastCharacterIsDash: newName.endsWith("-"), - }); - - this.props.onPropertyNameChange( - newName, - this.props.cssPropertyName, - this.props.rowIndex - ); - } - }; - - /** - * value has changed in value input - */ - private handleValueInputChange = (e: React.ChangeEvent): void => { - const newValue: string = e.target.value; - - if (this.props.value !== newValue) { - this.props.onValueChange( - newValue, - this.props.cssPropertyName, - this.props.rowIndex - ); - } - }; - - /** - * Handle focus events - */ - private handleFocus = (): void => { - this.props.onRowFocus(this.props.cssPropertyName, this.props.rowIndex); - }; - - /** - * key input has lost focus - */ - private handleNameInputBlur = (e: React.FocusEvent): void => { - this.setState({ - propertyKeyLastCharacterIsDash: false, // this must be removed prior to submitting the property name - }); - - this.props.onCommitPropertyNameEdit( - this.props.cssPropertyName, - this.props.rowIndex - ); - - this.checkForRowBlur(e); - }; - - /** - * value input has lost focus - */ - private handleValueInputBlur = (e: React.FocusEvent): void => { - this.checkForRowBlur(e); - }; - - /** - * check if the row is losing focus in the provided focus event - */ - private checkForRowBlur = (e: React.FocusEvent): void => { - if ( - !isNil(this.rowRef.current) && - !this.rowRef.current.contains(e.relatedTarget as Element) - ) { - this.props.onRowBlur(this.props.cssPropertyName, this.props.rowIndex); - } - }; - - /** - * Handle click - */ - private handleClick = (e: React.MouseEvent): void => { - if ((e.target as HTMLElement).nodeName !== "INPUT") { - this.props.onClickOutside(this.props.cssPropertyName, this.props.rowIndex); - } - e.preventDefault(); - }; - - /** - * Handle key presses on key input - */ - private handleKeyInputKeyDown = (e: React.KeyboardEvent): void => { - if (e.keyCode === keyCodeEnter) { - e.preventDefault(); - - this.props.onCommitPropertyNameEdit( - this.props.cssPropertyName, - this.props.rowIndex - ); - - if (!isNil(this.valueInputRef.current)) { - this.valueInputRef.current.focus(); - } - } - }; - - /** - * Handle key presses on key input - */ - private handleValueInputKeyDown = (e: React.KeyboardEvent): void => { - this.props.onValueInputKeyDown( - this.props.cssPropertyName, - this.props.rowIndex, - e - ); - }; -} diff --git a/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor.props.ts b/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor.props.ts deleted file mode 100644 index 8cd4f275275..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor.props.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { ManagedClasses } from "@microsoft/fast-jss-manager-react"; - -export interface CSSPropertyEditorClassNameContract { - cssPropertyEditor?: string; - cssPropertyEditor_propertyRegion?: string; - cssPropertyEditor_row?: string; - cssPropertyEditor_input?: string; - cssPropertyEditor_inputKey?: string; - cssPropertyEditor_inputValue?: string; -} - -export interface CSSProperties { - [key: string]: string; -} - -export type CSSPropertiesOnChange = (CSS: CSSProperties) => void; - -export interface CSSPropertyEditorState { - /** - * The uncommitted string for the key of the row currently being edited - */ - activeRowUncommittedCSSName: string; -} - -export type CSSPropertyEditorUnhandledProps = React.HTMLAttributes; - -export interface CSSPropertyEditorHandledProps - extends ManagedClasses { - /** - * The onChange event for updating the data - */ - onChange?: CSSPropertiesOnChange; - - /** - * The CSS data - */ - data?: CSSProperties; -} - -export type CSSPropertyEditorProps = CSSPropertyEditorHandledProps & - CSSPropertyEditorUnhandledProps; diff --git a/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor.spec.tsx b/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor.spec.tsx deleted file mode 100644 index 565896ab88b..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor.spec.tsx +++ /dev/null @@ -1,190 +0,0 @@ -import React from "react"; -import Adapter from "enzyme-adapter-react-16"; -import { configure, mount, ReactWrapper, shallow } from "enzyme"; -import { CSSPropertyEditor } from "./"; -import { CSSPropertyEditorClassNameContract } from "./property-editor.props"; -import { keyCodeEnter } from "@microsoft/fast-web-utilities"; - -/** - * Configure Enzyme - */ -configure({ adapter: new Adapter() }); - -describe("CSSPropertyEditor", () => { - test("should not throw", () => { - expect(() => { - shallow(); - }).not.toThrow(); - }); - - test("should show no inputs by default", () => { - const rendered: any = mount(); - - expect(rendered.find("input")).toHaveLength(0); - rendered.first().simulate("focus"); - expect(rendered.find("input")).toHaveLength(2); - }); - - test("should fire the onChange callback on loss of focus and there is data available", () => { - const callback: any = jest.fn(); - const key: string = "padding"; - const value: string = "10px"; - const rendered: any = mount(); - - expect(callback).toBeCalledTimes(0); - rendered.first().simulate("focus"); - const inputs: any = rendered.find("input"); - inputs.at(0).simulate("change", { target: { value: key } }); - inputs.at(1).simulate("change", { target: { value } }); - expect(callback).toBeCalledTimes(1); - inputs.at(0).simulate("blur"); - expect(callback).toBeCalledTimes(2); - expect(callback.mock.calls[1][0]).toEqual({ [key]: value }); - }); - - // Test is incompatible with Jest 25.x, refer to issue #2880 - xtest("should focus the key input when the containing div has been clicked", () => { - const rendered: any = mount(); - - rendered.find("div").at(0).simulate("click"); - - expect(rendered.find("input").at(0).getDOMNode()).toEqual(document.activeElement); - }); - - test("should show data key/value pairs as inputs using the key and value as input values", () => { - const data: { [key: string]: string } = { - padding: "10px", - margin: "30px", - }; - const rendered: any = mount(); - const inputs: any = rendered.find("input"); - const dataKeys: string[] = Object.keys(data); - - expect(inputs).toHaveLength(4); - expect(inputs.at(0).prop("value")).toEqual(dataKeys[0]); - expect(inputs.at(1).prop("value")).toEqual(data[dataKeys[0]]); - expect(inputs.at(2).prop("value")).toEqual(dataKeys[1]); - expect(inputs.at(3).prop("value")).toEqual(data[dataKeys[1]]); - }); - - test("should allow updates to key/value pairs in the same order they appear in the object", () => { - const callback: any = jest.fn(); - const data: { [key: string]: string } = { - padding: "10px", - margin: "30px", - }; - const rendered: any = mount( - - ); - const inputs: any = rendered.find("input"); - const dataKeys: string[] = Object.keys(data); - - inputs.at(0).simulate("focus"); - inputs.at(0).simulate("change", { target: { value: "padding-top" } }); - inputs.at(0).simulate("blur"); - - const updatedDataKeys: string[] = Object.keys(callback.mock.calls[0][0]); - - expect(dataKeys[0]).not.toEqual(updatedDataKeys[0]); - expect(dataKeys[1]).toEqual(updatedDataKeys[1]); - }); - - test("should convert a camelCased property key into a dash separated key in the input value", () => { - const callback: any = jest.fn(); - const data: { [key: string]: string } = { - paddingTop: "10px", - }; - const rendered: any = mount( - - ); - const inputs: any = rendered.find("input"); - - expect(inputs.at(0).prop("value")).toEqual("padding-top"); - }); - - test("should convert a dash separated key that ends in a dash into a camelCased key when the onChange callback is fired", () => { - const callback: any = jest.fn(); - const data: { [key: string]: string } = { - margin: "10px", - }; - const rendered: any = mount( - - ); - const inputs: any = rendered.find("input"); - - inputs.at(0).simulate("focus"); - inputs.at(0).simulate("change", { target: { value: "padding-" } }); - inputs.at(0).simulate("blur"); - - const updatedDataKeys: string[] = Object.keys(callback.mock.calls[0][0]); - - expect(updatedDataKeys[0]).toEqual("padding"); - }); - - test("should convert a dash separated key into a camelCased key when the onChange callback is fired", () => { - const callback: any = jest.fn(); - const data: { [key: string]: string } = { - padding: "10px", - }; - const rendered: any = mount( - - ); - const inputs: any = rendered.find("input"); - - inputs.at(0).simulate("focus"); - inputs.at(0).simulate("change", { target: { value: "padding-top" } }); - inputs.at(0).simulate("blur"); - - const updatedDataKeys: string[] = Object.keys(callback.mock.calls[0][0]); - - expect(updatedDataKeys[0]).toEqual("paddingTop"); - }); - - test("should not throw an error of a property value is undefined", () => { - const data: { [key: string]: string } = { - padding: void 0, - }; - expect(() => { - shallow(); - }).not.toThrow(); - }); - - test("should remove the active row with empty key on input blur", () => { - const data: { [key: string]: string } = { - padding: "10px", - margin: "30px", - }; - const emptyKey: string = ""; - const rendered: any = mount(); - let inputs: any = rendered.find("input"); - expect(inputs).toHaveLength(4); - inputs.at(0).simulate("focus"); - inputs.at(0).simulate("change", { target: { value: emptyKey } }); - inputs.at(0).simulate("blur"); - - inputs = rendered.find("input"); - expect(inputs).toHaveLength(2); - }); - - test("should fire the onChange callback to add new key values when the enter key is pressed", () => { - const data: { [key: string]: string } = { - padding: "10px", - margin: "30px", - }; - const callback: any = jest.fn(); - const newKey: string = "padding-top"; - - const rendered: any = mount( - - ); - - const inputs: any = rendered.find("input"); - expect(inputs).toHaveLength(4); - inputs.at(0).simulate("focus"); - inputs.at(0).simulate("change", { target: { value: newKey } }); - inputs.at(0).simulate("keydown", { keyCode: keyCodeEnter }); - - const updatedDataKeys: string[] = Object.keys(callback.mock.calls[0][0]); - expect(updatedDataKeys[0]).toEqual("paddingTop"); - }); -}); diff --git a/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor.style.ts b/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor.style.ts deleted file mode 100644 index bffe78725c9..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor.style.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { ComponentStyles } from "@microsoft/fast-jss-manager-react"; -import { - codeHighlightCSSKeyColor, - codeHighlightCSSValueColor, - L4CSSProperty, - textColorCSSProperty, -} from "../style"; - -export interface CSSPropertyEditorClassNameContract { - cssPropertyEditor?: string; - cssPropertyEditor_propertyRegion?: string; - cssPropertyEditor_input?: string; - cssPropertyEditor_inputKey?: string; - cssPropertyEditor_inputValue?: string; -} - -const styles: ComponentStyles = { - cssPropertyEditor: { - background: L4CSSProperty, - color: textColorCSSProperty, - height: "100%", - padding: "0", - margin: "0", - outlineWidth: "0", - fontFamily: "Consolas, monaco, monospace, monospace", - fontSize: "12px", - }, - cssPropertyEditor_propertyRegion: { - display: "inline-block", - paddingLeft: "20px", - width: "100%", - outlineWidth: "0", - "&::before, &::after": { - marginLeft: "-20px", - }, - "&::before": { - content: "'{'", - }, - "&::after": { - display: "block", - content: "'}'", - }, - }, - cssPropertyEditor_row: { - outlineWidth: "0", - }, - cssPropertyEditor_input: { - background: "transparent", - fontFamily: "Consolas, monaco, monospace, monospace", - border: "none", - "&:focus": { - boxShadow: `0 0 1px ${textColorCSSProperty}`, - borderRadius: "2px", - outline: "none", - }, - }, - cssPropertyEditor_inputKey: { - color: codeHighlightCSSKeyColor, - }, - cssPropertyEditor_inputValue: { - color: codeHighlightCSSValueColor, - marginLeft: "5px", - }, -}; - -export default styles; diff --git a/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor.tsx b/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor.tsx deleted file mode 100644 index d0dc4e5c4a4..00000000000 --- a/packages/tooling/fast-tooling-react/src/css-property-editor/property-editor.tsx +++ /dev/null @@ -1,466 +0,0 @@ -import React from "react"; -import { camelCase, get, isEqual, isNil } from "lodash-es"; -import Foundation, { - FoundationProps, - HandledProps, -} from "@microsoft/fast-components-foundation-react"; -import { - CSSProperties, - CSSPropertyEditorHandledProps, - CSSPropertyEditorProps, - CSSPropertyEditorState, - CSSPropertyEditorUnhandledProps, -} from "./property-editor.props"; -import PropertyEditorRow from "./property-editor-row"; -import { canUseDOM } from "exenv-es6"; -import { keyCodeEnter, keyCodeTab } from "@microsoft/fast-web-utilities"; - -export default class CSSPropertyEditor extends Foundation< - CSSPropertyEditorHandledProps, - CSSPropertyEditorUnhandledProps, - CSSPropertyEditorState -> { - public static displayName: string = "CSSPropertyEditor"; - public static newRowKey: string = "newCSSEditorRow"; - - protected handledProps: HandledProps = { - data: void 0, - onChange: void 0, - managedClasses: void 0, - }; - - // private newEditRowKeyName: string = "newCssPropertyEditorEditRow"; - private propertyEditorRef: React.RefObject; - private editData: CSSProperties; - private submittedEditData: CSSProperties; - private activeEditRowReactKey: string; - private activeEditRowIndex: number; - private newRowKeyCounter: number; - - constructor(props: CSSPropertyEditorProps) { - super(props); - - this.propertyEditorRef = React.createRef(); - this.activeEditRowIndex = -1; - this.newRowKeyCounter = 0; - this.activeEditRowReactKey = null; - this.editData = isNil(this.props.data) ? {} : Object.assign({}, this.props.data); - this.submittedEditData = isNil(this.props.data) - ? {} - : Object.assign({}, this.props.data); - this.state = { - activeRowUncommittedCSSName: null, - }; - } - - public componentDidUpdate(prevProps: CSSPropertyEditorProps): void { - if ( - !isEqual(this.props.data, prevProps.data) && - !isEqual(this.props.data, this.submittedEditData) - ) { - // if we don't recognize data props treat as a reset - this.editData = isNil(this.props.data) - ? {} - : Object.assign({}, this.props.data); - this.submittedEditData = isNil(this.props.data) - ? {} - : Object.assign({}, this.props.data); - this.setState({ - activeRowUncommittedCSSName: null, - }); - } - } - - /** - * Render the component - */ - public render(): React.ReactNode { - return ( -
    - 
    -                    {this.renderRows()}
-
    -
    - ); - } - - /** - * Render all rows - */ - private renderRows(): React.ReactNode { - if (isNil(this.editData)) { - return; - } - - return Object.keys(this.editData).map( - (cssKey: string, index: number): React.ReactNode => { - return this.renderRow(cssKey, index); - } - ); - } - - /** - * Render a single row - */ - private renderRow = (cssKey: string, index: number): React.ReactNode => { - const itemKey: string = this.getItemKey(cssKey, index); - - const editKey: string = - this.activeEditRowIndex === index && - this.state.activeRowUncommittedCSSName !== null - ? this.state.activeRowUncommittedCSSName - : cssKey; - - return ( - - ); - }; - - /** - * get an item key - */ - private getItemKey = (cssKey: string, index: number): string => { - let editKey: string = cssKey; - if (this.activeEditRowIndex === index) { - if (this.activeEditRowReactKey !== null) { - editKey = this.activeEditRowReactKey; - } else if (cssKey === "") { - editKey = this.generateItemKey(); - } else { - this.activeEditRowReactKey = cssKey; - } - } - return editKey; - }; - - /** - * generate a new item key - */ - private generateItemKey = (): string => { - this.newRowKeyCounter = this.newRowKeyCounter + 1; - if (this.newRowKeyCounter > 100) { - this.newRowKeyCounter = 1; - } - this.activeEditRowReactKey = `${CSSPropertyEditor.newRowKey}${this.newRowKeyCounter}`; - return this.activeEditRowReactKey; - }; - - /** - * CSS key has changed in a row input - */ - private handleKeyChange = ( - newkey: string, - oldKey: string, - rowIndex: number - ): void => { - this.setState({ - activeRowUncommittedCSSName: newkey, - }); - }; - - /** - * A value has changed in a row input - */ - private handleValueChange = ( - newValue: string, - rowKey: string, - rowIndex: number - ): void => { - const newData: CSSProperties = {}; - - // The reason this is iterated over in this manner is to preserve - // the order of keys in the CSS object - Object.keys(this.editData).forEach((key: string, index: number) => { - newData[key] = index === rowIndex ? newValue : this.editData[key]; - }); - - this.editData = newData; - this.activeEditRowIndex = rowIndex; - this.handleCSSUpdate(newData); - }; - - /** - * Commits a key change to data - */ - private commitCSSKeyEdit = (): void => { - if (this.state.activeRowUncommittedCSSName === null) { - return; - } - const newData: CSSProperties = {}; - - // The reason this is iterated over in this manner is to preserve - // the order of keys in the CSS object - Object.keys(this.editData).forEach((key: string, index: number) => { - if (index === this.activeEditRowIndex) { - newData[ - camelCase(this.state.activeRowUncommittedCSSName) - ] = this.editData[key]; - } else { - newData[key] = this.editData[key]; - } - }); - - this.editData = newData; - this.setState({ - activeRowUncommittedCSSName: null, - }); - - this.handleCSSUpdate(newData); - }; - - /** - * Row gained focus - */ - private handleRowFocus = (rowKey: string, rowIndex: number): void => { - if (this.activeEditRowIndex !== rowIndex) { - this.activeEditRowReactKey = null; - this.activeEditRowIndex = rowIndex; - } - }; - - /** - * Key input has lost focus - */ - private handleCommitKeyEdit = (rowKey: string, rowIndex: number): void => { - if (this.state.activeRowUncommittedCSSName !== null) { - if (this.state.activeRowUncommittedCSSName === "") { - this.deleteRow(rowIndex); - } else { - this.commitCSSKeyEdit(); - } - } else if (rowKey === "") { - this.deleteRow(rowIndex); - } - }; - - /** - * Row has lost focus - */ - private handleRowBlur = (rowKey: string, rowIndex: number): void => { - if (this.activeEditRowIndex !== rowIndex) { - return; - } - if (this.editData[rowKey] === "") { - this.deleteRow(rowIndex); - } - this.activeEditRowReactKey = null; - this.activeEditRowIndex = -1; - this.setState({ - activeRowUncommittedCSSName: null, - }); - }; - - /** - * Clicks on a row outside the inputs add a row following that row - */ - private handleClickOutside = (rowKey: string, rowIndex: number): void => { - this.createRow(rowIndex + 1); - }; - - /** - * Add a row at the end of the list when there are clicks outside of an existing row - */ - private handleClick = (e: React.MouseEvent): void => { - if (e.defaultPrevented) { - return; - } - - this.createRow( - !isNil(this.propertyEditorRef.current) && - e.nativeEvent.offsetY < this.propertyEditorRef.current.clientHeight / 2 - ? 0 - : Object.keys(this.editData).length - ); - }; - - /** - * key was pressed on value editor input - */ - private handleValueInputKeyDown = ( - rowKey: string, - rowIndex: number, - event: React.KeyboardEvent - ): void => { - const rowCount: number = Object.keys(this.editData).length; - switch (event.keyCode) { - case keyCodeEnter: - if (rowIndex < rowCount - 1) { - // focus on the next row - this.focusOnRow(rowIndex + 1); - event.preventDefault(); - } else if (this.editData[rowKey] !== "") { - // create a new row if the current one is valid - this.createRow(rowCount); - event.preventDefault(); - } - return; - - case keyCodeTab: - if ( - !event.shiftKey && - rowIndex === rowCount - 1 && - this.editData[rowKey] !== "" - ) { - // create a new row if the current one is valid - this.createRow(rowCount); - event.preventDefault(); - } - return; - } - }; - - /** - * Focus on the key input of the next row - */ - private focusOnRow = (index: number): void => { - const rows: Element[] = this.domChildren( - (this.propertyEditorRef.current as HTMLElement) - .firstElementChild as HTMLElement - ); - if (rows.length < index + 1) { - return; - } - const focusRow: HTMLElement = rows[index] as HTMLElement; - const focusInput: HTMLElement = this.domChildren(focusRow)[0] as HTMLElement; - focusInput.focus(); - }; - - /** - * Return an array of all elements that are children - * of the root element - */ - private domChildren(element: HTMLElement): Element[] { - return canUseDOM() && element instanceof HTMLElement - ? Array.from(element.children) - : []; - } - - /** - * Component got focus without any data rows, so add an empty one - */ - private handleEmptyFocus = (): void => { - this.createRow(0); - }; - - /** - * Create a new row at the insertion index - * Retains keys for existing elements - */ - private createRow = (insertionIndex: number): void => { - if (this.activeEditRowIndex !== -1) { - const activeRowKey: string = Object.keys(this.editData)[ - this.activeEditRowIndex - ]; - const activeRowIndex: number = this.activeEditRowIndex; - this.handleRowBlur(activeRowKey, this.activeEditRowIndex); - // if the active row was delected we may need to adjust the insertion index - if ( - Object.keys(this.editData).indexOf(activeRowKey) === -1 && - insertionIndex > activeRowIndex - ) { - insertionIndex = insertionIndex - 1; - } - } - - const newData: CSSProperties = {}; - const keys: string[] = Object.keys(this.editData); - - for (let i: number = 0, keysLength: number = keys.length; i <= keysLength; i++) { - if (i === insertionIndex) { - newData[""] = ""; - } else if (i < insertionIndex) { - const key: string = keys[i]; - newData[key] = this.editData[key]; - } else { - const key: string = keys[i - 1]; - newData[key] = this.editData[key]; - } - } - - this.activeEditRowIndex = insertionIndex; - this.activeEditRowReactKey = null; - this.editData = newData; - this.forceUpdate(); - }; - - /** - * Delete the new row at the deletion index - */ - private deleteRow = (deletionIndex: number): void => { - const newData: CSSProperties = {}; - - Object.keys(this.editData).forEach((key: string, index: number) => { - if (index !== deletionIndex) { - newData[key] = this.editData[key]; - } - }); - - this.editData = newData; - - if (deletionIndex === this.activeEditRowIndex) { - this.setState({ - activeRowUncommittedCSSName: null, - }); - this.activeEditRowIndex = -1; - } - - this.handleCSSUpdate(newData); - }; - - /** - * data has changed, invoke onChange to update the parent - */ - private handleCSSUpdate = (updatedCSS: D): void => { - if ( - typeof this.props.onChange === "function" && - !isEqual(updatedCSS, this.props.data) - ) { - this.submittedEditData = Object.assign({}, updatedCSS); - this.props.onChange(Object.assign({}, updatedCSS)); - } - }; -}