Shared with Script Lab

React Color Picker.yaml

name: React Color Picker
description: ''
author: jaredpalmer
host: EXCEL
api_set: {}
script:
    content: |+
        async function colorCell(color = "yellow") {
            await Excel.run(async (context) => {
                const range = context.workbook.getSelectedRange();
                range.format.fill.color = color;
                range.load("address");

                await context.sync()

                console.log(`The range address was "${range.address}".`);
            });
        }

        const { React, ReactDOM, Fabric} = window as any;

        class App extends React.Component<any, any> {
            state = {
                color: '#0055ff'
            }

            handleClick = e => {
                colorCell(this.state.color).then(() => {
                    console.log('done')
                }, error => {
                    OfficeHelpers.UI.notify(error);
                    OfficeHelpers.Utilities.log(error);
                })
            }

            handleChangeColor = color => {
               this.setState({ color })
            }

            render() {
                return React.createElement('div', {
                }, React.createElement(
                    'div', {
                            className: 'ms-font-xxl',
                            style: {
                                marginBottom: '20px'
                            }
                 
                    }, 'I am rendered with React'),
                    React.createElement(Fabric.ColorPicker, {
                        
                            color: this.state.color,
                        
                        onColorChanged: this.handleChangeColor,
                    }),
                React.createElement(Fabric.PrimaryButton, {
                   
                    onClick: this.handleClick,
                }, 'Fill'));
           }
        }


        ReactDOM.render(React.createElement(App), document.getElementById('root'))


    language: typescript
template:
    content: |
        <div id="root"></div>
    language: html
style:
    content: ''
    language: css
libraries: |
    # Office.js
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js

    # CSS Libraries
    [email protected]/dist/css/fabric.min.css
    [email protected]/dist/css/fabric.components.min.css

    # NPM libraries
    [email protected]/client/core.min.js
    @microsoft/[email protected]/dist/office.helpers.min.js
    [email protected]/dist/react.js
    [email protected]/dist/react-dom.js
    [email protected]
    [email protected]/dist/office-ui-fabric-react.js


    # IntelliSense: @types/library or node_modules paths or URL to d.ts files
    @types/office-js
    @types/office-ui-fabric-react
    @types/core-js
    @types/react
    @types/react-dom
    @microsoft/[email protected]/dist/office.helpers.d.ts
    @types/jquery